HTML结构质量决定设计稿还原精度：必须规范DOCTYPE、lang、viewport等基础标签，语义化标记交互元素，禁用内联样式，确保DOM顺序匹配视觉流与响应式需求。
设计稿还原不是“写完就交”，HTML结构质量直接决定后续CSS能否精准控制像素——结构歪了，再细的间距调整也白搭。
检查 HTML 文档结构完整性
很多视觉偏差其实源于基础结构错误，比如缺失 <!DOCTYPE html> 导致 IE/旧版 Safari 进入怪异模式，body 内嵌套错层让 flex 或 grid 容器失效，甚至一个没闭合的 <div> 就会让整个布局偏移 2–3px。
- 必须以
<!DOCTYPE html>开头，不能写成<docType html!>或漏掉 -
<html>要有lang属性，否则某些字体渲染（如 macOS 的 San Francisco）会降级 -
<head>中必须含<meta name="viewport">，否则移动端缩放异常，导致测量值失真 - 避免在
<body>外写内容，或用<div>包裹全部内容却忘了设display: block（IE11 下可能塌陷）
验证语义化与可访问性对齐设计意图
设计师标注“主操作按钮”“辅助链接”“禁用态图标”，如果代码里全用 <div onclick>，CSS 就无法通过伪类（如 :focus-visible）还原交互状态，更没法用屏幕阅读器校验焦点顺序是否匹配走查表里的“交互完整性”要求。
- 导航栏用
<nav>，不是<section>；Logo 用<h1>或带aria-label的<div> - 按钮必须是
<button>，禁用态写disabled属性而非仅加opacity: 0.5 - 图标需配
aria-hidden="true"，文字说明放<span>内，否则设计稿中“搜索”图标旁的文本可能被读屏器跳过 - 响应式菜单的展开/收起状态，要用
aria-expanded同步更新，否则暗黑模式切换时焦点管理会错乱
审查内联样式与冗余标签对像素控制的干扰
设计走查表里明确要求“所有间距符合 4px 网格”，但如果你在 HTML 里写了 <div style="margin-left: 13px">，这个 13px 就绕过了 CSS 自定义属性（如 --space-3: 12px）的统一管控，后续自动化检测工具（如 pixelmatch）也会把它标为“偏差源”。
立即学习“前端免费学习笔记（深入）”；
- 禁止任何
style属性，包括width、height、padding—— 这些都该由 class 控制 - 删掉无意义的包裹层：
<div><div><p>文案</p></div></div>容易让盒模型计算多出 2px 边框或默认 margin - 图片必须带
alt，且值非空；否则部分浏览器会渲染默认边框或占位符，影响高度测量 - 字体加载阶段用
<link rel="preload">预加载，避免 FOUT（Flash of Unstyled Text）导致行高临时变化，造成“字重看起来不对”的走查驳回
响应式断点与 DOM 结构的一致性校验
设计师在 Figma 里设了 768px / 1024px 两套约束，但如果 HTML 里把侧边栏写成 <aside> 放在 <main> 后面，CSS 用 order 调整顺序，那在小屏下 screen reader 的阅读流就跟视觉流不一致——这属于走查表里 P1 级“响应式断点”问题，但根子在 HTML 结构。
- DOM 顺序应默认匹配视觉流：主内容优先，侧边栏后置；用 CSS 重构布局，而非靠
flex-direction: column-reverse反转语义 - 媒体查询相关的结构拆分（如移动端抽离导航为
<dialog>），要在 HTML 里预留对应容器，不能靠 JS 动态插入——否则截图比对时会漏掉初始态 - 使用
<picture>+<source media>响应式图片，而非只靠srcset；否则高 DPR 设备下像素密度不匹配，颜色 ΔE 检测直接超标
真正卡住还原度的，往往不是某个 border-radius 写成 7px 而不是 8px，而是 <header> 里混进了 <table> 布局，或者 viewport 缺失导致整个页面缩放比例错乱。结构审查不是走流程，是给像素控制划出不可逾越的边界。
