必须启用attr-value-double-quotes规则，因无引号属性值遇空格、&、=或中文时会被浏览器截断解析，如href=contact us解析为href="contact"，导致us>变成文本；所有属性值应统一用双引号包裹。
HTML属性不规范，不是“浏览器能渲染就行”的小事——它直接导致解析歧义、JS选择器失效、SEO降权、无障碍工具误读，甚至在某些WebView里完全崩溃。
attr-value-double-quotes 规则为什么必须启用
引号缺失看似无害，但一旦属性值含空格、&、=或中文，浏览器会截断或报错。比如 <a href="contact" us>联系我们</a> 实际被解析为 href="contact"，后面 us> 变成文本内容。
- 所有属性值必须用双引号包裹，
alt="产品首页"正确，alt=产品首页错误 - 布尔属性（如
required、disabled）也需显式赋值：required="required"或简写为required（HTML5 允许），但不能写成required=""或required=false - 避免单引号混用：JS 字符串常用单引号，若 HTML 里也用单引号（
onclick='alert("x")'），嵌套容易出错；统一用双引号可减少转义负担
attr-lowercase 和 attr-no-duplication 的实际影响
HTML 属性名大小写敏感性在不同解析器中不一致：Chrome 通常宽容，但 Android WebView、旧版 Safari 或服务端预渲染（SSR）可能直接拒绝 SRC 或 Alt 这类大写属性。
-
attr-lowercase强制所有属性名小写：class、id、data-id都必须小写，CLASS或Data-ID会被 HTMLHint 报错 -
attr-no-duplication拦截重复定义，比如<input type="text">—— 后面的type会覆盖前面的，但开发者往往意识不到，尤其在模板拼接或 JS 动态插入时 - 自定义
data-属性必须全小写+短横线：data-user-id合法，data-userID或data_userid不被标准认可，部分无障碍工具无法识别
alt-require 和 id-unique 这类语义规则怎么落地
它们不是“锦上添花”，而是可访问性和 DOM 稳定性的底线。屏幕阅读器依赖 alt 描述图片，JS 通过 id 获取元素 —— 若缺失或重复，功能就断了。
-
alt-require不只是检查是否存在alt，还校验值是否为空：<img src="logo.png" alt="">和<img src="logo.png" alt>都算违规；空值应明确写alt=""（表示装饰图），否则默认视为缺失 -
id-unique对动态生成页特别关键：Vue/React 组件复用时容易重复输出相同id，比如多个<input id="search">；HTMLHint 默认只扫静态文件，需配合"files": ["**/*.html", "!**/*.vue"]排除模板文件，或改用运行时检查 -
lang属性必须出现在标签上，且值要合法：正确，或不被主流无障碍工具识别
配置 .htmlhintrc 时最容易忽略的三个细节
很多人复制粘贴示例配置就以为万事大吉，但实际项目中常因这几个点失效：
- 规则启用后没配
files，导致 HTMLHint 只检查根目录下index.html，漏掉src/pages/下所有文件 - 没排除构建产物路径，比如
"!dist/**/*.html"缺失，HTMLHint 会对已压缩的 HTML 报一堆“缩进错误”“多余空格” -
head-valid-content-model规则要求<title></title>必须在内，且不能和<script></script>交叉 —— 但很多 Vue 单文件组件把<script></script>放在里，需在配置中禁用该规则或调整模板结构
真正起效的配置不是堆砌规则，而是匹配你项目的 HTML 生成方式：手写页、模板引擎输出、还是 SSR 渲染。规则再严，绕过它的写法永远存在；关键是让校验跑在 CI 流程里，而不是只靠本地编辑器提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
