<p>HTML注释使用<!-- -->语法，支持单行与多行，不可嵌套且禁用--和>组合；脚本与样式内应使用对应语言注释；可标注状态、待办事项；可通过开发者工具或W3C验证检查解析正确性。</p>
如果您在编写HTML代码时希望添加注释以说明某段代码的功能或用途，HTML提供了标准的注释语法来实现这一目的。以下是向HTML中添加注释的具体方法：
一、使用<!-- -->语法插入单行或块级注释
HTML注释必须包裹在<!-- 和 -->之间，浏览器会完全忽略其中的内容，既不渲染也不执行。该语法支持单行和多行注释，适用于任何位置（如标签之间、标签内部属性后、文档头部或主体内）。
1、在HTML文档的<head>区域上方添加注释，说明文档用途：
<!-- 本页面为用户登录入口，采用响应式布局 -->
2、在<div>标签前后插入功能说明：
<!-- 开始：用户信息展示区域 -->
<div class="user-info"></div>
<!-- 结束：用户信息展示区域 -->
立即学习“前端免费学习笔记（深入）”；
3、在标签内部添加行内注释（需注意不能嵌套）：
<p title="示例文本">这是段落<!-- 此处不可写-->内容</p>
二、避免在注释中嵌套注释或使用非法字符
HTML注释不支持嵌套，即在<!-- ... -->内部再次出现<!-- 或 -->会导致解析中断，部分后续内容可能被意外注释掉或引发解析错误。注释内容中禁止出现双短横线（--）和大于号（>）的组合，否则将提前终止注释。
1、错误写法示例（导致注释提前关闭）：
<!-- 外层注释 <!-- 内层注释 --> 继续外层 -->
2、错误写法示例（含非法字符序列）：
<!-- 配置项：启用--自动保存功能 -->
3、正确替代方式（用中文破折号或全角符号规避）：
<!-- 配置项：启用——自动保存功能 -->
三、在脚本或样式标签内使用对应语言的注释语法
当HTML中嵌入JavaScript或CSS代码时，应使用各自语言的原生注释格式，而非HTML注释，以确保语法高亮、调试工具识别及代码可维护性。
1、在<script>标签内使用JavaScript单行注释：
<script>
// 初始化表单验证逻辑
document.addEventListener('submit', validate);
</script>
2、在<script>标签内使用JavaScript多行注释：
<script>
/*
此函数检查邮箱格式是否符合RFC5322规范
返回布尔值
*/
function isValidEmail(str) { ... }
</script>
3、在<style>标签内使用CSS注释：
<style>
/* 全局字体设置 */
body { font-family: "Segoe UI", sans-serif; }
</style>
四、利用注释标记开发阶段状态与待办事项
开发者常借助HTML注释标注临时禁用的代码块、实验性功能或待修复问题，便于团队协作与版本追踪。此类注释应保持简洁明确，避免冗长模糊描述。
1、标记已弃用但暂未删除的旧结构：
<!-- [DEPRECATED] 旧导航栏，将在v2.1版本移除 -->
<nav class="old-menu">...</nav>
2、标注待实现功能占位符：
<!-- TODO: 添加无障碍ARIA标签 -->
<button id="search-btn">搜索</button>
3、标注条件分支说明（配合后端模板时）：
<!-- IF user.is_admin: 显示管理操作按钮 -->
<button class="admin-only">删除文章</button>
五、验证注释是否被正确解析的方法
可通过浏览器开发者工具的“元素”面板查看源码渲染结果，确认注释内容未出现在DOM树中；也可使用W3C Markup Validation Service提交HTML文件，检查是否存在因注释语法错误引发的警告。
1、在Chrome中右键页面空白处，选择“检查”，切换至Elements标签页，观察原始HTML中注释是否完整保留且未影响标签结构。
2、访问https://validator.w3.org/，点击“Validate by Direct Input”，粘贴含注释的HTML代码，提交后查看是否有“Comment contains --”类报错。
3、在注释中加入唯一标识字符串（如[CHECK-123]），然后在浏览器控制台执行document.body.innerHTML.includes('[CHECK-123]')，返回false表示注释已被正确剥离。
