HTML 中的注释

学习目标

掌握 HTML 注释的基本语法和使用方法
理解单行注释、内联注释与多行注释的区别与应用场景
了解 HTML 注释在代码组织、协作开发和调试中的实际用途
学会通过快捷键快速添加注释以提高开发效率

什么是 HTML 注释

HTML 注释是写在 HTML 源代码中的说明性文字，不会被浏览器渲染显示，仅用于开发者阅读和理解代码。

其基本语法如下：

<!-- 这是一条注释 -->

注释内容位于  之间，可以包含任何文本，如说明、提醒、待办事项或临时禁用的代码。

<!-- 这是一条不会显示在网页上的注释 -->
<p>这段文字会正常显示。</p>

浏览器会完全忽略注释内容，因此它对页面外观和性能无任何影响。

注释的常见用法

单行注释与内联注释

单行注释用于为某一行或某一部分代码添加简短说明。内联注释则直接嵌入在标签内部（但仍在标签外），不影响 HTML 结构。

<html>
<body>
    <!-- 这是主标题 -->
    <h1>TechBlog</h1>

    <!-- 这是一个内联注释示例 -->
    <h2>这是 <!-- 曾用于强调 --> 内联注释的演示</h2>
</body>
</html>

注意：虽然 <h2> 标签内的  是合法的 HTML 注释，但它不会打断文本流，因此页面上仍会显示“这是内联注释的演示”（中间空格由浏览器处理）。

多行注释与隐藏代码段

当需要写较长的说明，或临时禁用一段 HTML 代码时，可使用多行注释。

<html>
<body>
    <!-- 
        这是一个多行注释。
        可用于详细描述下方组件的功能。
    -->
    <h1>TechBlog</h1>

    <!-- 
        多行注释也可以用来
        临时注释掉整个元素
    -->
    <!-- 
    <button style="font-family: Sans-serif;">
        点击我
    </button>
    -->
</body>
</html>

被注释掉的 <button> 元素不会出现在页面上，也不会参与 DOM 渲染，是调试和开发中非常实用的技巧。

注释的应用场景

应用场景	说明
代码组织	在大型项目中，用注释划分不同模块（如“导航栏”、“页脚”、“用户表单”），便于快速定位
团队协作	向其他开发者解释某段代码的设计意图或特殊处理逻辑
调试辅助	快速注释掉可疑代码块，验证是否为问题根源，无需删除原始代码
内部文档	在代码中嵌入使用说明、API 接口备注或版本信息，减少对外部文档的依赖

开发效率小贴士

大多数现代代码编辑器支持快捷键快速添加 / 取消注释：

Windows / Linux：Ctrl + /
macOS：Command + /

选中一行或多行 HTML 代码后按下快捷键，即可自动包裹 。

重点总结

HTML 注释语法：
注释不会在网页中显示，仅用于开发者参考
支持单行、多行及内联注释，灵活适应不同需求
常用于代码说明、团队协作、调试和文档化
使用快捷键 Ctrl+/ 或 Cmd+/ 可大幅提升注释效率

思考题

如果在 <p> 标签内部写入 ，比如 <p>你好  世界</p>，页面上会显示什么？为什么？
为什么在生产环境中仍保留大量 HTML 注释可能带来安全或性能隐患？应如何权衡？
能否用 HTML 注释来“隐藏”敏感信息（如 API 密钥）？这样做是否安全？为什么？