html标签语义错误会直接触发cr拒绝，因其不是风格问题而是结构性错误：如用替代、包裹标题、内放onclick，均导致无障碍、seo及浏览器聚焦逻辑故障。
HTML 标签语义错误会直接触发 CR 拒绝
语义错误不是“写得不够好”，而是“写了就错”。比如用 <div> 替代 <code><button></button> 处理可点击操作，或用 <span></span> 包裹标题而不加 <h1>–<h6></h6>
</h1>，这类问题在无障碍、SEO、甚至部分浏览器自动聚焦逻辑中都会引发实际故障。
审查时重点看三类：是否该用语义标签却用了通用容器；是否滥用 <div> / <code><span></span> 掩盖结构缺失；是否把交互元素写成纯静态标签（如 <p></p> 里放 onclick）。
- 表单控件必须有对应
<label></label>或显式aria-labelledby，否则算硬性不通过 -
<img>缺alt属性且非装饰图，一律标为阻断项 <table> 仅用于展示数据，不得用于页面布局 —— 即使渲染正常也视为违规<h3>自定义属性和模板语法被标红，不等于 HTML 有错</h3> <p>VS Code 或 WebStorm 里出现红色波浪线，90% 不是 HTML 写错了，而是校验器不认识 <code>th:href、v-if、:class这类扩展语法。强行删掉这些属性去“消除报错”，反而破坏业务逻辑。正确做法是让编辑器知道“这不是纯 HTML”。例如：
- Thymeleaf 项目：在
settings.json中加"files.associations": {"*.html": "thymeleaf"}，并安装thymeleaf-language-server插件 - Vue SFC：禁用 Vetur，启用 Volar；确保
.vue文件被识别为vue类型，而非html - 纯前端项目含
data-属性：关掉html.validate.scripts和html.validate.styles，避免内联 JS/CSS 触发误报
HTML 中的 JS/CSS 内联逻辑必须剥离
CR 过程中一旦发现
<script></script>或<style></style>块出现在 HTML 文件里，且内容超过 3 行或含业务逻辑，就直接打回。这不是风格偏好，而是可维护性红线。原因很实在：内联脚本无法被 webpack/vite 正确 tree-shake；样式无法复用、无法做 CSS-in-JS 隔离；更重要的是，它让 HTML 文件同时承担结构、样式、行为三层职责，违反单一职责原则。
- 简单初始化逻辑（如
document.body.classList.add('loaded')）允许保留，但需加/* inline-init */注释标记 - 任何含条件判断、函数定义、API 调用的
<script></script>必须移入独立 JS 模块 -
<style></style>仅允许极简重置（如body { margin: 0 }），其余全部进 CSS/SCSS 文件
注释和空格不是“无关紧要”，而是可读性信号
HTML 注释不是装饰，它是结构说明书。没有注释的组件级区块（如
<header></header>、<aside></aside>、复杂表单区域）会让后续维护者花 2 分钟猜这段 DOM 是干啥的。空格和换行也不是格式洁癖——压缩工具会自动处理生产环境 whitespace，但开发阶段混乱缩进会导致 diff 失效、git blame 错位、多人协作 merge 冲突频发。
- 每个语义区块起始处加注释，格式统一为
<!-- header start -->/<!-- header end --> - 嵌套层级超过 3 层时，每层开头必须空一行，禁止“挤在一起”的 HTML
- 禁止在标签内写长行 HTML，如
<div class="a b c d e f" data-id="123" data-type="user" data-status="active"> —— 应拆成多行，属性各占一行<p>真正难的不是写对标签，而是判断什么时候该用什么标签、什么时候该拆文件、什么时候该加注释。这些决策点没有绝对标准，但每次 CR 讨论都在固化团队对“可维护 HTML”的共识 —— 它不会出现在 ESLint 规则里，但会刻在每次 <code>git diff的直觉中。
- Thymeleaf 项目：在
