html规范化管理需通过vscode项目级配置、prettier自动格式化与husky预提交校验三者强制落地，确保保存即合规、commit即规范，辅以stylelint硬性拦截类名命名，并通过注释和空行明确协作语义，杜绝风格争议与无障碍隐患。
HTML规范化管理不是定一套文档就完事，而是让每个成员在保存文件那一刻，代码就自动变成团队想要的样子。 纯靠口头约定或Wiki页面约束，三天后就会失效；真正起作用的，是编辑器配置、预提交校验、模板注释这三样东西。
VSCode 项目级缩进与格式化必须强制落地
团队里有人用 Tab、有人用 4 空格、有人开自动换行，git diff 里全是空格变更，根本看不出逻辑改了啥。这不是风格问题，是协作阻塞点。
- 在项目根目录建
.vscode/settings.json，内容必须包含："editor.tabSize": 2、"editor.insertSpaces": true、"editor.formatOnSave": true - 禁用全局设置覆盖：加
"editor.disableDefaultKeybindings": true防止本地快捷键干扰 - 不依赖个人偏好——所有新成员 clone 仓库后，打开 VSCode 就自动生效，无需手动配置
Prettier + husky 实现 HTML 保存即合规
prettier 不是“美化工具”，它是 HTML 规范的第一道物理防线。它能解决 80% 的格式争议，比如引号、自闭合标签、属性顺序，但不能替代语义判断。
- 安装：
npm install --save-dev prettier husky，然后运行npx husky init - 在
.prettierrc中明确写死："htmlWhitespaceSensitivity": "css"（避免折行破坏布局）、"singleAttributePerLine": false（防止过度拆行） - 用
husky拦截pre-commit，跑prettier --write src/**/*.html，不合规就 commit 不出去 - 注意：
prettier不管class命名是否语义化，这部分得靠stylelint补位
类名命名规则必须由工具硬性拦截
允许 userCard 和 user-card 并存，等于默许三个月后没人能猜出 card1 和 cardV2 哪个还在用。命名规范必须可执行、可报错、不可绕过。
- 在
.stylelintrc中启用selector-class-pattern，值设为"^[a-z][a-zA-Z0-9-]*$"，直接拒绝user_avatar或UserCard - 禁止出现样式描述类名：
red-btn、float-left这类名字在 CI 阶段就该被stylelint标红 - 模板文件（如
_header.html）里预置带注释的 class 示例：<!-- header-main: 页面主头部，含 logo + nav --> <header class="header-main"></header>
注释和空行不是“锦上添花”，是协作信号灯
没有注释的 data-user-id 属性，下次重构时谁敢动？连续 5 个 <div> 没空行，连作者自己都分不清哪段属于表单校验、哪段属于错误提示。<ul><li>关键 <code>data-* 属性旁必须跟注释：<div data-api-version="v2">
<!-- 后端强制要求，不可降级 --><li>模块间用 1 个空行，大区块（如 <code><section></section>）之间用 2 个空行——Prettier 默认不插，需配 prettyhtml 或自定义插件
<!-- mobile menu toggle -->，中文注释会破坏某些构建工具的字符解析<!-- TODO -->，只接受 <!-- @todo 张三 2026-07-15: 替换为 useAuth hook -->，带责任人和截止日最常被忽略的点是：没人检查 lang 和 doctype 是否真实生效。一个漏掉 lang="zh-CN" 的页面，可能让屏幕阅读器把中文读成日语，而这个错误在视觉上完全不可见——它只在无障碍测试里爆发，且无法被 Prettier 或 stylelint 捕获。
