前端质量控制必须在切图前完成，设计稿需包含语义化结构标注、标题层级、alt文本说明、表单属性、嵌套合法性检查、语言与编码元信息及aria属性预留。
设计稿导出阶段就暴露 HTML 结构缺陷，说明前端介入太晚——真正有效的质量控制必须在切图前完成校对，而不是等代码写完再返工。
设计交付物必须包含语义化结构标注
设计师输出的 Sketch/Figma 文件或标注稿里，不能只标尺寸和颜色。开发拿到的每个区块需明确对应 <header></header>、<nav></nav>、<main></main>、<section></section> 还是 <aside></aside>。没有语义标注的设计稿，等于没交付结构逻辑。
- 标题层级要同步标注：H1～H6 的视觉层级必须与语义层级一致，避免“看起来像 H2 实际写了
<h3></h3>” - 图片区域必须注明是否需要
alt文本及内容方向（如装饰图可标 “alt=""”，信息图需提供文案） - 表单控件区域需标明必填项、输入类型（
type="email"还是type="tel"）、是否关联<label></label>
导出 HTML 前强制检查三类嵌套合法性
很多 DOM 异常（比如 Chrome 自动把 <p></p>
<div>xxx</div>
Element div not allowed as child of element p。
-
<p></p>内禁止出现<div>、<code><section></section>、<ul></ul>等块级元素，只允许内联内容（<span></span>、<strong></strong>、文本等） -
<li>必须直接包裹在<ul></ul>或<ol></ol>中，不能套<div> <li><code><table> 的子元素只能是 <code><caption></caption>、<colgroup></colgroup>、<thead>、<code><tbody>、<code><tfoot>、<code><tr>，不能直接放 <code><div> 或 <code><p></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></title>、<meta name="description">）需在标注稿中预留位置并填写示例值，而非留空或写“此处填标题”
最容易被跳过的环节，是设计稿里没标“这个区域将来要加 ARIA 属性”。比如轮播图缺少
aria-live、折叠菜单没设aria-expanded，这些不是前端补丁能解决的——结构层缺失，无障碍支持就是无源之水。 - 语言属性必须匹配实际内容：简体中文用
