应使用w3c validator扫描或运行grep命令快速识别废弃标签；、、、、等已废弃，需用css替代，且、虽未废弃但语义弱于、。
怎么快速识别页面里还藏着哪些过时标签
浏览器不会报错，但<font></font>、<center></center>、<u></u>、<strike></strike>、<marquee></marquee>这些标签在 HTML5 中已废弃，继续用会削弱语义、干扰无障碍树，且部分被现代 CSS 完全替代。最直接的办法是用 w3c validator 扫描——它不只标“错误”，还会明确写出 Element font is obsolete 这类提示。
本地快速筛查可运行这条命令：grep -i -o "" index.html。注意：<b></b> 和 <i></i> 没被废弃，但语义弱于 <strong></strong> 和 <em></em>，需结合上下文判断是否该替换。
- 遇到
<font color="red"></font>，优先换成span+ CSScolor，别留内联样式 -
<center></center>几乎总是能用text-align: center或margin: 0 auto替代，保留它等于放弃响应式控制 -
<marquee></marquee>不仅废弃，且无无障碍支持、无标准行为，必须重写为 CSS 动画或 JS 实现
W3C Validator 报 Element img is not closed 是什么问题
这不是警告，是明确的规范级错误。HTML5 中 <img> 是自闭合标签，合法写法只有 <img src="x" alt="y">；<img src="x" alt="y"> 属于 XHTML 风格，在 HTML5 中容错但非标准；而 <img> 是非法嵌套，会导致后续所有标签层级偏移——浏览器会立刻中断解析并尝试修复，DOM 已不是你写的那样。
这类问题在 JS 动态插入 HTML 时尤其隐蔽：比如模板字符串里拼错了，innerHTML = "<img src="a">"，执行后 DOM 结构就乱了，但控制台不报错。
- 编辑器插件（如 Auto Close Tag）无法识别
<img>是否该闭合，容易盲目补 - CI/CD 中建议接入
html-validate，配置 rule"html-validate/no-self-closing": "error"，提前拦截 - 批量修复可用
tidy-html5 --fix --doctype html5，它比正则更可靠，能处理嵌套上下文
重构时把 div 换成 section 或 article 为什么反而出问题
语义标签不是 div 的同义替换，关键看内容是否具备「独立性」和「可分发性」。section 表示文档中一个主题明确的区块，article 更进一步，表示能单独存在、被 RSS 抓取或分享的内容单元。误用会导致辅助技术误读、SEO 权重稀释。
常见翻车点：
-
main全局只能出现一次，且不能是article、aside、nav的子元素；仪表盘多个卡片应改用section+aria-labelledby -
nav只包裹主导航链接，面包屑、分页、文章内锚点链接不属于它，否则 NVDA 的 N 键会跳过真正导航 -
header和footer必须是body或最近的article/section的直系子元素，嵌套错层会让屏幕阅读器丢失上下文
重构后 DOM 看着没问题，但屏幕阅读器读序混乱怎么办
视觉顺序 ≠ 语义顺序。即使结构用了正确标签，如果 tabindex 被滥用、CSS 用 float 或 position: absolute 打乱流式布局，或者没设 aria-label 补充缺失语义，无障碍树就会错乱。
验证方法很朴素：关掉 CSS，纯文本下能否按逻辑顺序阅读？Tab 键焦点是否从上到下、从左到右、符合视觉流？
- Lighthouse 的
logical-tab-order审计失败，通常指向tabindex="1"之类的手动干预，应优先用自然 DOM 顺序 - Chrome DevTools Elements 面板里右键任意节点 →
Break on → Attribute modifications，观察aria-*或role是否被 JS 动态覆盖 - 对
div包裹的按钮或交互区，别只加role="button"，必须配tabindex="0"和键盘事件监听，否则无法聚焦
真正难的不是换标签，而是让每个标签都承载真实语义；浏览器容错掩盖了结构缺陷，但机器不会替你理解内容——W3C Validator 报的第一条 error，往往就是整页语义崩塌的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
