html代码质量重整的核心是用语义化标签、data-module锚点和结构扁平化三要素替代div嵌套，消除契约缺失导致的可维护性黑洞。
直接说结论：HTML 代码质量重整不是“重写页面”，而是用语义化标签、data-module锚点、结构扁平化三把刀，切掉冗余嵌套、类名猜谜和 JS 绑定脆弱性——改完后，新人三天内能看懂模块边界，CSS 不再靠猜，JS 查询不再怕删错。
为什么 div 套 div 是可维护性黑洞
不是它不能用，是它不带任何契约信息。浏览器、屏幕阅读器、搜索引擎、新同事、甚至你三个月后的自己，都得靠 class 名反推意图。而 class 名又极易冲突、过时、重复（比如 header-v2-fix 和 header-new-2024 并存）。
- JS 查询不稳定：
document.querySelector('.container .wrap .box')一旦某层 class 被误删或改名，就返回null - CSS 层叠失控：深层嵌套导致选择器权重爆炸，
.page .main .content .item .title最终靠!important收场 - 无障碍检测失败：axe 或 Lighthouse 会直接报
landmark is missing，因为没<main></main>、没<nav></nav> - 重构成本指数上升：每多一层
div，审查元素定位目标节点就多点一次，DOM 树深度超 5 层，渲染性能也悄悄下滑
header、nav、main、section 到底怎么选
选错比不用还糟——语义标签不是装饰，是向机器声明“这里是什么”。W3C 对每个标签有明确使用场景定义，乱用会误导辅助技术、降权 SEO。
-
<header></header>：仅用于页面或<article></article>/<section></section>的页眉，**不能**当“顶部大盒子”滥用 -
<nav></nav>：只包裹**主导航链接**，面包屑、页脚链接、侧边栏工具链不算 -
<main></main>：每页**必须且只能有一个**，代表主体内容区；重复或缺失会被 axe 直接标红 -
<section></section>：有独立主题、可被单独引用的内容块（如“用户评价”“商品参数”），需配<h2></h2>或更高阶标题 -
<article></article>：可独立分发、复用的内容单元（如博客正文、新闻卡片），<section></section>里嵌<article></article>是常见合理嵌套
用 data-module 替代 class 做 JS 锚点
class 是样式契约，data- 才是行为契约。靠 class="js-header-toggle" 绑定事件，等于把样式逻辑和交互逻辑耦合死——哪天设计师说“这个 header 要加个动效”，你得同时改 CSS 和 JS。
- 统一加
data-module="header"、data-module="product-list"到模块根元素 - JS 查找写成：
document.querySelectorAll('[data-module="header"]')，完全不依赖 class 名 - 支持版本管理：
data-module="header" data-version="2.1"，CI 可自动校验 HTML 片段是否匹配文档要求 - 绝对不用
id做模块标识：循环渲染组件（如商品卡片）必然导致 id 重复，document.getElementById()只返回第一个
结构扁平化：三层嵌套就是警戒线
Chrome DevTools 里右键任意节点 → “Break on” → “Attribute modifications”，能立刻暴露哪些 div 纯粹为撑样式存在——它们往往没 class、没 id、没 data- 属性，只是 CSS 需要一个父容器。
- 合并相邻语义一致的容器：两个连续
<section></section>若主题相同（如“服务介绍”下分“响应快”“价格优”两小节），合并为一个<section></section>，用<h3></h3>分隔子区块 - 用
DocumentFragment批量插入动态内容，避免逐个appendChild拖慢渲染 - 删掉所有无意义的 wrapper：
<div class="clearfix"></div>、<div class="spacer"></div>这类纯样式占位符，改用 CSS 的::before/::after或margin - 检查 DOM 深度：超过三层嵌套（
html > body > div > div > div）就该拆解或换语义标签，别硬扛
真正难的不是换标签，而是让团队接受“HTML 不只是画布，它是接口契约”。一旦开始用 data-module 写 JS、用 <main></main> 定义主体、用 <section></section> 划分语义区块，后续加功能、换框架、做自动化测试，都会变得有依据可循——而不是靠翻 Git 历史猜某段 div 到底干啥用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
