pr中html质量失控源于未卡住三道硬门槛：结构合法性（doctype/lang/charset）、语义容器合理性（nav/main/section/h*）、可访问性属性完整性（alt/label/for），需通过ci自动拦截而非人工判断。
PR评审里HTML代码质量失控，根本不是“写得不规范”，而是评审环节没把住三道硬门槛：文档结构、语义化标签、可访问性属性。光靠人工扫一眼 <div> 和 <code><span></span> 区分不开，必须用可落地的检查项卡死。
PR中必须拦截的HTML结构错误
这类问题直接导致浏览器怪异模式、SEO抓取失败、JS DOM操作异常，且在CI阶段就能自动发现，不该留给人工判断。
缺失或写成 <code>（小写 d）——W3C验证器会报错，Chrome强制标准模式失效-
标签漏掉lang属性，或值为zh、cn等非BCP 47格式——屏幕阅读器无法切换中文语音库，Google Search Console标记语言不明确 -
<meta charset="utf-8">不在首行，或被<title></title>等标签挡住——UTF-8解析延迟，中文乱码概率陡增，尤其在IE11和旧版Safari中复现率高 -
外挂脚本，比如<script></script>写在之后——部分CI环境下的JSDOM解析直接抛SyntaxError: Unexpected end of input
语义化标签误用高频场景
团队常把 <div> 当万能筐，但PR里只要出现以下组合，基本等于放弃结构可维护性，也埋下无障碍和SEO隐患。
<ul><li>导航栏用 <code><div class="nav"> 而非 <code><nav></nav>——document.querySelector('nav') 查不到，AT（辅助技术）无法识别导航区域
<div>，却不包裹 <code><main></main>——搜索引擎无法定位页面核心内容，Lighthouse可访问性评分直接扣分
<div role="button"> 模拟按钮，却不加 <code>tabindex="0" 和键盘事件监听——键盘用户无法聚焦，违反 WCAG 2.1 A级标准
<h1></h1> 到 <h6></h6> 跳级使用，比如 <h1></h1> 后直接 <h3></h3>——语义层级断裂，NVDA读屏时逻辑跳转错乱alt、label、for 这类属性漏填就是硬伤
它们不是“锦上添花”，而是HTML规范强制要求。PR里一旦漏掉，CI工具能立刻标红，人工评审反而容易忽略。
-
<img>缺alt属性，或写成alt="图片"这类无效值——Lighthouse报Image elements do not have [alt] attributes，且对视障用户完全不可读 -
<input>没配<label></label>，或用了for却指向不存在的id——点击标签无法聚焦输入框，移动端触控面积缩水50% -
<form></form>里多个同名name的<input>，又没用type="radio"或type="checkbox"显式声明——后端接收参数时覆盖或丢失，线上故障复盘常溯源至此 -
<picture></picture>里<source></source>缺media或type，<img>缺srcset和sizes——响应式图片加载失效，首屏LCP指标恶化
真正卡住HTML质量的，从来不是“要不要写语义标签”，而是PR模板里是否固化了这三条检查项：结构合法性（DOCTYPE/lang/charset）、语义容器合理性（nav/main/section/h*）、可访问性属性完整性（alt/label/for）。工具可以自动跑，人只需盯住结果——否则再细致的评审，也拦不住第100次 <div class="header"> 提交。</div>
