<p>可使用HTML注解语法<!-- 注释内容 -->添加不显示的说明文字，该语法需置于标签外部且不可嵌入标签内或script/style中，还可结合语义化class名与编辑器折叠功能提升可维护性。</p>
如果您在编写HTML代码时需要添加说明文字，但又不希望这些文字在网页中显示，则可以使用HTML注解语法。以下是实现此目的的具体方法：
一、使用标准HTML注解语法
HTML注解使用<!-- 和 -->包裹，浏览器会完全忽略其中的内容，既不渲染也不执行。该语法适用于单行或多行说明，是HTML规范定义的唯一合法注解方式。
1、在需要添加说明的位置，输入<!-- 开始符号。
2、在<!-- 后输入说明文字，例如此处为导航栏结构开始。
立即学习“前端免费学习笔记（深入）”；
3、以-->结束注解，确保符号之间无空格且闭合完整。
4、可跨多行书写，只要起始与结束标记配对即可，例如在<header>标签前后分别添加描述性注解。
二、在标签内部嵌入注解的注意事项
HTML注解不能出现在标签开始符内部或属性值中，否则会导致解析错误或注解失效。必须置于标签外部、元素内容区之外，或作为独立行存在。
1、正确位置示例：在<div>标签上方单独一行写<!-- 主要内容区域 -->。
2、错误写法示例：<div <!-- 这里不能放注解 -->class="container">会导致HTML解析中断。
3、避免在<script>或<style>标签内部使用HTML注解，应改用对应语言自身的注解格式。
三、结合CSS类名添加语义化注解
虽然HTML注解本身不可见，但可通过命名具有说明性的class或id属性，间接实现代码自解释效果。此类方式不依赖注解语法，但需配合良好命名习惯。
1、为<section>元素设置class="section--user-profile"，其中"--user-profile"表明该区块用途。
2、在class名称中使用双短横线分隔语义，如section--contact-form明确标识功能模块。
3、避免使用模糊名称如"box1"或"div2"，确保每个class名本身即含说明意义。
四、使用编辑器内置注解折叠功能辅助管理
现代代码编辑器（如VS Code、Sublime Text）支持将HTML注解识别为可折叠区块，便于在长文档中快速定位和隐藏说明段落。
1、编写注解时保持格式统一，例如每段注解前加空行，提高识别率。
2、在注解开头使用关键词如NOTE:或TODO:，便于编辑器高亮或插件检索。
3、折叠后仅显示注解首行，例如<!-- NOTE: 页脚版权信息区域 -->，其余内容被隐藏。
