viewport元标签缺失或错误会导致响应式失效；语义化标签误用损害可访问性与SEO；图片需srcset/sizes响应式；动态内容须运行时校验并阻断部署。
viewport 元标签漏写或写错会直接导致响应式失效
移动端访问时页面缩放异常、文字过小、横向滚动条出现，大概率是 <meta name="viewport"> 缺失或参数错误。它不是可选配置，而是响应式布局的启动开关。
- 必须写在
<head>内，且在所有 CSS 和 JS 加载前执行 -
content值不能简写成"width=device-width"—— 缺少initial-scale=1会导致 iOS Safari 自动缩放 - 不要用
user-scalable=no，它违反 WCAG 无障碍要求，且被部分浏览器忽略 - 旧项目里常见错误：
name="viewport"拼成name="viewpoint"或漏掉引号，这类拼写错误不会报错但完全失效
语义化标签误用比 class 命名混乱更致命
用 <div class="header"> 替代 <header> 看似无害，但在屏幕阅读器、SEO 解析、自动化检查工具中会被识别为“无结构内容”，直接拉低可访问性评分和校验通过率。
-
<main>必须且只能出现一次，且不能嵌套在<article>或<aside>内 -
<nav>不等于“所有带链接的容器”，仅用于主导航、页脚导航等有明确导航意图的区块 - 卡片类组件优先用
<article>而非<section>—— 前者表示独立可分发的内容单元，后者表示逻辑分组 - 校验工具（如 axe-core、WAVE）会把
<div role="button">当作严重问题标记，应改用原生<button>
图片与媒体元素的响应式写法必须兼顾 HTML 层和 CSS 层
只靠 max-width: 100% + height: auto 不足以通过质量校验，尤其在高 DPR 设备上会出现模糊、加载阻塞或布局偏移（CLS）。
-
<img>必须同时提供srcset和sizes，否则 Lighthouse 会标为“未优化图像” - 避免在 HTML 中写内联
width/height属性 —— 它们会覆盖 CSS 的响应式设置，且不随视口变化 -
<picture>的<source>必须按从高到低分辨率顺序排列，否则 Safari 会忽略后续规则 - SVG 图标建议用
<svg>内联而非<img src="icon.svg">—— 后者无法通过 CSS 控制颜色和尺寸，也不支持伪元素
HTML 校验工具对动态渲染内容的处理存在天然盲区
Vue/React 渲染的 DOM、JS 动态插入的卡片、SPA 路由切换后的内容，静态 HTML 校验器（如 W3C Validator）根本看不到，但自动化质量检查系统必须覆盖这些场景。
立即学习“前端免费学习笔记（深入）”；
- 纯静态检查会漏掉 70% 以上的真实问题，比如 SSR 渲染后缺失
alt、aria-label未随状态更新 - 必须配合 Puppeteer 或 Playwright 执行真实渲染快照，再调用 axe-core 进行运行时可访问性检测
- 第三方组件库（如 Ant Design、Element Plus）生成的 HTML 往往不符合规范，需在检查流程中加入白名单或转换规则，而不是跳过
- 校验报告里的行号定位在 SSR 输出中有效，但在 CSR 场景下毫无意义 —— 应改为定位到组件文件路径 + props 键名
