HTML代码质量必须嵌入全生命周期，语义化标签需在DOM生成阶段强制落地，CI中集成html-validate、构建后用w3c-validator-cli全量校验，AI生成HTML须经Harness过滤，所有环节均设不可绕过门禁。
HTML代码质量不是靠“写得漂亮”就能保障的，它必须嵌入开发、测试、构建、部署、监控的每个环节——脱离生命周期谈质量，等于在沙上筑塔。
语义化标签必须在DOM生成阶段就强制落地
很多人把语义化当成“后期优化”，等页面跑起来再替换 <div class="header"> 为 <code><header></header>。这已经晚了：无障碍树（Accessibility Tree）在首次解析时就固化，JS动态替换无法补救；SEO爬虫也不会二次抓取；W3C验证工具也只检查初始HTML源码。
- 所有模板引擎（如Vue SFC、React JSX、EJS）中，
<header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<footer></footer>必须作为基础语法使用，禁用“语义化开关”式配置 - CI流程中加入
html-validate，规则必须启用require-valid-role和require-semantic-elements - VS Code 的
html.suggest.html5要设为true，同时禁用emeraldwalk.runonsave类插件对HTML的自动包裹（它常把<nav></nav>包进无意义的<div>） <h3>class命名规范需在组件编译期完成校验</h3> <p>BEM不是命名习惯，而是CSS作用域契约。一旦允许 <code>card-title或menu_item这类非标准写法进入构建流程，后续所有样式隔离、主题切换、自动化重构都会失效。- Webpack/Vite插件如
postcss-bem-linter必须接入build阶段，而非仅开发时提示 - 禁止在
class属性中拼接字符串：class="btn btn--${size} ${disabled ? 'btn--disabled' : ''}"→ 改用clsx或class-variance-authority等类型安全方案 - ESLint插件
eslint-plugin-html需配合自定义规则，拦截class值中出现下划线、大写字母、空格或内联样式关键词（如red-text）
HTML验证不能只靠编辑器插件
VS Code的
HTMLHint只能检查单文件，但真实项目里大量HTML来自服务端渲染（SSR）、CMS注入、JSX编译产物或微前端子应用。这些路径下的HTML根本不会被编辑器扫描。
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 构建后必须运行
w3c-validator-cli对产出的index.html及所有静态路由HTML做全量校验 - 对动态生成内容（如通过
document.write或innerHTML插入的片段），需在测试环境用 Puppeteer 启动真实浏览器，执行document.doctype和document.querySelectorAll('*:not([role])').length等断言 - 禁止将
html-validate的ignore配置提交进仓库——它会成为技术债黑洞，尤其当团队引入新成员时
AI生成HTML必须过Harness层过滤
DeepSeek V3、Qwen QwQ32B 等模型生成的HTML看似规范，但它们默认不感知你的项目约束：比如你用的是 Tailwind + CSS Modules，而模型输出的是全局
.card__title和内联style。直接合并=埋雷。- 所有AI生成的HTML必须经过自定义Harness脚本处理：自动重写
class前缀、剥离内联style、将<img alt="全生命周期视角下提升HTML代码质量的工程化模型" >补全loading="lazy"和decoding="async" - 在Git Hook中拦截
.html文件提交，调用ai-html-sanitizer --project-config .aihtmlrc，未通过则拒绝提交 - 禁止在PR描述里写“AI生成，已人工审核”——审核动作必须可复现、可审计、可回滚，而不是依赖某个人的主观判断
真正卡住HTML质量升级的，从来不是“会不会用
<section></section>”，而是构建流水线里有没有一道不可绕过的门禁，以及当有人想临时绕过时，系统是否真的拦得住。 - Webpack/Vite插件如
