html代码质量评审必须严查doctype与html标签完整性、语义化标签使用、可访问性属性（alt/label/aria-*）、脚本样式位置及内联风险，缺一不可。
HTML代码质量在评审中常被弱化，但它是可访问性、SEO、渲染性能和跨浏览器一致性的底层基础——不单独设检查项，就等于默认放行结构缺陷。
DOCTYPE 和根标签是否缺失或错位
这是最基础却最高频的漏审点。没有 或 <code> 标签错嵌套（比如 在 外），会导致浏览器进入怪异模式（Quirks Mode），CSS盒模型、Flex/Grid 行为全部偏移，本地开发可能“看起来正常”，上线后在 Safari 或旧版 Edge 上直接错位。
- 评审时必须打开开发者工具 → Elements 面板，确认顶层节点是
，且其前一行是 - 禁止用
（小写 doctype）或 <code>..>（XHTML 遗留写法） - 若项目用 SSR 或构建工具生成 HTML，需检查模板文件（如
index.html或src/index.html），而非仅看组件内v-html片段
语义化标签是否被 div 滥用
用一堆 <div class="header"> 替代 <code><header></header>，表面功能无损，实则破坏屏幕阅读器导航路径、影响搜索引擎内容权重、增加无障碍测试失败率。Vue/React 组件中尤其容易忽略——因为“能跑就行”。
- 重点查：导航区域是否用了
<nav></nav>，主内容区是否包裹在<main></main>，侧边栏是否为<aside></aside>，页脚是否为<footer></footer> - 禁止场景：
<div role="navigation"> 应优先改为原生 <code><nav></nav>；<div class="card"> 内含标题+段落，应考虑 <code><article></article>或<section></section> - 注意：
<section></section>必须有可见标题（<h1></h1>–<h6></h6>），否则语义失效；<div> 不是语义错误，但当它重复出现且承担明确内容角色时，就是评审扣分项<h3>alt、label、aria-* 等可访问性属性是否缺失或无效</h3> <p>这不是“锦上添花”，而是法律合规底线（如 WCAG 2.1 AA 级）。<code>alt=""和alt="图示"都算无效：前者让屏幕阅读器跳过关键信息，后者等于没写。-
<img>：功能性图片必须有描述性alt（如alt="购物车图标，点击进入结算页面"）；纯装饰图必须是alt=""（空字符串，不是省略） -
<input>/<select></select>：必须配<label for="xxx"></label>，或用aria-label/aria-labelledby显式关联；禁用placeholder当 label -
role属性：只在原生语义无法满足时使用，且必须配套aria-*属性（如role="tablist"必须有aria-controls和aria-selected） - 验证方式：用 Chrome DevTools → Lighthouse 运行 Accessibility 审计，或手动开启屏幕阅读器（VoiceOver / NVDA）试读表单流
script/style 标签位置与内联风险是否受控
把
<script></script>放在里又没加defer，会阻塞 HTML 解析；style写在元素上不仅难维护，还绕过 CSSOM 构建优化，且易被 CSP 策略拦截。- 脚本位置：非关键 JS 必须在
前，或带defer（顺序执行）/async（独立加载）；<script type="module"></script>默认defer，无需额外声明 - 内联样式：禁止
style="color: red;"，所有样式走 CSS 文件或<style scoped></style>；例外仅限动态计算值（如:style="{ top: `${offset}px` }"） - 内联脚本：禁止
onclick="doSomething()"，一律用事件绑定（@click或addEventListener）；v-html渲染的内容必须经 XSS 过滤，不能直接插入未处理的用户输入
真正卡住 HTML 质量的，从来不是“要不要做”，而是评审时没人盯具体标签、没人开 Lighthouse、没人用手动 tab 键走一遍表单流程。一旦跳过这三步，所谓语义化和可访问性，就只是 PRD 里的一行文字。
-
