Several precautions during html code writing: html code

Several precautions during html code writing: html code

The vigilance in this article has nothing to do with browser compatibility. It is mainly a summary of several small problems that I encountered in my project. Although the problem is small, it is sometimes difficult for me to record here, if such problems occur in the future, they will be added here.

 

1. spaces between inline labels

Under normal circumstances, html code is written with line breaks, indentation, and other habits, such

  
The display effect is
　　
There is a blank in the middle. The reason is that if two inline labels (or set display: inline or inline-block) have consecutive space characters, carriage returns, and line breaks, these symbols are processed as space characters by default.
For example, if we add "ddd dd d" to two div labels, the effect is as follows. No matter how many blank symbols are connected, the final effect is only one space character.
　　
This is similar to writing characters directly to the internal element.
　　
However, inline elements remove white spaces in the header and tail.
Therefore, the following message must be prompted:
To avoid gaps between labels during inline element arrangement, the labels must be closely linked.
Use. innerText or. textContent whenever possible when the inline element is required (Firefox does not support innerText, but supports this attribute ).
To write blank space in html code, use the space representation in html & nbsp;
　　
Here, I think some people have deviations in understanding inline elements. The so-called inline is opposite to the so-called "Block. If the inline element is not a block, it will feel like water flow, and it will be surrounded by obstacles. For example, source code
    <div id="myDIV">      <div>div1</div> ddd      dd      d       <div>div2</div>      <span>    d      dd      d       </span>    </div>
Display Effect
　　
The content in span is divided into two segments, not a complete block.
 
2. default margin border of the body Tag
There is nothing to say. modern browsers (supports CSS3) and IE8 bodies both have a default css style margin: 8px. This is also true for some other labels. Most of the time, we do not need to. A similar setting is required at the beginning of a general project style.
    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{    margin: 0;    padding:0;    }
　　
3. Abnormal display due to special blank characters
For example, the source code below seems to be okay.
<! DOCTYPE html> 
In fact, there is an abnormal white space character in front of tag a. 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. Is there any.
The normal display effect is
　　
Let's take a look at what this unusual blank space is.
　　
The first is an abnormal space, and its URI component is encoded as "% E3 % 80% 80"

The second is a normal space, and its URI component is encoded as "% 20"
The third is normal Tab creation. Its URI component is encoded as "% 20% 20% 20% 20", which is actually four spaces.
See it. So sometimes the Abnormal Running Effect of the Code copied on the website may be caused by this reason.
　　
If you want to add other points later. I also hope that the children's shoes will make up some relevant points.
 
If you think this article is good, click [recommendation] in the lower right corner ]!