HTML/CSS Basics - Several precautions in HTML code writing (must read)

The warning points in this article have nothing to do with browser compatibility. They are mainly a summary of several small problems I encountered in the project. Although the problems are small, they are sometimes very troubling. I will record them here and continue to add them here if there are such problems later.

1. Space between inline tags

Under normal circumstances, when writing HTML code, there are habits such as line breaks and indentation, such as

The display effect is

There is a blank space in the middle. The reason is that if there are consecutive spaces, carriage returns, or line breaks between two inline tags (or when display: inline or inline-block is set), these symbols will be treated as a space symbol by default.

For example, if we add "ddd dd d" between two div tags, the effect is as follows. No matter how many consecutive blank characters there are, the final effect is only one space character.

This is similar to writing characters directly into an inline element.

However, inline elements will have leading and trailing whitespace removed .

So the reminder is:

When arranging inline elements, you need to keep the tags close together if you need to avoid whitespace between them.

When filling in the content of an inline element, try to use .innerText or .textContent (Firefox does not support innerText, but supports this property).

If you must write blanks in HTML code, please use HTML's space representation method 

At this point, I think some people have a distorted understanding of inline elements. The so-called inline is the opposite of the so-called "block". Inline elements do not form blocks. They feel like flowing water, flowing around obstacles. For example, source code

Display Effect

The content in span is divided into two sections and is no longer a complete block.

2. The default margin border of the body tag

There is nothing to say about this. Modern browsers (supporting CSS3) and IE8 have a default CSS style margin: 8px for the body. Some other tags are also like this, so I won’t give examples here. Many times we don't need this, and we need a similar setting at the beginning of the general project style.

3. Special blank characters cause display abnormalities

For example, the following source code seems to have no problem

In fact, there is an abnormal blank character in front of the a tag, and the display effect is as follows

The width of a and the width of #myDIV should be the same, and a is floating, but the display effect is wrapped. This is too crazy, isn't it?

The normal display effect is

Let's take a look at what this abnormal blank is.

The first one is an abnormal space, and its URI component is encoded as "%E3%80%80"

The second is a normal space, whose URI component is encoded as "%20"

The third one is a normal Tab key, whose URI component is encoded as "%20%20%20%20", which is actually 4 spaces.

You see it. Therefore, sometimes the abnormal running effect of the code copied on the website may be caused by this reason.

To be continued. If I think of other points later, I will add them. I also hope that you can raise some related points, and I will definitely add them.

The above article "HTML/CSS Basics - Several Warning Points in the HTML Code Writing Process (Must Read)" is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/chuaWeb/p/5053644.html