小型项目更需要html规范，因缺乏review、重构和风格统一，随意编写的index.html三个月后即难以维护；必须检查的5项快捷规范包括：img必须有alt、表单控件须绑定label或aria-label、每页仅一个h1且位于主内容区、无href的a需设role="button"、禁用内联样式。
为什么小型项目更需要 HTML 规范？
因为没人 review，没人重构，没人统一风格——写得随意的 index.html 三个月后自己都看不懂。不是为了“标准”，而是避免 class="btn btn-primary btn-lg active" 和 class="big-button is-active" 在同一页面共存，导致样式冲突、JS 选择器失效、后续加功能时反复 grep。
只保留 5 条必须检查的 HTML 快捷项
这些是肉眼可快速验证、工具能自动抓取、且对维护影响最大的点：
- 所有
<img> 必须有 alt 属性（空字符串 alt="" 也合法，但需确认是否真无需描述）
- 表单控件（
<input>、<textarea></textarea>、<select></select>）必须有对应的 <label></label> 或明确的 aria-labelledby/aria-label
- 每个页面只能有一个
<h1></h1>，且应出现在主内容区域（不是页眉 logo 里塞个 <h1></h1>）
-
<a></a> 标签不带 href 时，必须显式设为 role="button" 并监听 click（否则屏幕阅读器忽略，键盘 Tab 无法聚焦）
- 所有内联样式（
style="..."）必须删除，CSS 提到 <style></style> 块或外部文件中（哪怕就一行）
用浏览器 DevTools 三秒自查法
不用装插件，打开 F12 就能筛出大部分问题：
- 在 Console 输入：
$$("img:not([alt])") —— 查漏掉 alt 的图片
- 输入：
$$("input, textarea, select").filter(el => !el.labels?.length && !el.getAttribute("aria-label") && !el.getAttribute("aria-labelledby")) —— 找没绑定 label 的表单控件
- 输入：
$$("h1").length —— 看是不是 >1
- 输入：
$$("a[href='']:not([role='button'])") —— 找假按钮
- 所有
<img>必须有alt属性（空字符串alt=""也合法，但需确认是否真无需描述） - 表单控件（
<input>、<textarea></textarea>、<select></select>）必须有对应的<label></label>或明确的aria-labelledby/aria-label - 每个页面只能有一个
<h1></h1>，且应出现在主内容区域（不是页眉 logo 里塞个<h1></h1>） -
<a></a>标签不带href时，必须显式设为role="button"并监听click（否则屏幕阅读器忽略，键盘 Tab 无法聚焦） - 所有内联样式（
style="..."）必须删除，CSS 提到<style></style>块或外部文件中（哪怕就一行）
用浏览器 DevTools 三秒自查法
不用装插件，打开 F12 就能筛出大部分问题：
- 在 Console 输入：
$$("img:not([alt])") —— 查漏掉 alt 的图片
- 输入：
$$("input, textarea, select").filter(el => !el.labels?.length && !el.getAttribute("aria-label") && !el.getAttribute("aria-labelledby")) —— 找没绑定 label 的表单控件
- 输入：
$$("h1").length —— 看是不是 >1
- 输入：
$$("a[href='']:not([role='button'])") —— 找假按钮
$$("img:not([alt])") —— 查漏掉 alt 的图片 $$("input, textarea, select").filter(el => !el.labels?.length && !el.getAttribute("aria-label") && !el.getAttribute("aria-labelledby")) —— 找没绑定 label 的表单控件 $$("h1").length —— 看是不是 >1 $$("a[href='']:not([role='button'])") —— 找假按钮 注意：这些命令依赖现代 DOM API，Chrome/Firefox/Edge 可用；Safari 需手动展开 NodeList 再查。
别被“语义化”吓住，先守住底线
小型项目不需要立刻搞 BEM、ARIA live region、微数据。但以下两个坑几乎必踩：
- 把
<div onclick="doSomething()"> 当按钮用 → 应改用 <code><button type="button"></button> 或带 role="button" 的 <a></a> - 用
<br> 或多个 控制布局 → 这类“快捷排版”半年后改 margin/padding 会连锁崩坏
真正卡住协作和迭代的，从来不是“没用 <article></article>”，而是 id="header1"、id="header2"、id="header_new" 并存，JS 脚本里硬编码找这三个 ID。
规范不是越多越好，是让下一个人打开文件时，能靠直觉猜出结构、不翻 git log 就敢改。
<div onclick="doSomething()"> 当按钮用 → 应改用 <code><button type="button"></button> 或带 role="button" 的 <a></a> <br> 或多个 控制布局 → 这类“快捷排版”半年后改 margin/padding 会连锁崩坏 真正卡住协作和迭代的，从来不是“没用 <article></article>”，而是 id="header1"、id="header2"、id="header_new" 并存，JS 脚本里硬编码找这三个 ID。
规范不是越多越好，是让下一个人打开文件时，能靠直觉猜出结构、不翻 git log 就敢改。
