应在 feature 分支通过本地 pre-commit 钩子（如 husky）集成 htmlhint，配合 .htmlhintrc 强制校验语义规则（h1 唯一、img 必含 alt、禁用 onclick），并扩展至 .vue/.jsx 模板；ci 中启用 html-validate 硬性规则（doctype-html5、no-inline-style、require-lang-attribute），结合结构断言与 pr 自动报告，辅以分支保护策略和人工语义抽检。
如何在 feature 分支里提前拦截语义化错误
语义化退化往往发生在功能开发阶段，而不是合并时。靠人工 review 很难发现 div 套 div 代替 nav 或漏写 alt 这类问题，必须在本地提交前就卡住。
- 在项目根目录配
.htmlhintrc，强制要求h1唯一、img必须含alt、禁止onclick等内联事件 - 把
htmlhint加进pre-commit钩子（用husky或simple-git-hooks），提交失败直接阻断 - VS Code 安装
HTMLHint插件并启用 workspace 设置，编辑时实时标红错误 - 注意：不要只校验
.html文件，也要覆盖.vue和.jsx中的模板片段，否则单文件组件容易绕过
PR 自动检查 HTML 结构完整性的关键点
CI 流程里跑一次 html-validate 比人工看更可靠，但默认配置太宽松，容易漏掉结构缺陷。
- 必须开启
doctype-html5、no-inline-style、require-lang-attribute这几条硬性规则 - 对
body内容做最小结构断言：用正则或自定义脚本检查是否至少含一个main或article，避免纯div布局 - 禁用
ignore列表——尤其不能忽略accessibility类规则，否则label缺失、tabindex滥用等会被放过 - 输出报告要聚合到 PR comment，而不是只写在 CI 日志里；GitHub Actions 可用
actions/github-script自动贴结果
多人并行改同一 HTML 文件时的冲突预防
当多个 feature 分支同时修改 index.html，merge conflict 不只是语法问题，更可能破坏语义层级或可访问性。
- 把
head和body拆成独立文件（如head.partial.html、header.partial.html），用构建工具拼接，降低冲突概率 - 禁止直接在
body顶部加新script标签——统一走entrypoints.json注册，由构建流程注入 - 对结构性标签（
header、nav、main）加注释锚点，例如<!-- header:start -->，方便 diff 工具识别区块边界 - 冲突解决后必须重跑
html-validate，因为手动合并可能删掉aria-label或打乱标题层级
main 分支的 HTML 质量守门人怎么设
不能只靠 CI 检查，得有机制防止“低质量代码”通过 PR 合并进来，尤其当 reviewer 忽略了 HTML 部分。
- 在 GitHub branch protection 里启用
required status checks，把html-validate和axe-core扫描列为强制项 - 设置
required reviewers至少含一名前端成员，且该 reviewer 的 approval 必须明确勾选 “HTML structure & semantics OK” 选项（可用自定义 checklist 插件） - 每次 merge 到
main后，自动触发一次 W3C validator 全量扫描，并把结果存档；历史报告差异超过 5% 触发告警 - 最易被忽略的是：即使所有检查都过，也要人工抽检
screen reader实际朗读效果——工具无法判断aria-hidden="true"是否误用在交互元素上
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
