html注释在浏览器中不显示，但源码中会原样保留；若需持久化，应避免使用“另存为”、富文本编辑器或构建工具默认压缩（如webpack/vite的removecomments:true），而应直接复制源码至纯文本编辑器保存，或显式配置压缩工具保留注释。
HTML 注释在浏览器里看不见，但源码里必须保留
HTML 注释（<!-- ... -->）不会被浏览器渲染，但它是源码的一部分，保存时只要不经过破坏性处理，就会原样保留。关键在于：**别用“另存为网页”或富文本编辑器打开再保存——它们会过滤或重写注释**。
常见错误现象：Ctrl+S 后注释消失、document.body.innerHTML 里看不到注释、用 Word 或 WPS 打开再保存导致注释被清空。
- 直接用浏览器「查看页面源代码」→ 右键「全部复制」→ 粘贴到纯文本编辑器（如 VS Code、Notepad++、Sublime Text）→
Ctrl+S保存为.html文件 - 不要用浏览器「另存为」→ 选「网页，仅 HTML」——这个操作会触发浏览器内部的序列化逻辑，
<!-- -->很可能被丢弃 - 避免用 Word / Excel / WPS 打开 HTML 文件再保存，它们会把 HTML 当作富文本文档解析，注释必然丢失
用 JavaScript 动态插入的注释不会自动保存
如果通过 document.createComment() 或 el.appendChild(document.createComment('xxx')) 在运行时加注释，这些注释只存在于当前 DOM 树中，**不会写回原始 HTML 字符串**。刷新页面就没了。
使用场景：调试时临时标记节点、自动化脚本注入说明性注释。
- 要持久化，得手动拼接字符串：
originalHTML + '<!-- debug: start -->' + el.outerHTML + '<!-- debug: end -->' -
innerHTML和outerHTML属性**永远不包含注释节点**，这是规范行为，不是 bug - 想导出带运行时注释的完整源码，只能用
new XMLSerializer().serializeToString(document)（注意：部分注释仍可能被省略，取决于浏览器实现）
服务器端生成或构建工具可能剥离注释
Webpack、Vite、Next.js 默认的生产构建会启用 HTML 压缩（如 html-minifier-terser），而它的默认配置是删除所有注释——包括 <!-- dev-only --> 这种你特意留下的。
参数差异：removeComments: true（默认） vs removeComments: false；有些工具还提供 removeCommentsFromCDATA: false 或 ignoreCustomFragments 控制白名单。
- Vite 用户需在
vite.config.ts的build.minify配置里显式关掉注释移除，或换用'terser'并自定义terserOptions - Webpack 的
html-webpack-plugin需检查minify选项，传入{ removeComments: false } - 本地开发时用
file://协议打开的 HTML 不走构建流程，注释天然安全；但一旦部署或 build，就得确认压缩配置
复制粘贴时编码和换行符也可能悄悄破坏注释结构
看似只是“复制源码”，但如果源码含中文注释、BOM 头、CRLF/LF 混用，某些编辑器保存时会转码或规范化换行，导致注释跨行错位甚至被截断（比如 <!-- 在一行末尾，--> 在下一行开头，中间被删了空行就语法错误）。
性能影响几乎为零，但兼容性上：老版本 IE 对跨行注释更敏感；现代浏览器宽容，但校验工具（如 W3C Validator）仍会报 warning。
- 保存前用编辑器显示不可见字符（如 VS Code 的
editor.renderWhitespace: 'all'），确认<!--和-->在同一逻辑块内 - 统一换行符：项目级设为
LF（Unix 风格），避免 Windows 编辑器插入CRLF导致注释跨行异常 - 含中文的注释务必保存为
UTF-8 无 BOM，否则某些 PHP 环境或旧版 Nginx 可能因 BOM 导致输出前置空白，破坏注释位置
真正麻烦的不是怎么保存，而是搞不清哪一环偷偷动了注释——浏览器另存、编辑器自动格式化、构建压缩、甚至 Git 提交时的 core.autocrlf 都可能成为黑手。盯住输入源和最终文件的十六进制对比，比猜更容易定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
