html质量标准应固化语义错误、可访问性缺失、模板语法污染三类问题，通过html-validate静态校验+eslint-plugin-vue/react规则（如vue/no-v-html）+白名单机制，在脚手架阶段强制拦截，而非依赖人工检查。
直接在脚手架生成阶段就把HTML质量标准“焊死”进项目骨架里，而不是靠人肉检查或后期补救。
HTML代码质量标准该固化哪些内容？
不是所有HTML问题都适合工程化拦截。重点盯住三类：语义错误（如<div>嵌套<code><h1></h1>）、可访问性缺失（如img缺alt、表单控件缺label）、模板语法污染（如Vue/React中未转义的v-html或dangerouslySetInnerHTML）。
- 语义层级错乱会破坏屏幕阅读器体验，且影响SEO权重传递
-
alt缺失在CI阶段被html-validate捕获后，能直接阻断PR合并 - 模板引擎里的危险API必须配合白名单机制，不能只靠开发自觉
用html-validate做静态校验，但别只跑一次
html-validate是目前最贴近W3C标准的校验工具，但它默认只检查文件后缀为.html的文件，对.vue或.tsx里的模板片段无效。
- 需配合
html-validate-loader（Webpack）或vite-plugin-html-validate（Vite），把校验逻辑注入构建流程 - 配置项里必须启用
accessibility规则集，并禁用宽松的deprecated类规则 - 关键陷阱：
html-validate默认不校验内联模板字符串，比如document.createElement('div').innerHTML = '<img src="x">'——这类动态HTML要靠ESLint插件eslint-plugin-no-inner-html补位
模板引擎里的HTML安全边界怎么划？
Vue和React都提供了明确的逃逸机制，但团队容易误用v-html或dangerouslySetInnerHTML来“快速解决样式问题”，结果埋下XSS隐患。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 在脚手架的
eslint.config.js中强制启用vue/no-v-html和react/no-danger规则 - 为允许使用的场景设白名单：仅限
renderHtml: (str) => sanitize(str)这类封装函数调用 - 生成项目时自动注入
DOMPurify依赖，并在package.json的scripts里加"lint:html": "html-validate src/**/*.html src/**/*.vue"
为什么HTML质量不能只靠格式化工具？
Prettier能统一缩进和引号，但对<button>点击</button>是否该用<input type="button">完全无感——它不理解语义。
-
prettier和html-validate职责必须分离：前者管“怎么写好看”，后者管“怎么写正确” - 常见翻车点：团队把
prettier当成万能药，在.prettierrc里加"htmlWhitespaceSensitivity": "ignore"，结果掩盖了空格导致的布局错位 - 真正有效的组合是：
html-validate+eslint-plugin-jsx-a11y+axe-core（运行时检测），三者覆盖静态、编译、运行三个阶段
HTML质量标准最难的不是配置，而是让每个开发者习惯性地把alt、aria-label、role当成和className一样必需的属性来写——脚手架能做的，是让漏写这些属性的成本远高于写上的成本。
