前端质量控制必须在切图前完成，设计稿需包含语义化结构标注、标题层级、alt文本说明、表单属性、嵌套合法性检查、语言与编码元信息及ARIA属性预留。
设计稿导出阶段就暴露 HTML 结构缺陷，说明前端介入太晚——真正有效的质量控制必须在切图前完成校对，而不是等代码写完再返工。
设计交付物必须包含语义化结构标注
设计师输出的 Sketch/Figma 文件或标注稿里，不能只标尺寸和颜色。开发拿到的每个区块需明确对应 <header>、<nav>、<main>、<section> 还是 <aside>。没有语义标注的设计稿，等于没交付结构逻辑。
- 标题层级要同步标注：H1～H6 的视觉层级必须与语义层级一致，避免“看起来像 H2 实际写了
<h3>” - 图片区域必须注明是否需要
alt文本及内容方向（如装饰图可标 “alt=""”，信息图需提供文案） - 表单控件区域需标明必填项、输入类型（
type="email"还是type="tel"）、是否关联<label>
导出 HTML 前强制检查三类嵌套合法性
很多 DOM 异常（比如 Chrome 自动把 <p><div>xxx</div></p> 拆成两段）其实在设计阶段就能规避。导出工具（如 Anima、Zeplin 插件或手写模板）若不校验嵌套规则，生成的 HTML 必然被 W3C 报错 Element div not allowed as child of element p。
-
<p>内禁止出现<div>、<section>、<ul>等块级元素，只允许内联内容（<span>、<strong>、文本等） -
<li>必须直接包裹在<ul>或<ol>中，不能套<div> -
<table>的子元素只能是<caption>、<colgroup>、<thead>、<tbody>、<tfoot>、<tr>，不能直接放<div>或<p>
编码与元信息必须随设计稿同步确认
设计师不需要写 <meta charset="UTF-8">，但必须在交付清单里确认两点：页面语言（lang 值）和字符集要求。中文项目若未声明 lang="zh-CN"，屏幕阅读器会按英文朗读；若导出 HTML 默认用 GBK 编码，后续所有 alt、title 文字都会乱码，W3C 验证器也会报 Encoding error: cannot determine encoding。
立即学习“前端免费学习笔记（深入）”；
- 语言属性必须匹配实际内容：简体中文用
lang="zh-CN"，繁体用lang="zh-TW"，多语言页需按区块切分（如<span lang="en">English</span>） - 所有文本内容（按钮文案、占位符、错误提示）需提供 UTF-8 可编码的原始字符串，避免设计稿里用特殊字体符号替代真实文字
- SEO 关键字段（
<title>、<meta name="description">）需在标注稿中预留位置并填写示例值，而非留空或写“此处填标题”
最容易被跳过的环节，是设计稿里没标“这个区域将来要加 ARIA 属性”。比如轮播图缺少 aria-live、折叠菜单没设 aria-expanded，这些不是前端补丁能解决的——结构层缺失，无障碍支持就是无源之水。
