HTML代码质量验收必须确保结构、语义、可访问性、编码一致性全部达标，否则将导致W3C验证失败、屏幕阅读器误读、SEO降权、CI中断及构建工具拒绝注入；核心问题集中于DOCTYPE、charset、lang三处开头规范，语义标签唯一性与正确嵌套，alt、label等可访问性硬性要求，以及工程化CI自动校验闭环。
HTML代码质量验收不是“写完能跑就行”，而是必须在交付前确认结构、语义、可访问性、编码一致性全部达标。不满足标准的HTML会直接导致W3C验证失败、屏幕阅读器误读、SEO抓取降权、CI流水线中断，甚至被前端构建工具（如Vite、Webpack）的HTML插件拒绝注入。
W3C验证通不过：DOCTYPE、charset、lang三处最容易漏
90%以上的验证失败集中在开头三行：<!DOCTYPE html>没写或写错位置、<meta charset="utf-8">不在<head>首行、<html lang="zh-CN">缺失或值为zh/cn。W3C会报Stray end head tag或Bad value “zh” for attribute “lang”这类错误。
-
<meta charset>必须是<head>中第一个子元素，哪怕前面有注释也不行 -
lang值必须严格按BCP 47格式，中文页面只认zh-CN，zh-Hans-CN虽合法但无必要，zh会被部分辅助技术忽略 - 旧式
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">已被W3C标记为“obsolete”，CI检查工具（如htmlhint）默认报错
语义标签误用：main、article、nav这些不是装饰品
<main>出现两次、<nav>包裹非导航内容、用<div role="navigation">代替<nav>，都会触发axe或Lighthouse的可访问性警告，且W3C验证器会提示Element main not allowed as child of element main。
-
<main>全局只能有一个，且不能嵌套在<article>、<aside>、<footer>内 -
<article>必须代表独立、可分发的内容单元（如一篇博客、一条新闻），不能用于布局容器 -
<nav>只用于主要导航链接集合，页脚版权信息、面包屑、登录入口都不算“导航” - 所有语义标签都需配合正确层级的标题（
<h1>–<h6>），跳级（如<h2>后接<h4>）会被htmlhint规则heading-level拦截
可访问性硬伤：alt、label、ARIA不是“锦上添花”
图片缺alt、表单控件没<label>、按钮用<div onclick>模拟，这三类问题在axe扫描中属于“A级”必修项，CI阶段直接阻断发布。搜索引擎同样会因此降低页面相关性评分。
立即学习“前端免费学习笔记（深入）”；
-
<img>的alt属性不能为空字符串alt=""，除非该图纯装饰且无信息价值；含信息的图必须描述内容，而非“图片”“图标”这种无效文本 - 所有
<input>、<select>、<textarea>必须有显式<label for="xxx">或被<label>包裹，aria-label仅作兜底，不可替代 - 禁用
<div tabindex="0" role="button">，必须用原生<button>；自定义组件需同时支持键盘Enter/Space触发，且有:focus-visible样式
工程化落地：靠人工Review守不住底线
靠Code Review记住所有规则不现实。真正能沉淀下来的验收标准，必须变成CI里可执行的检查项——任何提交都自动跑htmlhint + axe-core + W3C validator API，报错即失败。
- htmlhint配置必须启用
attr-lowercase、attr-no-duplication、doctype-first、head-script-disabled等强制规则 - CI脚本中调用
w3c-validator-cli --file index.html，返回非0即终止流程 - axe-core集成进Playwright测试，对关键页面做无障碍快照比对，差异超阈值则告警
- 所有错误类型必须对应到具体规范条目（如“缺少lang属性”→ 规范第2.1条），方便定位和追责
最常被忽略的是：验证通过 ≠ 质量达标。W3C只管语法，不管语义是否合理、ARIA是否冗余、标题层级是否混乱——这些必须靠定制化规则+人工抽检双保险。
