html代码质量底线是“可验证、可追溯、可协作”，htmlhint必须覆盖doctype、lang、id、title、alt五类规则，并在ci build后执行，禁用规则需明确兜底措施。
HTML 代码质量没有“差不多就行”这回事——浏览器能容忍不闭合的 <div>，但人不能容忍三个月后自己都看不懂的结构；SEO 工具会忽略缺失的 <code>alt，但用户会因图片加载失败而流失。底线不是“能渲染”，而是“可验证、可追溯、可协作”。
htmlhint 配置文件必须覆盖这 5 类基础规则
很多团队把 htmlhint 当成格式检查器，只开 tag-pair 和 attr-lowercase，结果上线后才发现 title 重复、lang 缺失、id 冲突——这些都不是样式问题，是结构性缺陷。
-
doctype-first和doctype-html5必须启用：避免 IE 兼容模式触发，影响整个页面渲染逻辑 -
html-lang-require不只是 SEO 要求，更是屏幕阅读器解析语言的基础依据 -
id-unique和title-require是自动化测试（如 Cypress）定位元素的前提，缺一则 selector 失效 -
alt-require要配合白名单例外：第三方组件生成的<svg></svg>或装饰性<img>可用<!-- htmlhint alt-require: false -->内联关闭，但必须显式声明 -
attr-no-duplication在 Vue/React 模板中容易被忽略——比如v-bind:class和class同时存在，htmlhint会报错，这是 JSX/模板编译前的校验盲区
CI 流程里 htmlhint 的真实执行位置很关键
在 pre-commit 钩子里跑 htmlhint 看似合理，但实际会漏掉两类问题：一是 CMS 后台导出的 HTML 片段，二是构建产物中由 Webpack 插件（如 html-webpack-plugin）注入的动态内容。这些根本不会进 Git 暂存区。
- CI 中必须在
build后、deploy前执行：htmlhint dist/**/*.html，否则检查的是源码，不是最终交付物 - 不要依赖全局安装的
htmlhint：不同项目 Node 版本下规则行为可能不一致，始终用npx htmlhint或./node_modules/.bin/htmlhint - 对单页应用（SPA），需额外检查
index.html中的meta标签是否随环境变量正确注入——htmlhint本身不解析 JS，要用 Puppeteer 预渲染后检查 DOM
当 htmlhint 报错但页面看起来没问题时，先查这三处
常见现象是本地开发一切正常，CI 却卡在 htmlhint，错误信息像 "tag-pair: Tag 'div' is not closed"，但浏览器开发者工具里 DOM 完全闭合。这不是误报，是解析上下文差异。
- 检查是否混用了模板语法：比如
<div v-if="loading">{{ data }}</div>中，htmlhint把{{ }}当作普通文本，无法识别 Vue 的条件块边界，导致误判未闭合 - 确认是否启用了
ignore规则但路径写错："ignore": ["src/components/**"]对src/components/Modal.vue生效，但对src/views/Home.vue里的内联<template></template>不生效 - 留意 HTML 注释格式：
<!-- htmlhint tag-pair: false -->必须独占一行且前后无空格，否则htmlhint解析失败，整段跳过检查
真正难的不是让 htmlhint 通过，而是判断哪些规则该关、为什么关、关了之后谁来兜底。比如禁用 attr-value-double-quotes 是为了适配某些老旧 CMS 的单引号输出，那就得同步在 CI 里加一条正则校验：确保所有属性值至少被一种引号包裹，不能裸写 class=header ——底线思维，从来不是靠工具自动守住的。
