doctype、lang、charset必须顶格写在开头，否则触发怪异模式导致功能静默失效；class/id命名须语义化、全小写短横线分隔；块级标签须显式闭合；img必须带alt，role/aria-*须配合交互逻辑。
DOCTYPE、lang、charset 必须顶格写在开头
浏览器解析 HTML 不是“看到啥就渲染啥”，而是先读这三行再决定用哪种模式——标准模式还是怪异模式。漏掉或写错，input type="date"可能直接不显示，offsetHeight计算偏移量会失准，屏幕阅读器把中文当英文读，这些都不报错，但功能静默失效。
具体操作：
— 必须是文件第一行，前面不能有空格、BOM、注释<br>
— <code>写在标签上，别用zh或cn
— <meta charset="UTF-8">必须出现在内前1024字节，建议第1或第2行，大小写和连字符都不能错（不是utf8、utf-8或UTF8）
class 和 id 命名不是审美问题，是协作成本问题
写class="left-box-2"三个月后你自己都得查 DOM 才知道它干啥；而class="article-meta"一眼可知用途，JS 和 CSS 都能稳定定位，测试脚本也不容易断。
实操要点：
— 全小写，单词间用短横线：user-avatar ✔️，userAvatar ❌，user_avatar ❌
— 禁止用样式描述命名：red-text、float-left这类名字，设计一改就成了“谎言”
— id必须全局唯一，且尽量少用；锚点跳转时确保拼写完全一致（区分大小写），比如id="section2"对应href="#section2"
所有块级标签显式闭合，别依赖浏览器自动补全
HTML5 允许省略
div.children拿到的节点顺序和预期不符、CI/CD 流水线因校验失败拒绝合并。建议：
— <div>、<code><p></p>、<section></section>、<header></header>等块级标签全部显式写闭合
— 自闭合标签统一用<img src="x" alt="">形式，不要加/（HTML5 不需要<img>）
— <ul></ul>里每个<li>都带，哪怕内容为空
alt、role、aria-* 不是“可选加分项”，是 HTML 合法性的一部分
缺alt不只是影响无障碍，W3C 验证器会直接报错；role="button"没配tabindex或键盘事件，屏幕阅读器能读出来但无法操作——这不是体验差，是代码本身不合法。
关键判断：
— 所有<img>必须有alt，纯装饰图用alt=""，别省略
— role和aria-*属性只在语义缺失时才加，比如用<div>模拟按钮，就得补<code>role="button" + tabindex="0" + 键盘事件
— aria-label优先于aria-labelledby，后者需确保引用的id真实存在且唯一
真正难的不是记住所有规则，而是每次写第一行、给<img>加alt、敲下
