<p>HTML注释唯一合法形式是<!-- -->，禁止嵌套、禁用--或>组合，不可出现在标签内部、属性值、DOCTYPE前及<script>/<style>内。</p>
HTML注释不能嵌套或出现在<script>内部</script>
HTML注释只有<!-- -->一种合法形式，任何嵌套（如<!-- <!-- inner --> -->）、在<script></script>标签内使用（如<script><!-- alert(1); --></script>），或在属性值中插入（如<div title="<!-- bad -->foo">），都会导致解析器提前终止注释，后续HTML可能被当作纯文本渲染，甚至引发白屏。<p>现代浏览器完全不需要在<code><script></script>里加HTML注释来兼容旧IE——那已是20年前的写法。JS代码该用//或/* */，CSS该用/* */，HTML注释对它们无效。
- 临时屏蔽整块HTML？用
<!-- ... -->包裹整个标签块，安全可靠 - 想注释掉某一行JS？别用
<!--，直接在JS里写// - 构建时要删注释？Vite需配置
htmlMinifyOptions.removeComments: true，Webpack需在html-webpack-plugin的minify选项里设removeComments: true
区块划分必须用语义化标签而非堆砌用<div class="header">代替<header>，或给每个区域硬套<section>却不配标题，等于放弃HTML5的语义能力。屏幕阅读器、搜索引擎和自动化工具都依赖这些标签建立内容结构。
<section>生效的前提是它内部有<h2>–<h6>标题；没有标题的<section>，DOM里存在，但语义上等于空转。而<main>在整个页面中只能出现一次，<aside>必须与<article>或<main>存在逻辑关联，不是随便放个“相关推荐”就叫<aside>。
立即学习“前端免费学习笔记（深入）”；
- 导航菜单 → 用
<nav>，不混入搜索框或登录按钮 - 独立成篇的内容（如博客正文、新闻条目）→ 用
<article> - 页脚版权、备案号 → 用
<footer>，别塞“返回顶部”按钮 - 纯布局容器（如下拉菜单、图标列表）→ 仍可用
<div>，加BEM类名更清晰
模块注释只是视觉标记，不是结构替代品
写<!-- - hero-banner -->和<!-- /hero-banner -->确实能帮人快速定位，但它本身不创建任何作用域、不隔离样式、不约束JS作用域——它只是地图上的图例，不是路。
见过太多项目注释写得工整漂亮，结果所有逻辑耦合在全局initHeroBanner()函数里，样式靠.hero-banner img层层穿透，改一个图标要翻三页CSS。这时候注释再规范，也只是掩盖结构腐化的止痛药。
- 模块边界应由标签嵌套体现：
<section class="hero-banner">...</section>比<!-- - hero-banner --> + <div>更真实<li>注释里别写业务逻辑说明（如“此处调用API”），这类信息属于JS文件或文档，HTML只管结构归属</li>
<li>团队统一格式即可，不必追求<code><!-- =============== HEADER =============== -->这种难搜索、难维护的写法
交接时最容易被忽略的DOM细节
交接文档里常写“结构清晰”，但没人提<!-- -->是真实存在的Comment节点（nodeType === 8），大量无意义注释会让document.querySelectorAll('*')遍历变慢，也会让childNodes列表变长——尤其当用JS动态操作父容器子节点时，for (let node of parent.childNodes)很可能意外拿到注释节点，导致逻辑错乱。
另外，前面绝不能有任何字符（包括空格、BOM、注释），否则某些旧环境会触发怪异模式；<code>开头也不宜紧贴注释，最好留空行隔开。
- 检查注释是否误入
<meta>或<link>标签之间，那里虽不报错但易干扰构建工具识别
- 用
document.body.innerHTML调试时，看到的字符串包含注释；但用document.body.children取到的只有元素节点，两者行为不一致
- 上线前务必确认构建流程已剔除注释，否则可能泄露开发路径、临时开关或未完成描述
用<div class="header">代替<header>，或给每个区域硬套<section>却不配标题，等于放弃HTML5的语义能力。屏幕阅读器、搜索引擎和自动化工具都依赖这些标签建立内容结构。
<section>生效的前提是它内部有<h2>–<h6>标题；没有标题的<section>，DOM里存在，但语义上等于空转。而<main>在整个页面中只能出现一次，<aside>必须与<article>或<main>存在逻辑关联，不是随便放个“相关推荐”就叫<aside>。
立即学习“前端免费学习笔记（深入）”；
- 导航菜单 → 用
<nav>，不混入搜索框或登录按钮 - 独立成篇的内容（如博客正文、新闻条目）→ 用
<article> - 页脚版权、备案号 → 用
<footer>，别塞“返回顶部”按钮 - 纯布局容器（如下拉菜单、图标列表）→ 仍可用
<div>，加BEM类名更清晰
模块注释只是视觉标记，不是结构替代品
写<!-- - hero-banner -->和<!-- /hero-banner -->确实能帮人快速定位，但它本身不创建任何作用域、不隔离样式、不约束JS作用域——它只是地图上的图例，不是路。
见过太多项目注释写得工整漂亮，结果所有逻辑耦合在全局initHeroBanner()函数里，样式靠.hero-banner img层层穿透，改一个图标要翻三页CSS。这时候注释再规范，也只是掩盖结构腐化的止痛药。
- 模块边界应由标签嵌套体现：
<section class="hero-banner">...</section>比<!-- - hero-banner -->+<div>更真实<li>注释里别写业务逻辑说明（如“此处调用API”），这类信息属于JS文件或文档，HTML只管结构归属</li> <li>团队统一格式即可，不必追求<code><!-- =============== HEADER =============== -->这种难搜索、难维护的写法 - 检查注释是否误入
<meta>或<link>标签之间，那里虽不报错但易干扰构建工具识别 - 用
document.body.innerHTML调试时，看到的字符串包含注释；但用document.body.children取到的只有元素节点，两者行为不一致 - 上线前务必确认构建流程已剔除注释，否则可能泄露开发路径、临时开关或未完成描述
交接时最容易被忽略的DOM细节
交接文档里常写“结构清晰”，但没人提<!-- -->是真实存在的Comment节点（nodeType === 8），大量无意义注释会让document.querySelectorAll('*')遍历变慢，也会让childNodes列表变长——尤其当用JS动态操作父容器子节点时，for (let node of parent.childNodes)很可能意外拿到注释节点，导致逻辑错乱。
另外，前面绝不能有任何字符（包括空格、BOM、注释），否则某些旧环境会触发怪异模式；<code>开头也不宜紧贴注释，最好留空行隔开。
