Talk about HTML <!--...--> tags

Defined

The comment label is used to insert comments in the HTML source code. Comments are not displayed on the browser.

Usage

According to the basic usage of the definition, the code is as follows

<!--This is a comment that I won't show on the page--

Browser Support Scenarios

All browsers support
These are just the simplest definitions and methods of use. For the use of annotations, what are the more advanced uses.

Advanced Applications1. Allocation of work

<!--TODO: Zhang San begin--><div></div><!--End---

2. Description function module and use method

<!--Activation Status class: Active, Default state class: Defaults, unable to use state class: Disabled--><ul><li class= "active" > Activation </li><li class= "Default" > Default </li><li class= "Disabled" > Not available </li></ul>

3, for the page production notes

<!--This page was created in 2016/5/31, Front end: John Doe, design: Harry--

All 3 of these applications are based on annotations, using features that are not displayed on the browser, explaining the document and facilitating cross-departmental communication across the group at work.

4. The role of CSS/JS within the page

For compatibility with the old version of the browser, for JS and CSS is not recognized. (Only for the understanding, now basically can abandon the use of this feature), the code is as follows

<! DOCTYPE html>
The above code will be displayed directly on the page
. good{color:red;} Alert (' Good ') morning
You can use annotations to prevent code from appearing, affecting the page experience.
<! DOCTYPE html>
This processing also uses//, which is a JavaScript notation that prevents JS-----to execute.
5. Inserting code with annotations
This is also the use of annotations will not be rendered by the page features, to optimize the page. can be used to store data and can be used to store templates.
<!--{id:10000,type:ad,image:1.jpg}--><div is-tpl><!--<div>1111111</div><div> 2222222</div>--></div>
The code here can be matched with regular expressions to take out the corresponding data and parse the data. Here's a simple demo code that uses jquery
$ (' [IS-TPL] '). each (function () {Console.log ($ (). HTML ()) var comment=$ (this). html (); Comment.replace (' <!--', '). Replace ('---', ') ');})
This code also correctly shows, the specific comments to put what data and how to deal with, we think about it.
6, the use of conditional comments to compatible with each browser
The following conditional comments determine IE browser (IE10 does not support these comments later), other browsers will assume that the following is a comment, do not parse.
<!--[if IE 6]> only IE6 recognizable <! [endif]--><!--[If ie]> all IE recognizable <! [endif]--> <!--[if! ie]><!--> In addition to IE can be recognized <!--<! [endif]--> <!--[if IE 6]> only IE6 recognizable <! [endif]--> <!--[if Lt IE 6]> IE6 The following versions are recognized <! [endif]--> <!--[if GTE IE 6]> IE6 and IE6 are recognized <! [endif]--> <!--[if IE 7]> only IE7 recognizable <! [endif]--> <!--[if Lt IE 7]> IE7 The following versions are recognized <! [endif]--> <!--[if GTE IE 7]> IE7 and IE7 are recognized <! [endif]--> <!--[if IE 8]> only IE8 recognizable <! [endif]--> <!--[if IE 9]> only IE9 recognizable <! [endif]-->
Above code everyone should be more familiar with, only do JS and mobile side of the tall, should not have seen.
Look at a lot, memory this can be according to the following rules:
A, the basic structure:
b, and IE relationship

 
  

  
   
 
    
Equal to NULL
 
    
Greater than the GT
 
    
is less than LT
 
    
Size to equals Gte,lte
 
   
 
  
C, and then add the version number
D, finally remember the middle with a space
Remember that a particular other browser is used.
This can be interpreted as two pairs of annotations plus an intermediate code.
For the use of these conditional annotations, it is often seen that:
Conditional Comment HTML tags
<! DOCTYPE html><!--[if IE 6]> 
This can be used to define the style in a particular browser.
. IE6 body{}
This style is only available on the IE6 browser.
Referencing a different style sheet based on comments
<!--[if IE 6]><link rel= "stylesheet" type= "Text/css" media= "All" href= "./ie6.css"/><! [endif]-->
Load JS according to conditions
In IE6, reference to the image supported by the Png24 JS
For Dd_belatedpng.js, everyone Baidu, it is easy to find the relevant use method and library.
Bug Problem IE6 Little Tail
Under IE6, for inline elements, the middle adds a comment that may produce a tail.
<div style= "width:80px; background:red; " ><!--I am a comment--><a href= "#" >1</a><a href= "#" >12</a><a href= "#" >31</a> <!--I am a comment--><a href= "#" >41</a><a href= "#" >51</a><a href= "#" >61</a>< !--I was a comment--><a href= "#" >71asdfasfd</a><!--I was a comment--></div><style>a{float:left; display:inline-block;padding:0 3px;} </style>

As soon as you delete each line of comments and line breaks, the problem is resolved.
Comments appear before DOCTYPE
Although there should not be any code before DOCTYPE HTML, there is no problem with the main browsers because of comments. However, in IE7 and the following browsers will not recognize the rendering type, resulting in the use of strange mode rendering, page style confusion.
<!--I'm the first line of comments--><!doctype Html>
IE7 and the following are shown as
Annotations in the front-end other comments CSS
/* I am a comment in CSS */
The comments in the CSS, only this one.
Note: Use Chinese notes to note that a space is added to the front and back of the comment symbol to prevent coding errors from being garbled and causing the style to be unreadable.
The comments in JS
Single-line Comment
I'm a single-line comment
Multi-line comments
/* I'm a multiline note I'm a multi-line comment */
It is recommended that you use multiline comments to prevent the code feature errors that occur after newline characters are removed.
Such as
var s=10;//defines s as 10var B=20;console.log (b);
After the line break is missing
var s=10;//defines s as 10var B=20;console.log (b);
An error occurs.
If you are using more than a row
var s=10;/* defines s as 10*/var B=20;console.log (b);
The code does not go wrong.
Summarize
Through this to find information, has never felt a note tag can organize so many things. There are some issues, such as advice or attention, that I have encountered in the actual work. Other no contact also can not write up, there is anything missing, you may give me some advice in the comments. Of course I hope you like this article, and pay attention to me.
Talk about HTML <!--...--> tags