html 属性顺序应为 class 优先，布尔属性不写值，alt 和 aria-* 必须存在且靠后，属性值用双引号、标签名小写。
class 必须排在所有属性最前面
class 是页面中复用性最高的结构标识，它直接影响 CSS 选择器匹配效率、JS 查询（比如 getElementsByClassName）、BEM 命名逻辑，以及样式层叠的起点优先级。把它放在开头，一眼就能识别组件类型，而不是被某个具体 id 或 data-id 干扰判断。
常见错误是把 id 或 data-* 放最前，结果一扫过去先看到实例 ID，掩盖了它所属的通用类别。例如：<div id="user-123" class="card"> 就不如 <code><div class="card" id="user-123"> 直观。<h3>布尔属性不要写值，但必须存在</h3>
<p>像 <code>disabled、required、checked 这类布尔属性，HTML5 规定只需出现即生效。写成 disabled="true" 或 required="required" 属于冗余，W3C 验证器会报 warning，某些框架（如 Vue 模板编译）也可能因此响应式失效或 SSR 渲染不一致。
- 正确写法：
<input type="text" required>、<button disabled>提交</button> - 错误写法：
required="true"、disabled="disabled"、checked=""（空字符串虽合法但没必要） - 动态控制时，JS 应用
el.setAttribute('disabled', '')或el.removeAttribute('disabled')，而非赋值为字符串
alt 和 aria-* 必须存在，且位置靠后
alt 是 img 的硬性要求，缺失会导致 W3C 验证失败、屏幕阅读器无法描述图像内容、SEO 权重受损。哪怕图像是纯装饰，也得写 alt=""，不能省略这个属性本身。
aria-label 和 role 等可访问性属性属于“附加信息层”，不参与布局或渲染，应统一放在末尾，避免打断语义流。注意区分：title 是浏览器原生 tooltip，移动端基本无效；aria-label 才是无障碍专用，按钮或图标无文本时必须用它补充说明。
例如：<button aria-label="关闭弹窗"><svg>...</svg></button>，而不是依赖 title。
属性值必须用双引号，标签名必须小写
所有属性值——无论数字、单词还是路径——都必须用英文双引号包裹，比如 src="logo.png"、width="200"。写成 width=200 或 type=checkbox 虽能运行，但不符合规范，W3C 验证器会报 Attribute value must be quoted。
标签名和属性名一律小写：div、img、class、data-user-id 都对；Div、IMG、Class、DATA-USER-ID 都错。拼写也不能出错：inputt 或 texarea 会被浏览器忽略或降级为 div。
容易被忽略的是：自定义 data- 属性也必须小写，且引号不可省略；form 必须有 action（哪怕为空字符串），a 必须有 href 才算有效链接。
