简洁高效的HTML靠选对标签、分清职责、拒绝内联、提前约束结构；滥用div导致语义缺失、解析异常、维护成本飙升，而语义化标签如nav、footer和规范的class/id使用、禁用内联样式脚本、借助Prettier/ESLint等工具校验，才能真正保障可维护性与可访问性。
直接说结论：简洁高效的HTML不是靠删代码，而是靠选对标签、分清职责、拒绝内联、提前约束结构——写错一步，后期维护成本翻倍。
为什么 <div> 一多就难维护
<p>用 <code><div> 套 <code><div> 看似自由，实际等于放弃语义。浏览器、搜索引擎、屏幕阅读器都读不懂你的真实意图，CSS 选择器也容易失控。
<ul><li>把导航栏写成 <code><div class="nav">，不如直接用 <code><nav></nav> —— 后者自带语义、无需额外注释、CSS 里可直接写 nav { }
<footer></footer> 而非 <div id="footer">，能避免和 <code><div class="footer"> 混淆，也防止团队新人误加第二个 <code><footer></footer>
<p></p> 内不能嵌 <div> 或 <code><h2></h2>，否则 HTML 解析器会自动闭合 <p></p>，造成 DOM 结构意外断裂
class 和 id 的使用边界在哪
多数人滥用 id，以为它“更唯一”就该优先用；其实 id 是强绑定，一旦在 JS 中用 document.getElementById() 获取，后续改名或复用就立刻报错。
- 仅当需要锚点跳转（如
<a href="#section2"></a>）或极少数必须单例的 JS 控制目标时，才用id -
class才是通用容器：同一页面可多次出现class="card"，CSS 和 JS（querySelectorAll(".card")）都天然支持 - 避免
class="red-text big-title margin-left-20"这类“样式即类名”，应改为语义化命名如class="error-message heading-lg sidebar-item"
内联样式和脚本为什么必须禁用
写 <p style="color: #333; font-size: 16px;"></p> 看似快，实则埋下三颗雷：无法批量调整、无法被浏览器缓存、破坏 HTML/CSS/JS 分层职责。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件单独加载后可被缓存，而内联样式每次 HTML 请求都得重传
- 想统一改所有标题颜色？搜
style=全局替换风险极高；改一个 CSS 类却一劳永逸 - JS 同理：
<button onclick="doSomething()"></button>把逻辑耦合进结构，后续加埋点、做 A/B 测试、换框架都会卡住
如何用工具守住简洁底线
靠人盯代码永远漏，得让编辑器和构建流程自动拦截。
- VS Code 安装
Prettier+ESLint（配eslint-plugin-html），保存时自动删空格、强制双引号、报错<b></b>/<font></font>等过时标签 - 在构建流程中加入
html-validate，配置规则禁止img缺alt、禁止p嵌块级元素、禁止未闭合标签 - Emmet 输入
ul>li*3生成列表没问题，但别用div*5生成五个无意义容器——工具不判断语义，判断权始终在你手上
最易被忽略的一点：简洁不是越少越好，而是“刚好表达意图”。删掉一个 <main></main> 标签可能省了 6 个字符，但会让可访问性检测失败、SEO 权重下降、新成员看不懂主内容区在哪——这种“简洁”，本质是偷懒。
