编辑“︁HTML注释”︁（章节）

= HTML注释 =

HTML注释是一种在HTML代码中添加说明或注解的方法，这些注释不会在浏览器中显示，仅供开发者阅读。注释对于代码维护、团队协作和调试非常有用。

== 语法 ==
HTML注释使用以下语法：
<syntaxhighlight lang="html">
<!-- 这是一个HTML注释 -->
</syntaxhighlight>

注释以`<!--`开始，以`-->`结束，中间的内容会被浏览器忽略。

=== 多行注释 ===
HTML注释可以跨越多行：
<syntaxhighlight lang="html">
<!-- 
  这是一个多行HTML注释
  第二行注释内容
  第三行注释内容
-->
</syntaxhighlight>

== 用途 ==
HTML注释有以下几个主要用途：

1. '''代码说明'''：解释复杂代码段的功能
2. '''调试辅助'''：临时禁用代码而不删除
3. '''团队协作'''：为其他开发者提供说明
4. '''模板标记'''：在模板系统中标记特殊部分

== 示例 ==
=== 基本示例 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>注释示例</title>
</head>
<body>
    <!-- 这是页面主要内容开始 -->
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <!-- 这是页面主要内容结束 -->
</body>
</html>
</syntaxhighlight>

=== 调试示例 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <title>调试示例</title>
</head>
<body>
    <h1>产品列表</h1>
    <ul>
        <li>产品A</li>
        <!-- <li>产品B（暂时下架）</li> -->
        <li>产品C</li>
    </ul>
</body>
</html>
</syntaxhighlight>

== 注意事项 ==
* 注释不能嵌套，以下写法是错误的：
<syntaxhighlight lang="html">
<!-- 外层注释 <!-- 内层注释 --> 外层注释 -->
</syntaxhighlight>

* 在某些情况下，注释内容可能会被显示：
  * 如果忘记关闭注释标记
  * 在旧版IE中，某些特殊条件下

* 注释中的内容仍然会被下载，只是不被渲染

== 高级用法 ==
=== 条件注释（已废弃） ===
过去IE浏览器支持条件注释，但现代浏览器已不再支持：
<syntaxhighlight lang="html">
<!--[if IE]>
    <p>您正在使用Internet Explorer</p>
<![endif]-->
</syntaxhighlight>

=== 模板标记 ===
在一些模板系统中，注释用于特殊标记：
<syntaxhighlight lang="html">
<!-- TEMPLATE: header -->
<header>
    <h1>网站标题</h1>
</header>
<!-- /TEMPLATE: header -->
</syntaxhighlight>

== 性能考虑 ==
虽然HTML注释不会影响页面渲染，但需要注意：
* 过多的注释会增加HTML文件大小
* 生产环境中可以考虑移除注释以减少文件大小
* 敏感信息不应放在注释中，因为它们可以通过查看源代码看到

== 最佳实践 ==
1. 使用有意义的注释，避免无意义的标记
2. 保持注释简洁但信息丰富
3. 及时删除不再需要的调试注释
4. 对于长期有效的注释，保持更新
5. 团队中建立统一的注释风格

== 与其他技术的比较 ==
{| class="wikitable"
|-
! 技术 !! 语法 !! 可见性 !! 用途
|-
| HTML注释 || <code><!-- 注释 --></code> || 源代码可见 || HTML文档说明
|-
| CSS注释 || <code>/* 注释 */</code> || 源代码可见 || 样式说明
|-
| JavaScript注释 || <code>// 单行 或 /* 多行 */</code> || 源代码可见 || 脚本说明
|}

== 实际应用案例 ==
=== 开发协作 ===
在大型项目中，注释可以帮助团队成员理解代码结构：
<syntaxhighlight lang="html">
<!-- 
  导航栏组件
  作者：张三
  最后更新：2023-10-15
  依赖：main.css, nav.js
-->
<nav class="main-nav">
    <!-- 导航项使用ul/li结构 -->
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
    </ul>
</nav>
</syntaxhighlight>

=== 版本标记 ===
注释可用于标记代码版本或变更：
<syntaxhighlight lang="html">
<!-- v1.2.3 - 2023-10-15
     变更：
     - 添加新的产品分类
     - 修复导航栏错位问题
-->
<div class="product-categories">
    <!-- 新增分类 -->
    <div class="category new">新品</div>
</div>
</syntaxhighlight>

== 总结 ==
HTML注释是开发中的重要工具，合理使用可以提高代码可维护性和团队协作效率。虽然简单，但正确使用注释是专业开发者的重要技能。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML基础]]