1.9 添加网页注释
本节介绍在HTML网页中添加注释的方法。HTML网页中被注释的内容是不会显示在浏览器中的，这样可以有效避免页面中想隐藏的内容被显示出来，这就是注释的功能所在。
在HTML网页中使用注释的优点有很多：比如为代码添加注释，既可以方便自己后期修改维护，又可以方便其他程序员阅读理解并完善你写的代码；又比如将暂时不需要执行的代码先注释掉，这样以后想重新恢复代码时就很简单。当然，最关键的一点是，一段优秀的代码配上合理必要的注释才算完美，这是一个优秀的程序员必备的良好习惯之一。
如果读者想在HTML网页中使用注释，就需要使用“<!-- -->”符号，并遵循下面的写法：
<!-- comment -->
提示
只有上面这种符号对HTML网页代码起注释作用，而像“//”和“/* */”符号也会出现在HTML网页中，但只会对JavaScript脚本代码和CSS样式代码起作用。
下面我们看一段使用注释的代码，这段代码（参见源代码chapter01/ch01-htmlcomp-comment.html文件）给出在HTML网页内使用注释的方法。
【示例1-32】在HTML网页中添加注释
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <!-- 添加文档头部内容 -->
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06 <!-- 添加CSS样式代码 -->
07 <style type="text/css">
08 div {
09 margin: 2px;
10 padding: 2px;
11 width: auto;
12 height: auto;
13 border: 1px solid #e0e0e0;
14 background: #f0f0f0;
15 }
16 .classNormal {
17 font-style: normal; /* 定义字体风格 */
18 }
19 .classBold {
20 font-weight: bold; /* 定义字体风格 */
21 }
22 .classItalic {
23 font-style: italic; /* 定义字体风格 */
24 }
25 .classLarge {
26 font-size: x-large; /* 定义字体风格 */
27 }
28 </style>
29 <script type="text/javascript">
30 function funcComment() {
31 alert("ok"); // TODO: 警告消息框
32 }
33 </script>
34 <title>HTML之使用注释</title>
35 </head>
36 <body>
37 <!-- 添加文档主体标题 -->
38 <h3>HTML之为标签添加title属性</h3>
39 <hr>
40 <!-- 添加文档div层 -->
41 <div>
42 <!-- 添加 classNormal 字体风格 -->
43 <p class="classNormal">class font bold</p>
44 <!-- 添加 classBold 字体风格 -->
45 <p class="classBold">class font bold</p>
46 <!-- 添加 classItalic 字体风格 -->
47 <p class="classItalic">class font italic</p>
48 <!-- 添加 classLarge 字体风格 -->
49 <p class="classLarge">class font italic</p>
50 <!-- 添加 classNormal 字体风格
51 <p class="classNormal">class font bold</p>
52 </div>
53 </body>
54 </html>
在这段HTML代码中，有多处使用到了注释。下面我们详细介绍。
第04行的注释说明下面的代码用于添加头部内容。
第06行的注释说明下面一段代码用于定义CSS样式。
第17行、第20行、第23行和第26行后面的CSS注释使用的是“/* */”符号。
第31行脚本代码后面的JavaScript注释使用的是“// TODO:”符号。
第42行、第44行、第46行和第48行的注释说明其后的代码添加了4种不同风格的CSS样式字体。
而第50～51行原本想完成与第42～43行同样的功能，但第50行注释代码中注释的结尾符号“-->”不小心没写完，结果将第51～54行全部注释了。
下面运行测试这个页面，效果如图1.39所示。从图中看到，由于第50行的错误，第51行的内容没有显示出来；同时，虽然第52～54行被注释掉了，但并没有影响HTML网页的正常输出。
图1.39 在HTML网页中添加注释的效果