首页 » 编程语言 » html » 正文

html注释代码<!--......--> 标签的用法详解

别小看了简单的html注释代码<!--......-->标签,它的作用还是挺大的,对于复杂而庞大的代码量,有必要在需要说明,备注,解释的地方插入一些注释内容,方便以后编辑、修改、查询代码,还可以对某些不需要显示或执行的代码进行屏蔽!

html注释语法

所有浏览器都支持html注释标签代码,<!--注释内容区--> 用来在源文档中插入注释;

所有浏览器都不会显示注释的内容和注释本身的符号,并且不占用浏览器的空间;

html注释代码书写格式如下:

<!--注释内容区-->

格式分析:

以一个左尖括号“<”开始+感叹号“!”+两个链接符号“--”+注释内容区+两个链接符号“--”+以右尖括号“>”结束,这些注释符号书写的字符串都需要切换成英文半角模式,用小写输入;

注释代码本身不能有空格。

比如说,如果<!--这个标签中间的左尖括号、感叹号以及两个连接符号,这三者之间不能出现空格,一旦出现空格,就会失去了注释的作用。但是对注释内容区,你可以随意增加空格,无论加多少都是可以的,只是一般没有那个必要而已。

html注释类型:

根据html注释代码的形式,可分为普通注释和条件注释两种:

1、普通注释:

您可使用注释对您的代码进行说明、备注、解释,方便以后查询、编辑修改代码,特别是代码量很大的情况下很有用。

普通注释根据注释行数可分为以下两种:

单行注释:仅有一行的内容被包裹在“<!--”和“-->”这一对注释符号中,注释的代码只占用html源代码的一行;

<!--这是单行注释-->

多行注释:有两行或两行以上的内容被包裹在“<!--”和“-->”这一对注释符号中。多行注释对解释复杂代码或屏蔽大段代码大有用处。

<!--
    这是多行注释
    这是多行注释
    这是多行注释
-->

理论上,多行注释的行数是没有限制的,但实际运用中,注释的行数不会太多。

2、条件注释

html条件注释只针对IE(Internet Explorer)浏览器。

html条件注释代码:

<!--[if IE]>这里是条件判断成立后被执行的html代码<![endif]-->

例如:检测判断不同版本IE浏览器,并把检测到的IE浏览器版本显示出来,可以这样写:

<!--[if IE 7]>  <h1>您正在使用的浏览器是IE7</h1>  <![endif]-->
<!--[if IE 8]>  <h1>您正在使用的浏览器是IE8</h1>  <![endif]--> 
<!--[if IE 9]>  <h1>您正在使用的浏览器是IE9</h1>  <![endif]--> 
<!--[if IE 10]> <h1>您正在使用的浏览器是IE10</h1> <![endif]--> 
<!--[if IE 11]> <h1>您正在使用的浏览器是IE11</h1> <![endif]-->

以上就是通过html注释检测不同版本IE浏览器,并读取相应的内容在浏览器中显示。

再例如:

如果想要除IE7以外,其他所有浏览器版本都可以显示“欢迎光临刘代码博客”,就可以这样写:

<!--[if !IE 7]> 欢迎光临刘代码博客 <![endif]-->

以上代码中的[if !IE 7] 的IE前面多了一个英文感叹号“!”,这个感叹号用在这里,表示的是除......以外,其他所有的都成立的意思,属于条件注释运算符之一!

你想了解更多有关条件注释的用法及其运算符,可以查看:html条件注释判断不同IE浏览器的作用及用法

html注释处理style和JS问题

1、html注释对<style>标签内的CSS样式是不起作用的!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>html注释代码在style标签中的用法</title> 
<style > 
<!-- 
p{color: red;}  
-->
</style>
</head>
<body>
<p >刘代码博客</p>
</body>
</html>

在上面的代码中,我们已经注释了style标签中P段落标签的样式效果,也就是下面这段代码内容:

<style ><!--  p{color: red;}  --></style>

我们虽然已经注释掉了style标签中P段落标签的样式效果,但在浏览器中,“刘代码博客”五个文字颜色仍然是红色(如下图所示)

根据以上分析可知,html注释符号对<style>标签内的CSS样式是不起作用的!

既然不起作用,那为什么我们还要这样用在style标签内呢?

这是为了兼容老版本的浏览器,老的浏览器不支持style,所以遇到style时,会在浏览器中把style样式代码也显示在页面上,这样会影响前端美观效果。

会导致这个问题的浏览器往往是一些老版本浏览器或IE6以下版本的浏览器,在这些浏览器中,因为不能支持CSS样式,就会导致在浏览器中显示CSS样式代码,影响到外观效果!

当浏览器能够识别style标签的时候,<!--和-->这对标签就会过滤掉,继续执行核心的样式代码;
当浏览器识别不了style标签的时候,<!-- -->就发挥了注释作用,会把注释内容屏蔽掉,不让显示出来 。

2、html注释对<script>标签内的脚本程序是不起作用的!

在<script>标签内使用html注释符号的好处和在style内使用注释是一样的作用,不同的是,在<script>标签中使用,是为了避免脚本代码出现在浏览器中影响美观,style标签中使用是为了避免CSS样式代码出现在浏览器中影响美观!

那如果你想要真的注释掉style内的CSS样式或script内的脚本程序,那么,在style标签内需要使用 /*......*/ ,而在script中需要用单行注释//......或多行注释 /*..... */ 

你还可以查看:HTML注释代码在style和script标签中的作用及用法了解更详细的内容!



欢迎您发表评论或留言