html属性值必须用双引号包裹，class等属性需固定顺序，lang和charset须显式且位置正确，配合prettier、htmlhint与git hooks实现自动化校验。
属性值必须用双引号包裹，不能省略或换用单引号
HTML规范明确要求所有属性值使用双引号，这是避免解析歧义和兼容性问题的底线。比如 class=header 或 alt='logo' 都是不合规的——前者在空格或特殊字符出现时会直接报错，后者在某些旧版构建工具中可能被误判为非法语法。
常见错误现象包括：Webpack 插件报 ParseError: Unexpected token、Prettier 格式化后自动补双引号但团队成员手动删掉、CI 流程中 HTMLHint 检查失败。
-
src、href、alt、title、data-*等所有带值的属性都必须套双引号 - 空字符串也要写成
alt=""，而不是alt=或直接省略（尤其img的alt不可缺） - 不要为了“简洁”而用单引号或不加引号，这在 VS Code + Prettier 默认配置下也会被自动修正，徒增冲突
属性顺序要固定，否则 diff 和审查成本陡增
当多人协作修改同一段模板时，如果 class 有时写在前面、有时在后面，Git diff 里就会出现大量“位置变动”而非“实质变更”，掩盖真实修改点。统一顺序不是为了美观，而是降低协同噪音。
推荐采用主流框架（如 Bootstrap、Tailwind 官方示例）和 HTMLHint 默认规则的顺序：
-
class→id→name→data-*→src/href/for/type→title/alt→aria-*/role - 布尔属性如
disabled、required不带等号，也不写disabled="disabled" - 避免把
style写在中间，它应始终靠后（因其高权重且易变）
lang 和 charset 必须显式声明，且位置不能错
lang 和 charset 不是“可选优化项”，而是影响渲染、语音合成、SEO 和字符解码的基础配置。漏写或放错位置会导致中文乱码、屏幕阅读器读错语言、甚至部分 CI 工具校验失败。
关键执行点：
-
必须出现在根标签，且值要精确（zh-CN≠zh≠cn） -
<meta charset="UTF-8">必须是中第一个子元素，位置错一位就可能触发 Quirks Mode - 不要混用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，它已被废弃，且在现代浏览器中无效
Prettier + HTMLHint 配合 Git Hooks 才算真正落地
光靠文档约定没用。开发时手滑漏引号、改顺序、删 lang，靠人眼 review 几乎无法拦截。必须让机器在保存和提交两个环节卡住。
实操建议：
- 在
.prettierrc中启用htmlWhitespaceSensitivity: "css"和quoteProps: "as-needed"（避免对对象 key 加引号干扰 JS） - 用
htmlhint配置.htmlhintrc强制检查attr-value-double-quotes、doctype-first、lang-require等规则 - 通过
husky+lint-staged在pre-commit阶段自动跑prettier --write和htmlhint，失败则阻断提交
最容易被忽略的是：团队里有人关掉了编辑器的保存自动格式化，或者本地没装 husky；只要一人绕过，规范就形同虚设。所以首次接入时，最好在 README 里写明「不运行 npm install 就无法启动本地服务」，把约束嵌进开发流本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
