class必须排在id前面，因class是组件复用性锚点，影响样式作用域提取与ast解析；id紧随其后作为唯一定位标识，避免解析器误判。
HTML代码质量规范不是贴在 Wiki 上的装饰，而是必须嵌入提交前校验、CI 流程和 CR checklist 的硬性契约——没执行，就等于没存在。
为什么 class 必须排在 id 前面
这不是格式洁癖，是 CSS 选择器权重和 JS 操作习惯的真实映射。class 更常复用、更易被 querySelectorAll 或框架响应式系统批量识别；id 是全局锚点，语义强但使用频次低，放后面才符合“先认身份、再找唯一”的阅读逻辑。
- 错误写法：
<div id="header" class="site-header">——CR 时容易误判 id 是主标识，导致后续 JS 用 <code>document.getElementById硬编码，破坏组件可复用性 - 正确顺序（W3C + eslint-plugin-html 默认）：
<div class="site-header" id="header"> <li>若用 Vue 或 React，class 前置还能让 <code>class="xxx" :class="{ active: isActive }"的绑定更直观，避免 id 干扰属性解析顺序 - 危险示例：
<div data-id="123">——三个月后连自己都记不清这是用户 ID 还是商品 SKU<li>安全写法：<code><div data-user-id="123" data-user-status="active"> 或更明确：<code><div data-api-source="user/profile" data-user-id="123"> <li>配合 stylelint 配置 <code>selector-attribute-pattern规则，拒绝不含业务前缀的data-*，CI 中直接报错 - 统一策略：团队所有项目启用 Prettier，并配置
"htmlWhitespaceSensitivity": "css"，自动对齐空格和闭合行为 - 注意例外：
<textarea></textarea>和<script></script>永远不能自闭合，否则内容丢失 - 真实坑点：在
.vue文件中写<img src="x">，Volar 可能报 warning；但写<img src="x">，Prettier 又会格式化掉换行——必须靠prettier.config.js里htmlWhitespaceSensitivity: "ignore"兜底 - 反模式：
<div class="btn primary"> 或 <code><div class=" btn primary "><li>正确写法：<code><div class="btn primary"> <li>建议在 husky + lint-staged 中集成 <code>html-validate，对引号、空格、属性顺序做 pre-commit 检查
data-* 属性必须带业务前缀，否则等于没写
裸名 data-id 在协作中毫无意义：没人知道它来自哪个接口、是否可为空、是否需防重。它本质是前端与后端/业务逻辑的契约字段，不是临时调试标记。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
自闭合标签要不要加 /，取决于工具链而非个人偏好
HTML5 允许 <img>、<input> 省略 /，但 Prettier 默认不加，Vue SFC 或某些 SSR 框架却要求显式闭合。混用会导致 Git diff 爆炸，每次提交都在修格式。
属性值必须用双引号且无首尾空格
单引号在 JS 模板字符串里嵌套易冲突；而 class=" a b " 这种带空格的写法，会让 el.classList.contains("a") 返回 false——人眼难查，运行时出 bug。
最难的不是定规则，而是让每条规则在 git commit 前自动拦截——一旦有人绕过，契约就失效了。
