Home > Article > Web Front-end > Three points that you must pay attention to when writing html code

Three points that you must pay attention to when writing html code

php中世界最好的语言Original: 2018-01-22 10:48:371836browse

This time I will bring you three points that you must pay attention to when writing html code. What are the precautions when writing html code. The following is a practical case, let's take a look.

The cautionary points I want to talk about 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 troublesome. I will record them here. I will continue to add it 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

<head>  
    <meta charset="utf-8">  
    <style>  
    html,body, p, 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;   
    }   
    #myDIV {   
      width: 200px;   
      height: 200px;   
      background-color: #ff0;   
    }   
    #myDIV > p{   
      width: 50px;   
      height: 50px;   
      display: inline-block;   
      background-color: #f00;   
    }   
    </style>  
  
  </head>  
  <body>  
    <p id="myDIV">  
      <p>p1</p>  
      <p>p2</p>  
    </p>  
  </body>

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

For example, if we add " ddd dd d d " between two p tags, the effect is as follows. No matter how many connected whitespace symbols there are, the final effect will be only one space character

This is similar to writing character classes directly into inline elements but inside Linked elements will remove leading and trailing whitespace characters.

So what needs to be reminded is:

When arranging inline elements, if you need to avoid spaces between labels, you need to keep the labels closely connected.

Try to use .innerText or .textContent when filling in content for inline elements (Firefox does not support innerText, but supports this attribute).

If you have to write blanks in the html code, please use the html space representation method

Speaking of this, I think some people have a biased understanding of inline elements. The so-called inline is the opposite of the so-called "block". Inline elements are not in blocks and feel like water flowing around when encountering obstacles. For example, the content in the source code

<p id="myDIV">  
      <p>p1</p> ddd      dd      d       <p>p2</p>  
      <span>    d      dd      d       </span>  
    </p>

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 labels also have this, so I won’t give an example here. Many times we don't need it. We need a similar setting at the beginning of the general project style.

html,body, p, 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. Special whitespace characters cause display exceptions

For example, there seems to be no problem in the source code below

<!DOCTYPE html>  
<html>  
  <head>  
    <meta charset="utf-8">  
    <style>  
    html,body, p, 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;   
    }   
    *{   
      -webkit-box-sizing: border-box;   
      -moz-box-sizing: border-box;   
      box-sizing: border-box;   
    }   
    #myDIV {   
    width: 200px;   
    height: 40px;   
    background-color: #ff0;   
    }   
    #myDIV a{   
      float: left;   
      width: 200px;   
      background-color: #f00;   
    }   
    </style>  
  
  </head>  
  <body>  
    <p class="tabbable" id="tabs" style="border:none;">  
      <!-- 页面标签列表 -->  
      <p id="myDIV" style="">  
      　<a data-toggle="tab" href="#tab-content-0" >test0</a>  
      </p>  
    </p>  
  </body>  
</html>

In fact, there is an abnormality in front of the a tag The width of the whitespace characters

a should be the same as the width of #myDIV, and a is floating, but the display effect is line wrapping, which is too crazy. Yes, yes.

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 one is normal spaces, its URI component code is "%20"

The third one is a normal Tab build, its URI component code is "%20%20%20%20", which is actually 4 spaces.

See it. Therefore, sometimes the abnormal performance of the code copied in the website may be caused by this reason.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Three points that you must pay attention to when writing html code

Related articles