Several precautions during html code writing: html code

Source: Internet
Author: User

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 ]!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.