HTML工程化落地关键在于将校验、语义、降级内化为开发者的肌肉记忆，需通过htmlhint CLI集成构建流程、强制语义嵌套与频次约束、HTML层双声明离线降级、alt与label严格遵循无障碍硬性规范，并落实到lint、snippet和PR检查清单。
HTML 工程化落地的关键不在堆工具，而在把校验、语义、降级变成写代码时的肌肉记忆——准入门槛低，恰恰是因为规则够明确、反馈够即时、错误够具体。
HTMLHint 配置必须覆盖构建流程，不能只靠编辑器提示
VS Code 里装了 HTMLHint 插件，不代表工程化就落地了。本地编辑器提示容易被忽略，而 CI 流程中缺失校验，会让 alt 缺失、lang 错写、<main></main> 嵌套在 <header></header> 里的问题直接进测试环境。
- 必须在构建脚本（如 Vite 插件或 Webpack loader）中集成
htmlhintCLI，失败时中断构建 -
.htmlhintrc至少启用：attr-lowercase、attr-no-duplication、id-unique、img-alt-require、head-script-disabled - 对 JS 动态插入的 HTML 片段（如模板字符串、
innerHTML赋值），需额外用remark-html+remark-lint在源码层校验
语义标签不是“能用就用”，而是有强制嵌套与出现频次约束
把 <section></section> 当 <div> 用，或者一个页面塞三个 <code><main></main>，表面是结构升级，实际是工程倒退——它让自动化工具失效、屏幕阅读器逻辑错乱、SEO 权重稀释。
-
<main></main>必须且只能出现一次，且不能出现在<article></article>、<aside></aside>、<nav></nav>或<header></header>内部 -
<section></section>必须自带主题，且应有对应层级的标题（<h2></h2>–<h6></h6>），否则优先用<div> <li> <code><nav></nav>只包裹真正用于跳转的链接集合；搜索框、登录入口、广告位都不属于导航，硬塞进去会干扰辅助技术焦点流 - 静态资源用双
<link>+<script>声明：一个指向离线包路径（加data-offline标记），一个指向 CDN 在线地址（加data-online），初始设为disabled - 用
document.createElement('link')动态启用在线资源时，必须同步触发media属性切换或onload回调，避免样式未就绪就渲染 - 关键 CSS 必须内联（
<style>），并保留一份最小可用版在线 fallback，防止离线包 CSS 加载失败导致整个页面无样式 -
<img>的alt值必须描述图像所承载的信息或功能，而非外观；纯图标按钮必须配alt="筛选"或通过aria-label补充 -
<input>必须显式绑定<label for="xxx">，不能只靠aria-label；后者不触发原生表单提交行为，也不被所有读屏器一致支持 - 动态生成的表单控件（如 JS 渲染的搜索框），必须同步生成唯一
id并确保for与id匹配，否则label点击无法聚焦输入框
离线包降级不是“JS 切路径”，而是 HTML 层面的资源双声明
只靠 fetch() 失败后改 script.src，无法解决首屏白屏、样式闪动、SEO 内容丢失等问题。真正的降级必须从 HTML 源码出发，在服务端或构建时就埋好回退路径。
立即学习“前端免费学习笔记（深入）”；
alt 和 label 不是“补全就行”，而是无障碍可访问性的硬性开关
alt="" 对装饰图合理，但对带操作语义的图标（如“筛选”按钮里的漏斗图标）设为空，等于关掉了键盘用户和屏幕阅读器的操作入口——这不是体验问题，是功能不可用。
最容易被忽略的点是：HTML 工程化效果不取决于你用了多少新标签或工具，而取决于你能否在 git commit 前，一眼看出这段 HTML 是否满足 <main></main> 出现次数、alt 是否冗余、lang 是否生效——这需要把规则压进 lint、压进 snippet、压进 PR 检查清单，而不是靠人眼复查。
