HTML结构重构不是重写，而是用语义标签“校准”内容意图并以良构性为底线；需依三类信号判断是否该动：仅靠class支撑语义、div占比超60%且无业务逻辑、Tab焦点顺序跳脱；替换时须严守独立性与嵌套规则，验证须通过Lighthouse无障碍审计、纯HTML可读性及DOM变更聚焦性测试。
突发重构不是推倒重来，而是让 HTML 在每次迭代中自然变好——只要每次改一小块、验证一次、不破坏现有行为，就能在 sprint 里把 div 堆叠变成语义清晰、可测试、可访问的结构。
为什么不能等“大重构”再动手
等一个完整周期做 HTML 重构，往往意味着：需求压过来时没人敢动老结构，JS 绑定全靠 class="box-2__inner--v3" 这种 selector，改一个 class 就崩两个页面；无障碍检测工具报出 47 个 div 缺乏语义的问题，但没人知道哪个 div 被 JS 依赖、哪个只是临时占位；最终只能靠“复制粘贴新模板”硬切，结果新旧混用、样式冲突、回归测试漏项。
敏捷节奏下，HTML 质量必须随功能交付同步演进。关键不是“要不要重构”，而是“怎么在改按钮文案的同时，顺便把那个 div 换成 button”。
- 每次 PR 只改一个语义单元（比如把某处
div class="card-header"替换为header） - 改完立刻验证：视觉无变化 + 屏幕阅读器读出“header” + JS 事件监听仍生效（检查是否用
querySelector('.card-header')，建议逐步迁移到querySelector('header')或加data-role） - 禁止“重构专用分支”，所有 HTML 改动必须和业务逻辑变更在同一 commit 中，由同一人负责端到端验证
如何在 PhpStorm 里让 HTML 自动对齐又不翻车
PhpStorm 的 Ctrl+Alt+L 对 HTML 失效，90% 是因为文件类型识别错了或格式化开关关着——这不是配置问题，是 IDE 默认把没后缀或混合 PHP 的文件当纯文本处理。
立即学习“前端免费学习笔记（深入）”；
- 右下角状态栏显示
Plain Text？点它 → 选HTML；若显示PHP，说明文件实际是.php后缀，需去Settings > Editor > Code Style > PHP > Other开启Enable formatting inside HTML files -
Settings > Editor > Code Style > HTML > Other中，清空Do not break if inline content列表里的title、meta、link，否则永远被压成一行 - 混合 Blade/Vue 模板时，必须额外开启
Enable formatting for Vue.js templates或对应框架选项，否则<template></template>块内缩进全乱 - 如果用了自定义标签（如
<app-header></app-header>），PhpStorm 2022.3 以前版本会跳过整段格式化——升级 IDE 或手动加data-keep-format临时绕过
语义化不是替换标签，而是校验行为链
把 div class="nav" 换成 nav 很容易，但真正难的是确认这一步没断掉任何东西：JS 是否还通过 class 找节点？CSS 是否依赖该 class 名做样式隔离？屏幕阅读器是否因此多读出“navigation”而干扰用户？
- 先查 JS：全局搜索
querySelector(".nav")、getElementsByClassName("nav")，替换成更健壮的选择器（如加data-nav属性） - 再查 CSS：用浏览器 DevTools 的
Computed面板看该区域样式来源，确认nav不会意外继承全局nav { display: block }导致布局错位 - 最后测可访问性：用 VoiceOver/NVDA 朗读，对比改前后是否多读/少读关键信息；用 axe 浏览器插件跑一次，确认
nav确实被识别为 landmark - 注意：不是所有
div都该换——如果它纯粹用于 CSS Grid 布局容器且无内容语义，保留div反而更准确
自动化兜底比人工检查更可靠
靠人记住每次改 HTML 都要补 alt、不滥用 role="button"、不漏 lang 属性，注定失败。必须把约束嵌进 CI 流程。
- 在
package.json里加 lint script："lint:html": "html-validate --config .htmlvalidate.json src/**/*.html"，用html-validate检查语义缺失、属性拼写、可访问性违规 - CI 中强制执行：Git hook 或 GitHub Action 里跑
npm run lint:html，失败直接阻断 PR 合并 - 配置示例（
.htmlvalidate.json）：启用require-lang-attribute、require-alt-attribute、no-redundant-role，但禁用no-inline-style（允许组件内联样式）避免误伤 - 关键点：规则必须可配置、可忽略单行（用
<!-- html-validate-disable-next-line -->），否则前端会因“改个 class 就被 lint 卡住”而弃用整个机制
最常被忽略的不是技术细节，而是责任归属——HTML 语义质量不是“前端工程师的额外工作”，而是每个提交者对自己代码可维护性的基本承诺。谁改了 DOM，谁就要确保它既跑得通，也读得懂。
