html语义化缺失、class命名混乱、doctype/lang缺失、布尔属性不规范等问题需立即修复：优先替换div为header/nav/main等语义标签，统一class命名规范，补全doctype和lang声明，布尔属性写全required="required"。
HTML语义化缺失导致SEO和可访问性失效怎么办
直接改，别等“重构大计划”。语义化不是锦上添花，而是底线——屏幕阅读器、搜索引擎、甚至现代CSS选择器都依赖它。很多团队卡在“不知道从哪改起”，其实只需盯住三类高频错误节点：<div class="header">、<code><div class="nav">、<code><div class="main">。
<p>实操建议：</p>
<ul><li>用浏览器开发者工具的“Accessibility”面板扫描，优先修复 <code>role 缺失或误用（如把 <nav></nav> 写成 <div role="navigation">）
<li>批量替换脚本比人工更可靠：用 <code>sed 或 VS Code 多光标，把 <div class="header"> → <code><header></header>，但注意保留原有 class（<header class="header"></header>）以便样式过渡
<main></main>、<nav></nav>、<footer></footer> 存在，再逐步下沉到 <article></article>、<section></section>；<time></time> 这类标签可延后，不影响主干class命名混乱让CSS维护成本翻倍怎么破
看到 box1、wrap2、content-left-new-fix 这类 class，基本等于在代码里埋雷。这不是风格问题，是协作阻塞点——新人不敢删、老手懒得理、样式冲突频发。
实操建议：
- 立刻停用所有带数字、缩写、模糊词（如
content、item）的 class；新 class 必须满足：能读出用途 + 能猜出结构，例如search-input-field比input-1强十倍 - 用 ESLint 的
stylelint插件加规则：selector-class-pattern: "^[a-z][a-z0-9-]*$"（强制 kebab-case）+max-nesting-depth: 3（防嵌套失控） - 旧 class 不强求一次性清理。给每个页面加个
data-migrated="true"属性，只对带该属性的 DOM 启用新 class 规则；未标记部分维持现状，避免牵一发而动全身
DOCTYPE缺失、lang未声明引发渲染兼容性问题
这类问题常被忽略，直到某天发现 IE11 或某些邮件客户端渲染错乱，才意识到不是“浏览器太老”，而是自己没交基础作业。 和 <code> 不是摆设，它们决定解析模式、字体回退、甚至表单验证行为。
实操建议：
- 用
grep -r "DOCTYPE" . --include="*.html"扫描全库，漏掉的文件补上标准声明；注意检查是否混入了这类过时写法 -
lang值必须与实际内容语言一致。中文站写zh-CN，繁体站用zh-TW，多语言站点按路由动态注入，别硬编码成en-US - CI 流程里加校验步骤：用
html-validate工具跑--rules "{\"doctype-html5\": \"error\", \"lang-required\": \"error\"}"，不通过直接阻断构建
布尔属性省略引号或写成 self-closing 导致解析异常
<input required> 看似简洁，但在某些 HTML 解析器（尤其是服务端模板引擎或邮件渲染器）中会被当成无效属性，变成 required="" 甚至直接丢弃。这不是“浏览器能跑就行”，而是跨平台一致性风险。
实操建议：
- 统一用
required="required"、disabled="disabled"—— 显式即安全，且与 JSX/TSX 的 props 习惯一致，降低团队认知切换成本 - 禁止
<img src="x">这种自闭合写法（HTML5 不支持），一律写成<img src="x">；XML/XHTML 场景另说，但当前绝大多数项目是 HTML5 - 用 Prettier 配置
htmlWhitespaceSensitivity: "strict"+quoteProps: "consistent"，让格式化自动修正引号和空格问题
最难的不是改代码，是让所有人同步接受“HTML不是随便写的标记”，而是接口契约的一部分。每次提交前多看一眼 lang、DOCTYPE、role，比事后调试兼容性问题省十倍时间。
