class 必须排在所有属性最前面，因其复用性最高，影响CSS匹配、JS查询、BEM命名及样式优先级，且便于快速识别组件类型；id次之，name和data-*随后，资源类属性再后，布尔属性不写值，可访问性属性放末尾但不可省略。
class 必须排在所有属性最前面
class 是复用性最高的标识，影响 CSS 选择器匹配、JS 查询（getElementsByClassName）、BEM 命名逻辑，也决定样式层叠优先级起点。把它放在开头，一眼就能识别组件类型，团队协作时读代码效率明显更高。
常见错误是把 id 或 data-* 放最前，结果一扫过去先看到某个具体实例 ID，反而掩盖了它所属的通用组件类别。
-
class后紧跟id—— 因为id是页面内唯一锚点，语义上比class更“具体” -
name和data-*紧随其后 —— 表单控制和自定义数据属于行为层，优先级低于结构标识 - 资源类属性（
src、href、for、type）再往后 —— 它们依赖 DOM 结构已存在才能生效
布尔属性如 disabled、required 不要写值
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、title、aria-* 这类可访问性属性要靠近末尾但不可省略
它们不参与布局或渲染流程，属于“附加信息层”，放太靠前会干扰对核心结构的快速扫描。但必须存在 —— 尤其是 alt，缺失会导致 W3C 验证失败，屏幕阅读器无法描述图像内容，SEO 也会受损。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
注意 title 和 aria-label 的分工：title 是浏览器原生 tooltip，延迟显示且移动端基本无效；aria-label 是无障碍专用，应优先用于按钮、图标等无文本内容的控件。
-
img标签必须带alt，哪怕为空（alt=""），表示图像纯装饰 -
a或button包含图标时，若无可见文本，必须用aria-label补充说明 -
role和aria-*属性建议统一放在最后，避免打断语义流
不要为了“整齐”手动对齐属性值
很多开发者习惯把多个属性的等号和引号对齐，比如：
<input class="form-control" type="text" name="username" required>
这种写法看似美观，实则破坏可维护性：每次增删一个属性，都要重新调整所有行的空格；Git diff 会因空格变化产生大量噪音；Prettier 等格式化工具默认禁用该模式。
真正关键的是属性间的**语义顺序**，不是视觉对齐。保持每个属性独占一行 + 两个空格缩进，已经足够清晰：
<input<br> class="form-control"<br> id="username-input"<br> name="username"<br> type="text"<br> required>
最后一行没闭合标签？别担心 —— HTML5 允许省略自闭合斜杠，<img src="a.jpg" alt="示例"> 就是标准写法，加 /> 反而多余。
