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