原来如此。 你打开一个网页，看不到那一些用包住的文字，这正常吧？但很更多人看到源码时却惊奇：原来这一些东西存在！这就像你偷偷把一张纸放进书里却看不见它，只能从外面摸到。下面就给你讲讲为哪些、怎么看、怎么写，还有一些坑。

一、哪些是HTML注释？

HTML 注释是网页代码里的一种“隐藏文本”， 境界没到。 用来给自己或者别人留个说明。它的语法非常简洁：

注意：启动符号是 。如果写错了就有有可能把后面全部代码都变成了注释！ 你看啊... 别说我没提醒你~!@#。

较小技巧：更多行注释能够直接写更多行，不需要每行都加 。

举个例子：

这样整块区域都被包住任意人都看不到。

二、为哪些浏览器不体现它们？

图啥呢？ 当你打开一个网页时浏览器其实先做两件事：①解析，②渲染。解析阶段会识别出全部元素，包括comment节点。而渲染阶段只关注那一些需要展示给用户看的东西——比如, , ,

这就是为哪些你在页面上根本看不到那一些 的原因。

较小提醒：但它们确实存在于DOM树里！如果你用 JavaScript 查询 nodeType 为 8 的节点，就能拿到它们。不过较大更多数开发者只关心可视内容，所过去往忽略这一点。

三、怎么查看这一些隐藏文本？

• 查看源代码：`Ctrl+U` 或右键“查看页面源代码”。那里的文本都是原始文件，你能看到全部 。
• 开发者工具：`F12` 或右键“检查”。默认情况下开发者工具里 comment 节点以灰色出现，但依陈旧可见。只要展开对应元素，你就能看到里面的文本。
• Babel / Gulp / Webpack：`source-map` 能够让调试更简单， 但若开启压缩/混淆，更多余的 comment 会被删掉或变较短。所以生产周边环境里最良好不要太更多无意义的 comment。
• Cute note：有些老陈旧编辑器打开源文件时 会把 当作普通文字处理，看起来像一段乱码，但其实是符合法规语法哦！😜.

四、 常见错误和坑洞

不是我唱反调... 如果你想隐藏某段代码，只想让自己暂时看不到，可直接写成 comment。但别搞错了格式：

上面这段只有启动符号， 没有完成符号，一旦出现，它会把后面全部内容都变成 comment，包括接下来的

{…} 标签。这引起页面彻底崩溃，你连错误提示也看不到啦～!

另一个坑是嵌套评论——” 能够改为 “”。 : 全部团队成员都采用相同风格，举个例子统一采用较大写关键字 “NOTE”, “TODO”, “FIXME”。举个例子：“”。这样搜索更方便。 : 把相关功能放一起，用单独的一块 comment 包装。举个例子： : 切勿将敏感信息放入前端代码， 即使它们被包裹为 comment，也有可能被任意人通过源码查看得到，不夸张地说...！

但这属于特殊情况，较大更多数时候我们根本不用这么麻烦。

歇了吧... 如果你刚学前端， 对 HTML 并不熟悉，那就先学良好基本标签，再缓慢缓慢练习怎么用有效 Comment 给自己做笔记。当然 如果你真实想玩耍一下能够尝试一些创意用途，比如: 点我弹窗哦~~! 较小提示：如果你想让 Comment 真实正 *体现* 在页面上，就必须要把它放进某个可视元素内部，举个例子 `` 或 `` 标签。

别怕... 提议坚持官方规范 —— . 一句话：**Comment 用来帮自己读书** 而不是让用户看到。如果想让别人看到，请直接写普通标签，而不是包起来！😂. 六、 结论与思考——到底有没有必不可更少留下这么更多空白? 答案挺直白：**不要乱加太更多空白** —— 除非真实的需要给今后维护留痕迹，否则更多余空白只是浪费带较宽与时间段，还有可能引入错误。

到位。 : 在正式发布前跑一次脚本扫描， 将全部已完成任务的 TODO/FIXME 自动删除，以保持代码整洁。这一步省得以后找 bug 又要翻找已经恢复掉的残余 TODO. 较小彩蛋：有些开发者喜炎热爱用特殊字符包住评论， 举个例子 “/* */” 或 “# #”，但这一些并非标准，只能靠自己记忆，很简单出错。

无语了... 千万不要犯当前这个较低级错误！🙅‍♂️. : 如果项目规模较较大， 能够考虑用专门的文档生成工具，举个例子 JSDoc 或 Doxygen 来自动提取 comment 做成 API 文档，而不是手工维护 HTML 文件里的备注。 : 用 Git 时 把最崭新 commit 的 comment 提交到仓库，让团队共享；但是注意不要提交包含机密信息的文件或分支。

---