必须启用tag-pair规则，因浏览器自动修复未闭合标签仅保证显示，不保证语义正确；该规则强制校验开闭匹配，防止DOM结构错误，但对JS模板字符串、构建注入内容等场景需额外配置或配合其他工具校验。
为什么 tag-pair 规则必须启用，且不能只靠浏览器渲染判断
浏览器会自动修复未闭合标签，比如把 <p>内容</p>
<div>嵌套</div>
<p>内容</p>
<div>嵌套</div>，但语义已错。校验器报 Element div is not allowed here 不是警告，是结构非法。真正要卡住的不是“能不能显示”，而是“是否被解析为预期 DOM”。tag-pair 规则强制检查开闭匹配，包括自闭合标签（如 <img alt="前端自动化校验：将标签配对与语义规范纳入HTML代码质量核验" > 在 HTML5 中可不写斜杠，但 <br>必须一致）。
- 常见漏检场景：JS 模板字符串里拼接的 HTML 片段（
innerHTML = `<div>${text}</div>`），htmlhint默认不扫描 JS 文件，需额外配置htmlvalidate或预处理提取 - Vue/React 组件中
v-html或dangerouslySetInnerHTML注入的内容，必须单独提取校验，否则规则完全失效 - 构建工具（如 Vite）在
index.html中注入的注释或变量（<!-- built at ... -->），会干扰tag-pair判断，需在 CI 前清理模板
htmlhint 的语义规则怎么配才不形同虚设
默认 .htmlhintrc 里只开了基础语法项，id-unique、attr-lowercase 这类属于格式规范，对语义无约束。真要卡语义，得手动加这几条：
-
doctype-first：确保<!DOCTYPE html>在第一行，否则整个文档进 Quirks Mode，后续所有语义检查失去意义 -
head-title-require：强制<head>内有且仅有一个<title>，避免 SEO 失效 -
attr-no-duplication：防止<div id="header" id="nav">这种冲突属性，影响 JS 选择器稳定性 -
element-permitted-content：启用后会报<p><section></section></p>这类嵌套违规，但性能略降，建议只在 CI 阶段开启
注意：htmlhint 不校验 ARIA 属性合法性（如 aria-role="button" 拼错），这类需搭配 axe-core 或 html-validate 的 valid-aria 规则。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
CI 流程里跑 htmlhint 容易漏掉的三个执行细节
本地 npx htmlhint src/*.html 能过，CI 却失败，大概率栽在这三处：
- 路径通配符没转义：GitHub Actions 的
run: npx htmlhint **/*.html在 shell 里可能被提前展开，应写成npx htmlhint \"**/*.html\"或改用find+xargs - 忽略文件没生效：.htmlhintrc 里的
ignore是相对路径，CI 环境工作目录常为/github/workspace，需写全路径或用 glob 模式（dist/**/*.html） - 编码问题：Windows 下生成的文件带 BOM 头，
htmlhint读取时首行变成<!DOCTYPE html>，直接触发doctype-first报错，CI 前加一步sed -i '1s/^\xEF\xBB\xBF//' *.html
动态渲染页面的校验为什么不能只靠 htmlhint
htmlhint 只分析静态 HTML 字符串，对 v-if、ngIf、JSX 条件渲染等内容完全不可见。比如一个 <header v-if="showHeader">，若 showHeader 为 false，最终 DOM 根本没有 <header>，但 htmlhint 仍会检查它是否符合语义——这毫无意义。
真实校验链路得补两环：
- 构建后校验：用 Puppeteer 启动无头 Chrome，访问生成的
dist/index.html，再用page.content()获取实际渲染后的 HTML 字符串，喂给html-validate - 运行时校验：在页面加载后注入
axe.run()，捕获region-no-label、heading-order等动态语义问题，结果上报到日志系统 - 模板层校验：对 Vue 的
.vue文件，用eslint-plugin-vue的vue/valid-template-root和vue/html-closing-bracket-newline规则，在源码阶段拦截问题
语义规范不是写完就结束的事，它横跨模板、构建、渲染三层。漏掉任何一层，校验都只是纸面合规。
