HTML语义化标签必须正确选用，主导航用<nav>、主内容区用<main>、时间信息用<time>、表单控件配<label>、按钮用<button>；属性顺序应规范，布尔属性须省略值；关键资源需preload/preconnect，脚本应defer或type="module"；无障碍要求landmark唯一、heading不跳级、交互控件支持键盘导航、动态区域设aria-live。
HTML语义化标签是否被正确选用
语义化不是“加分项”，而是可访问性、SEO 和维护性的基础门槛。用 <div> 套 <div> 写导航、用 <span> 模拟按钮，会直接导致屏幕阅读器无法识别、搜索引擎降权、后续改版成本飙升。
常见错误现象：提交的 PR 里出现大量 <div class="header">、<div class="btn">；<section> 被滥用为“样式容器”而非内容逻辑分组。
- 主导航必须用
<nav>，且应有aria-label或role="navigation" - 主内容区必须包裹在
<main role="main">中，且页面只能有一个<main> - 时间信息必须用
<time datetime="...">，不能只写纯文本 - 表单控件必须配对
<label for="xxx">，禁止仅靠视觉对齐 -
<button>用于交互行为，<a href="#">用于跳转 —— 禁止用<a>绑定onclick模拟按钮
HTML属性顺序与布尔属性写法是否统一
看似琐碎，但属性顺序混乱会显著拖慢多人协作时的 diff 阅读效率；布尔属性带等号（如 disabled="disabled"）虽能运行，却违反 HTML5 标准，且在 SSR 或某些解析器中可能引发意外行为。
使用场景：Vue/React 组件模板、服务端渲染（SSR）输出、静态 HTML 页面。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 属性顺序应严格按团队规范执行（推荐顺序：
class→id→data-*→src/href/value→title/alt→role/aria-*→tabindex） - 布尔属性（
disabled、checked、required、readonly）必须省略值，只写属性名：<input type="checkbox" checked>，而非<input type="checkbox" checked="checked"> -
alt属性不可为空字符串（alt=""），除非图像纯装饰且无语义；含信息图必须提供有效描述
预加载、资源提示与脚本加载策略是否合理
HTML 是资源调度的起点。把 <script> 放 <head> 里、漏掉关键 CSS 的 <link rel="preload">、或对非关键 JS 不加 defer，都会直接拖慢 LCP、INP 等核心 Web Vitals 指标。
性能影响：未 defer 的同步脚本会阻塞 DOM 解析；缺少 preconnect 会导致 DNS/TLS 建连延迟；preload 错误类型（如 preload JS 却未立即执行）反而增加内存压力。
-
<link rel="preload">只用于当前页面**立即需要**的关键资源（如首屏字体、关键 CSS、hero 图片），且必须指定as属性（as="font"、as="style"、as="image"） -
<link rel="preconnect">用于第三方域名（如 CDN、API 域名），但数量建议 ≤3 个，避免预连过多反拖慢 - 所有非内联、非模块化的 JS 必须带
defer（不阻塞解析，按顺序执行）或type="module"（自动 defer）；禁用async除非该脚本完全独立且无依赖 - Favicon 应提供多格式支持：
<link rel="icon" href="favicon.ico" sizes="any">+<link rel="icon" href="icon.svg" type="image/svg+xml">
无障碍（a11y）相关结构是否被遗漏或误用
很多团队把 a11y 当作“上线前补救项”，但 HTML 结构缺陷（如缺失 landmark、跳过 heading 层级、aria-hidden 乱用）一旦嵌入组件模板，就会批量污染全站，后期修复成本极高。
容易踩的坑：给整个 <header> 加 aria-hidden="true"（屏蔽了所有子元素）、用 <h1> 到 <h6> 但跳级（如 <h2> 后直接 <h4>）、动态插入内容后未触发 aria-live。
- 每个页面必须有且仅有一个
<main>，且应设id="main-content"并在跳转链接中引用（<a href="#main-content">跳转到主要内容</a>） - 所有交互控件（
<button>、<a>、<input>）必须支持键盘Tab导航和Enter/Space触发 - 动态更新区域（如搜索结果、通知弹窗）需设置
aria-live="polite"或"assertive"，并确保更新后焦点不丢失 - 不要用
aria-hidden="true"包裹整个功能区块（如侧边栏），而应精确控制语义节点可见性
