About code comments in HTML

This article mainly shares an article about code comments in HTML. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to have a look.

HTML Comments

In HTML code, the text between the tags is Document comments, the content of the comments will not be displayed on the browser page. Comments are only visible when you open the document in a text editor, or with your browser's "View Source" option.

There are two types of comments in HTML, one is HTML code comment and the other is IE conditional comment.

1. HTML code comments

In a large document, comments are used to mark the beginning and end of the block, which can be easily searched, or you can use comments to prevent certain content from being displayed.

When writing a lot of code, it is a good habit to comment out key code. Commenting to explain the intention of a certain piece of code can help remind yourself or others who need to work on this website. Understand what this code does.

It is also a good habit to use comments to hide scripts, so that browsers that do not support scripts will not display the script as plain text. For example:

<script type="text/javascript">
<!--
function displayMsg() {
    alert("Hello World!")
}
//-->
</script>

2, IE conditional comments

IE conditional comments (Conditional comments) are an extension of IE browser to HTML code comments. A kind of non-standard logical statement, which can flexibly import different html elements, such as style sheets, html tags, etc. for different versions of IE.

Conditional comments first appeared in IE5 and are supported by subsequent versions. Its syntax is an ordinary HTML comment. Browsers other than IE will ignore it as a comment. Therefore, it can pass W3C verification and will not affect other browsers.

The function of conditional comments is very powerful. It can perform if conditional judgment and decide whether to parse the content in the conditional comment based on whether the judgment result is true or false.

Conditional judgment starts with . It can be judged based on IE, non-IE, and the version of IE. The version number can be judged by the number, and the version number can be accurate to 4 decimal places. For example:

<!--[if IE]> <![endif]-->      /* 所有IE，无论哪个版本 */
<!--[if IE 6]> <![endif]-->    /* 如果IE版本是6 */

Conditional judgment also supports greater than (gt: greater than), less than (lt: less than), greater than or equal to (gte: greater than or equal), less than or equal to (lte: less than or equal), or (|), and (&), not (!), brackets. For example:

<!--[if gt IE 6]> <![endif]-->             /* 如果IE版本大于6 */
<!-- [if lte IE 9]> <![endif]-->            / * 如果IE版本小于等于9 * /
<!--[if IE 6 | IE 7]> <![endif]-->          /* 如果IE版本是6或7 */
<!--[if ! IE 5.5]> <![endif]-->             /* 如果IE版本不是5.5 */
<!-- [if (gt IE 6) & (lte IE 9)]> <![endif]-->  / * 如果IE版本大于6，且小于等于9 * /

With the help of conditional comments, many IE compatibility issues can be solved. For example, versions below IE9 do not support the new HTML5 elements header, nav, aside, footer, etc. There are a large number of html5shiv scripts on the Internet that can solve this problem. Just download the corresponding script, and use IE conditional comments at the head of the page to let versions below IE9 load the script, so that these old browsers can support the new elements of HTML5.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You can also use the same method to solve CSS compatibility issues. For example, if IE6 does not support some new CSS features, you can write a CSS file specifically for IE6 and only let IE6 load it:

<!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" />
<![endif]-->

The good news is that starting from the IE10 version, conditional comments are no longer supported. This marks the beginning of IE's maturity and standardization, and Web designers no longer have to be troubled by IE's compatibility issues.

Related recommendations:

html comment specification

HTML code comments

HTML code comments

The above is the detailed content of About code comments in HTML. For more information, please follow other related articles on the PHP Chinese website!