HTML & lt ;! --... -- & Gt; tag ,--...

Last Update:2016-06-01 Source: Internet

Author: User

Tags comment tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Chat HTML <! --... --> Tag ,--...
Definition

The comment tag is used to insert comments in the html source code. The comment is not displayed in the browser.

Usage

The Code is as follows:

<! -- This is a comment and I will not display it on the page -->

Browser support

All browsers support
The above are just the simplest definitions and usage methods. For more advanced usage of annotations.

Advanced Application 1. Assignment

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

2. Description of functional modules and usage

<! -- Activation status: active; default status: default; Unavailable status: disabled --> <ul> <li class = "active"> activation </li> <li class = "default"> default </li> <li class = "disabled"> unavailable </li> </ul>

3. Remarks on page creation

<! -- This page was created on February 31, front-end: Li Si, design: Wang Wu -->

The above three applications are based on annotations. They describe the documents based on their non-display features in the browser to facilitate cross-group and cross-Department communication at work.

4. Functions of CSS/JS on the page

It is used to be compatible with the old version of browsers and cannot be identified by js and css. (This function is only used for understanding. Now you can basically discard it.) The Code is as follows:

<!DOCTYPE html>
The above code is directly displayed on the page
.good{color:red;}alert('good')morning
Annotations can be used to prevent code Display and affect the page experience.
<!DOCTYPE html>
This processing also uses //, which is the annotation symbol of javascript to prevent js from executing -->.5. Insert code using annotations
This is also to optimize the page by using the feature that the annotation will not be rendered by the page. It can be used to store data and templates.
<!-- {id:10000,type:ad,image:1.jpg} --><div is-tpl><!--<div>1111111</div><div>2222222</div>--></div>
The code here can be matched using regular expressions to retrieve the corresponding data and parse the data. The following is a simple DEMO code using jquery.
$('[is-tpl]').each(function(){console.log($(this).html())var comment=$(this).html();$(this).html(comment.replace('<!--','').replace('-->',''));})
In this way, the code is correctly displayed. Let's think about the data to be put in the specific comment and how to handle it.6. Use conditional annotations to be compatible with various browsers
The following condition comments Determine IE (IE10 does not support these comments). other browsers will consider the following as comments and will not parse them.
<! -- [If IE 6]> only IE6 can recognize <! [Endif] --> <! -- [If IE]> all IE identifiable <! [Endif] --> <! -- [If! IE]> <! --> All except IE can be recognized <! -- <! [Endif] --> <! -- [If IE 6]> only IE6 can recognize <! [Endif] --> <! -- [If lt IE 6]> versions earlier than IE6 are recognizable <! [Endif] --> <! -- [If gte IE 6]> IE6 and IE6 and later versions can be recognized <! [Endif] --> <! -- [If IE 7]> only IE7 is recognizable <! [Endif] --> <! -- [If lt IE 7]> versions earlier than IE7 are recognizable <! [Endif] --> <! -- [If gte IE 7]> IE7 and IE7 versions can be identified <! [Endif] --> <! -- [If IE 8]> only IE8 is recognizable <! [Endif] --> <! -- [If IE 9]> only IE9 can recognize <! [Endif] -->
The above code should be familiar to everyone, and we should have never seen it before.
There are a lot of records. Remember this and remember it according to the following rules:
A. Basic Structure:
<! -- [If]> Code <! [Endif] -->
B. Relationship with IE

  
 
   Equal to null
 
   Greater than or equal to gt
 
   Less than <
 
   Larger than or equal to gte, lte

  
C. Add the version number
D. Remember to use spaces in the middle.
Remember what a special web browser uses.
<! -- [If! IE]> <! --> All except IE can be recognized <! -- <! [Endif] -->
This can be interpreted as adding intermediate code to two annotations.
The usage of these condition annotations is often seen as follows:Conditional annotation html Tag
<!DOCTYPE html><!--[if IE 6 ]> 
The style can be defined in a specific browser.
.ie6 body{}
This style is available only in the IE 6 browser.Reference different style sheets based on Annotations
<!--[if IE 6 ]><link rel="stylesheet" type="text/css" media="all" href="./ie6.css" /><![endif]-->Load js based on conditions
In IE6, reference js supported for png24 Images
<! -- [If IE 6]> <script src = "DD_belatedPNG.js" mce_src = "DD_belatedPNG.js"> </script> <script type = "text/javascript"> dd_belatedpng.(fix'.png '); //. png is replaced with a transparent PNG Image selector </script> <! [Endif] -->
For DD_belatedPNG.js, it is easy for you to find related methods and libraries.BUG issue IE6's little tail
In ie6, adding comments in the middle of the line element may produce a tail.
<Div>
<! -- I am the comment of the first line --> <! Doctype html> 
Ie7 and below are displayed
/* I am a comment in css */
This is the only annotation in css.
Note: use Chinese annotations. Note that a space is added before and after the annotator to prevent the style from being read due to incorrect encoding.Comments in js
Single line comment
// I am a single line comment
Multi-line comment
/* I am a multi-line comment and I am a multi-line comment */
We recommend that you use multi-line comments to prevent code function errors after linefeeds are deleted.
For example
Var s = 10; // defines s as 10var B = 20; console. log (B );
With less line breaks
Var s = 10; // defines s as 10var B = 20; console. log (B );
An error occurs.
If multiple rows are used
Var s = 10;/* defines s as 10 */var B = 20; console. log (B );
No error occurs in the code.
In the preceding case, when multiple JavaScript files are merged, single-line comments may also cause errors.Summary
Through this channel, I have never thought that a comment tag can be used to sort out so many things. I have encountered some problems, such as suggestions or notes. If you have no other contact, you can leave it blank. You can give me some suggestions in the comments. Of course, I hope you like this article and follow me.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More