必须强制校验doctype和闭合标签:缺失会导致怪异模式及解析差异,、、缺失或错乱将引发ssr失败、seo异常与dom树错误;闭合标签错误会破坏dom结构、导致js不执行或样式失效。

HTML结构完整性是否必须强制校验DOCTYPE和闭合标签
必须。缺失 会导致 IE 进入怪异模式,现代浏览器虽默认标准模式,但部分解析行为(如 box-sizing、line-height)仍会因文档类型缺失而出现隐式差异;<code>、、 缺失或嵌套错乱,会使 SSR 渲染失败、SEO 抓取异常、DevTools DOM 树异常展开。
实操建议:
- CI 流程中集成
html-validate或htmlhint,配置doctype-first、require-closing-tags等规则为error级别 - 禁止用正则简单匹配“有没有
”,需用真实 HTML 解析器(如parse5)验证树结构 - 对模板引擎输出(如 Vue SFC 的
<template></template>、React JSX 转 HTML 片段),只校验片段级语义合理性,不强求完整文档结构
语义化标签的使用程度如何设定评审阈值
不能一刀切要求“所有 div 必须替换”,而应按上下文分级控制:主内容区(<main></main>)、导航(<nav></nav>)、页脚(<footer></footer>)等全局结构标签必须存在且唯一;局部模块(如卡片、列表项)允许保留 <div>,但若含标题、链接组、表单控件,则必须升级为 <code><section></section>、<article></article>、<form></form>。
常见误判点:
- 把
<div class="header"> 当成语义化 —— 实际需用 <code><header></header>,且一个页面最多一个主<header></header> - 在
<table> 内部强行用 <code><section></section>—— 表格结构自有语义,嵌套语义标签反而破坏可访问性 - 忽略
<aside></aside>的使用场景:仅用于与主内容相关但非核心的补充信息(如侧边栏推荐),而非所有浮动容器 -
aria-*属性滥用(如给普通<div> 加 <code>aria-role="button"却无键盘交互逻辑) - 颜色对比度不足(需工具扫描,但阈值可放宽至 4.0:1 而非严格 4.5:1,兼顾设计落地)
- 跳过导航链接(
<a href="#main"></a>)缺失 —— 重要但依赖产品形态,不宜硬卡 - 内联 JS(
<script>console.log(...)</script>)一律拒绝 —— 无法压缩、无法缓存、无法 sourcemap 定位 - 动态生成的初始化脚本(如
<script>window.__INIT_DATA__ = {...}</script>)允许,但需限定在末尾且不含业务逻辑 - 第三方统计脚本(如 GA、神策)允许异步加载,但必须通过
nonce或sha256-xxx满足 CSP 白名单
可访问性检查项哪些该进 PR 卡点,哪些只需人工提醒
<img> 缺 alt、<form></form> 控件缺 <label></label>、<button></button> 缺 type 属性这三项必须卡死 CI —— 它们直接导致屏幕阅读器无法操作、WCAG 2.1 A 级违规,且修复成本极低。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
其余项建议标记为 warn 并附人工说明:
内联样式和 script 标签在企业评审中如何差异化处理
内联 style 属性(style="color:red")必须禁止 —— 它绕过 CSS-in-JS 或 BEM 命名约束,无法被 PurgeCSS 清理,且破坏组件复用性;而 <style></style> 块在 HTML 文件中允许存在,但仅限于微前端子应用入口页或 CMS 输出页等不可控场景,且需声明 scoped 或加哈希类名前缀。
<script></script> 标签分三类处理:
/marketing/**),但豁免记录必须关联到具体负责人和时效,不能变成永久后门。










