html工程化落地关键在于将校验、语义、降级内化为开发者的肌肉记忆，需通过htmlhint cli集成构建流程、强制语义嵌套与频次约束、html层双声明离线降级、alt与label严格遵循无障碍硬性规范，并落实到lint、snippet和pr检查清单。

HTML 工程化落地的关键不在堆工具，而在把校验、语义、降级变成写代码时的肌肉记忆——准入门槛低，恰恰是因为规则够明确、反馈够即时、错误够具体。

HTMLHint 配置必须覆盖构建流程，不能只靠编辑器提示

VS Code 里装了 HTMLHint 插件，不代表工程化就落地了。本地编辑器提示容易被忽略，而 CI 流程中缺失校验，会让 alt 缺失、lang 错写、<main></main> 嵌套在 <header></header> 里的问题直接进测试环境。

• 必须在构建脚本（如 Vite 插件或 Webpack loader）中集成 htmlhint CLI，失败时中断构建
• .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> 只包裹真正用于跳转的链接集合；搜索框、登录入口、广告位都不属于导航，硬塞进去会干扰辅助技术焦点流

离线包降级不是“JS 切路径”，而是 HTML 层面的资源双声明

只靠 fetch() 失败后改 script.src，无法解决首屏白屏、样式闪动、SEO 内容丢失等问题。真正的降级必须从 HTML 源码出发，在服务端或构建时就埋好回退路径。


Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
下载
• 静态资源用双 <link> + <script></script> 声明：一个指向离线包路径（加 data-offline 标记），一个指向 CDN 在线地址（加 data-online），初始设为 disabled
• 用 document.createElement('link') 动态启用在线资源时，必须同步触发 media 属性切换或 onload 回调，避免样式未就绪就渲染
• 关键 CSS 必须内联（<style></style>），并保留一份最小可用版在线 fallback，防止离线包 CSS 加载失败导致整个页面无样式

alt 和 label 不是“补全就行”，而是无障碍可访问性的硬性开关

alt="" 对装饰图合理，但对带操作语义的图标（如“筛选”按钮里的漏斗图标）设为空，等于关掉了键盘用户和屏幕阅读器的操作入口——这不是体验问题，是功能不可用。

• <img> 的 alt 值必须描述图像所承载的信息或功能，而非外观；纯图标按钮必须配 alt="筛选" 或通过 aria-label 补充
• <input> 必须显式绑定 <label for="xxx"></label>，不能只靠 aria-label；后者不触发原生表单提交行为，也不被所有读屏器一致支持
• 动态生成的表单控件（如 JS 渲染的搜索框），必须同步生成唯一 id 并确保 for 与 id 匹配，否则 label 点击无法聚焦输入框

最容易被忽略的点是：HTML 工程化效果不取决于你用了多少新标签或工具，而取决于你能否在 git commit 前，一眼看出这段 HTML 是否满足 <main></main> 出现次数、alt 是否冗余、lang 是否生效——这需要把规则压进 lint、压进 snippet、压进 PR 检查清单，而不是靠人眼复查。