写网页代码时，很多人只顾着把功能实现，却忽略了代码的可读性。时间一长，自己回过头看都得花好几分钟才能理清逻辑。其实，加几句合适的 HTML 注释，就能省去很多麻烦。
为什么需要写注释
你有没有遇到过这种情况：同事交接项目，打开一个 HTML 文件，满屏的 div 堆叠在一起，根本分不清哪段是头部导航，哪段是商品列表？这时候，几行简单的注释就能救命。
注释不是写给机器看的，是写给人看的。无论是未来的自己，还是团队里的其他人，都能通过注释快速理解结构意图。
HTML 注释的基本写法
HTML 的注释语法很简单，用 <!-- 和 --> 包裹内容即可。注意前后各留一个空格，这是常见的书写习惯，看起来更清晰。
<!-- 头部导航开始 -->
<header>
<nav>...</nav>
</header>
<!-- 头部导航结束 -->模块化注释更高效
在做网页布局时，把页面分成几个大块，比如页头、侧边栏、正文区、页脚，每一块都加上起始和结束标记。
<!-- 侧边栏区域 -->
<aside class="sidebar">
<div class="user-panel">...</div>
<nav>...</nav>
</aside>
<!-- 侧边栏结束 -->这样在滚动几千行代码的时候，一眼就能定位到目标区域。
临时调试也能靠注释
有时候要测试某个按钮是否影响整体布局，直接删了怕出问题，可以用注释先“屏蔽”掉。
<!--
<button onclick="submitForm()">提交申请</button>
-->等确认没问题再删掉注释，比反复撤销操作靠谱多了。
避免这些注释坏习惯
别写废话。比如 <!-- div 开始 --> 这种，完全没必要。div 太常见了，光看标签就知道。
也别堆太多注释。满屏都是 ，反而干扰阅读。重点标注结构复杂或逻辑特殊的部分就行。
还有就是记得及时清理。测试用的临时注释，上线前最好删掉，不然别人看到一堆“待优化”“临时方案”会很困惑。
团队协作中的注释约定
如果几个人一起开发页面，可以定个小规则。比如统一用【】包裹模块名，看起来更整齐：
<!-- 【用户信息模块】 -->
<section class="user-profile">
...
</section>
<!-- 【用户信息模块】结束 -->这种小细节，能让团队代码风格更一致，减少沟通成本。
写注释就像贴便利贴，花几秒钟，省下的是几分钟甚至几小时。养成习惯后，你会发现，不写注释反而觉得心里没底。