htmlhint配置不生效需检查三处硬性条件：文件名必须为.htmlhintrc（json）或.htmlhintrc.js（js），必须置于项目根目录且未被.gitignore忽略，vs code中需重启而非重载窗口并确认settings.json中启用"html.validate.attributes": true。
HTMLHint 配置不生效？检查这三处硬性条件
HTMLHint 不是装上就能用的“开箱即用”工具，配置文件缺失、路径错误或规则未启用，都会导致它完全静默。最常见的是 .htmlhintrc 文件名拼错（比如写成 .htmlhint.json 或漏掉 r），或者放在了项目根目录之外的位置。
- 必须使用标准文件名：
.htmlhintrc（JSON 格式）或.htmlhintrc.js（JS 导出格式），其他命名一律无效 - 文件必须置于项目根目录下，且不能被
.gitignore或构建工具忽略 - 命令行执行时需明确指定入口 HTML 文件路径，例如：
npx htmlhint src/index.html；若用 VS Code 插件，则需确认插件已启用且工作区已加载该配置
语义化标签误用：不是加了 <header></header> 就算合格
很多同学把 <header></header> 当作“顶部 div”，在每个卡片、每个模块里都套一层，结果页面里出现十几个 <header></header>。这违反了语义——<header></header> 应仅用于整个页面或一个 <section></section>/<article></article> 的页眉区域，不是视觉容器。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<nav></nav>必须包裹真正用于导航的链接集合，不能只是几个按钮或图标 -
<main></main>在整个文档中只能出现一次，且不应嵌套在<article></article>或<section></section>内部 - 用
<time datetime="2026-06-30">今天</time>替代纯文本日期，机器可读性才真正生效
属性值不加引号？浏览器能容错，但构建工具会报错
写 <img src="logo.png" alt="公司标识"> 看似能跑通，但在 Vite/Webpack 等构建流程中，这类无引号写法会被解析器直接截断——logo.png alt=公司标识 被当作一个整体字符串，导致资源路径失效或属性丢失。W3C 规范也明确要求所有属性值必须用引号包裹。
- 统一用双引号：
class="user-card"，而非单引号或不加引号 - 布尔属性也需显式赋值：
required="required"，而不是required（后者在某些校验工具中会警告） - 路径中的斜杠方向要一致：Windows 下写
./images/icon.svg，别混用反斜杠\
响应式失效？问题常出在 @media 之前就崩了
很多人调了半天 @media (max-width: 768px)，发现手机上还是乱，最后发现根本原因是 HTML 结构本身就有嵌套错误——比如 <p></p> 里塞了 <div>，浏览器自动补全后 DOM 层级错乱，CSS 选择器压根没匹配到目标元素。
<ul>
<li>先用浏览器开发者工具的 Elements 面板，折叠查看 DOM 树是否“看起来像你写的那样”</li>
<li>再运行 <code>npx htmlhint --config .htmlhintrc src/*.html，重点看 attr-no-duplication、attr-value-not-empty、id-unique 这类规则是否报错
viewport meta 标签存在且正确：<meta name="viewport" content="width=device-width, initial-scale=1">
htmlhint，以及在 Elements 面板里多点两下“刷新后检查 DOM 实际结构”。
