页面的注释

╰半夏微凉° 2022-06-01 00:24 114阅读 0赞

在网页中，除了以上这些基本标签外，还包含一种不显示在页面中的元素，那就是代码的注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码的检查和修改。给代码加注释，是一种很好的编程习惯。在HTML5文档中，注释分为三类：在文件开始标签<html></html>中的注释、在CSS层叠样式表中的注释和在JavaScirpt中的注释，JavaScirpt中的注释有两种形式。下面将对这三类注释的具体语法进行介绍

在文件开始标签<html></html>中的注释,具体语法如下:

注释文字的标记很简单，只需要在语法中“注释的文字”的位置上添加需要的内容即可。

在CSS层叠样式表中的注释,具体语法如下：

/\*注释的文字\*/

在CSS样式中注释时，只需要在语法中“注释的文字”的位置上添加需要的内容即可。

说明：在JavaScript脚本语言中的注释有两种形式：单行注释和多行注释。

单行注释的具体语法如下：

//注释的文字

注释文字的标记很简单，只需要在语法中“注释的文字”的位置上添加需要的内容即可。

注意：在JavaScript中添加单行注释时，只需要在语法中“注释的文字”的位置上添加需要的内容即可。

多行注释的具体语法如下：

/\*注释的文字\*/

在JavaScript脚本中进行多行注释时，只需要在语法中“注释的文字”的位置上添加需要的内容即可。

注意：在JavaScript中添加多行注释时或单行注释的形式不是一成不变的，在进行多行注释时，单行注释也是有效的。运用“//注释的文字”对每一行文字进行注释达到的效果和“/\*注释的文字\*/”的效果一样。

常见错误：在HTML代码中，注释语法使用错误时，浏览器将注释视为文本内容，注释内容会显示在页面中。有时还会造成页面结构错乱等情况。例如，在谷歌浏览器上运行一个HTML5文件，下面给出该网页的关键代码：

01  02 <!DOCTYPE html> 03 <html> 04 <head> 05  06 <meta charset="utf-8" /> 07  08 <title>吉林省明日科技有限公司</title> 09 <link href="css/style.css" rel="stylesheet" type="text/css" /> 10  11 <style type="text/css" > 12 /* 在CSS中注释*/ 13 /* 外层div.cen*/ 14 .cen{ 15 CLEAR: both; /*清除浮动*/ 16 MARGIN: 0px auto; 17 WIDTH: 947px; 18 TEXT-ALIGN: left; /*水平对齐方式*/ 19 border-left: solid 1px #D0D0D0; /*左边框样式：宽度为1px，实线灰色框*/ 20 border-right: solid 1px #D0D0D0; 21 padding: 0px 15px; 22 } 23 .err-animation { /*'.'表示类样式,err-animation为样式名*/ 24 color: red; 25 font-size: 24px; /*字体*/ 26 font-family: fantasy; /*字体风格*/ 27 animation-direction: alternate; /*动画的路径*/ 28 animation-fill-mode: both; 29 animation-duration: 4.75s; /*动画持续时间*/ 30 animation-iteration-count: infinite; /*循环次数*/ 31 animation-name: animations; /*动画名*/ 32 animation-play-state: running; /*动画的状态*/ 33 animation-timing-function: ease; /*运动的速度*/ 34 animation-delay: 0.15s /*动画延时时间*/ 35 } 36 </style> 37 </head> 38 <body> 39  40 <div class="cen"> 41  42 <h4 class="err-animation" style="color:red;font-family:fantasy;">注释错误 1：写在<span><</span><span>!DOCTYPE></span>标签之前</h4> 43 <h4 class="err-animation" style=" '内部样式中不可以注释！' color: blue;font-style: oblique;font-family:-webkit-pictograph;color: maroon;">注释错误 2：注释语法不对！</h4> 44 <p>/* 明日学院网址：www.mingrisoft.com*/</p> 45 46  47 <div> 48 <iframeframeborder="0" height="240"id="top" name="top"scrolling="No" src="inc/top.html"width="947"></iframe> 49  50 </div> 51 <h4 style="color:blue;font-size: 24px;font-family:fantasy" class="err-animation">注释错误 3：注释标签没写完整</h4> 52 <p><-- 明日学院网址，我来注释一下好了，哒哒哒。。。--></p> 53  54 <div><imgsrc="img/o_02.jpg" width="947" height="84"/></div> 55 </body> 56 </html> 57

用谷歌浏览器打开这个完整的HTML5文件，出现如图1.4所示的显示效果，图1.4中注释了3种注释用错的情况。分别用①②③标注出来了。

图1.4 HTML中注释的3种常见错误

![SouthEast][]

感谢读者朋友对明日科技的支持，如果您对图书中的讲解及光盘源码有任何问题，可以直接登录http://www.mingrisoft.com上的社区进行发贴，把您的问题详细的说明一下，我们的技术人员会在那里给您回复！

本文摘自明日科技出版的《零基础学HTML5》，转载请注明出处！！！

[SouthEast]: /images/20220601/a0bd9c1a69a348eeaa5109396471ae8f.png