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