pre-commit钩子必须校验HTML结构完整性，强制检查doctype、根标签、head/body存在性及lang属性，全量扫描HTML文件，结合CDN白名单、CSP指令、沙箱iframe快照比对和语义化标签占比门禁，确保不可绕过。
大型协同作业中，HTML代码质量不降级不是靠“自觉”或“review时多看两眼”实现的，而是靠可拦截、可审计、可回滚的控制机制——一旦某次提交绕过检查，后续所有依赖它的组件都可能继承缺陷。
pre-commit 钩子必须校验 HTML 结构完整性
多人并行开发时，index.html常被多个分支同时修改，极易出现标签未闭合、<head>缺失、lang属性丢失等问题。仅靠人工 review 几乎无法发现这类低级但致命的错误。
- 用
html-validate或htmllint在pre-commit中运行，配置强制检查：doctype、<html>根标签、<head>/<body>存在性、lang属性 - 禁止跳过：钩子脚本里加
exit 1且不提供--no-verify例外路径 - 注意：不要只校验变更文件——HTML 的结构性错误往往藏在被间接引用的模板片段里，需全量扫描
src/**/*.html和public/*.html
CDN 资源白名单 + CSP 指令双锁死外部引用
协作中常有人为“快速验证”直接写 <img src="http://localhost:3000/logo.png"> 或引入非可信 CDN 的 <link href="//cdn.bootcss.com/...">，上线后立刻失效或引发 XSS。
- 静态分析阶段（如
pre-push）用正则扫描所有 HTML 文件，拒绝：http://协议、未在白名单中的域名（如只允许cdn.jsdelivr.net、unpkg.com）、data:URI - 运行时再通过
Content-Security-Policy头限制：明确声明img-src 'self' https://cdn.jsdelivr.net，浏览器会直接拦截非法请求 - 关键点：白名单必须是域名粒度，而非路径；
https://unpkg.com/react@18.2.0允许，https://unpkg.com/不允许
沙箱 iframe 渲染 + DOM 快照比对防篡改
当多人共用一套在线预览系统（如内部 CodeSandbox 替代品）时，有人可能偷偷注入 <script> 或覆盖全局 window.onload，导致其他成员看到的“渲染结果”和实际提交内容不一致。
立即学习“前端免费学习笔记（深入）”；
- 每次预览必须注入到带
sandbox="allow-scripts allow-same-origin"的<iframe>，且该 iframe 的src是一次性 token 地址，不可复用 - 服务端对渲染后的 DOM 执行快照（如序列化
document.body.innerHTML），与原始 HTML 提交哈希比对；若不一致，立即标记为“高风险变更”并阻断发布流程 - 注意：
allow-scripts必须配合严格的 CSP，否则沙箱形同虚设；快照比对要排除动态生成内容（如时间戳、随机 ID）
语义化标签使用率纳入 CI 门禁指标
团队越大，“用 <div class="card"> 替代 <article>”这种反模式越难收敛。靠文档或培训无效，必须量化并卡点。
- 用
eslint-plugin-html或自定义 AST 解析器统计每个 HTML 文件中语义化标签（<nav>、<main>、<section>等）占比，要求 ≥ 75% - CI 流程中设置硬性阈值：低于该值则构建失败，且错误信息直接定位到具体文件和缺失标签类型
- 容易被忽略的是：第三方组件库（如某些 UI 框架）默认输出非语义化结构，需在构建层统一包裹或重写模板，不能放任其污染主 HTML
真正难的不是写检查规则，而是让每条规则在每次提交、每次预览、每次构建中都不可绕过——机制一旦松动，三个月内就会退回到“谁改得快谁说了算”的混乱状态。
