B06 版本差异与兼容

摘要：HTML 的标签集在二十多年里经历了三次形态：表现型标签（font、center）、框架集结构、语义化结构。旧页面仍在运行，新写法已经定型，两者混用时会出现「能显示但不合规」的状态。本文给出一份废弃标签的替代对照表，说明三层回退的写法，并给出判断某特性能否使用的三种依据。
关键词：兼容性，废弃标签，回退，特性检测，渐进增强

所属：frontend/html / B-进阶 ｜上一篇：B05-结构化数据 ｜下一篇：C00-总结 ｜返回：B00-总结

1 引言

维护旧项目时，先要回答三个问题：这个标签还能用吗、这个新写法在目标浏览器里可用吗、不可用时退到哪一层。三个问题各自有依据，不能靠记忆。

本文给出替代对照、回退写法与判断依据。范围见表 1-1。

项	本文覆盖	本文不覆盖
废弃标签	表现型标签与框架集的替代	完整 HTML4 到 HTML5 迁移
回退	`source` 降级、`noscript`、内容替代文本	polyfill 实现与打包配置
判断依据	规范状态、兼容表、特性检测	浏览器内核实现细节

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
文件	`html-practice/compat.html`	编码 UTF-8
浏览器	两类以上浏览器（Chrome 与 Firefox 或 Safari）	便于对比差异
前置	B02、B04	能写 picture 与 details

3 原理与实现

3.1 三层回退

回退不是「写两份页面」，而是让浏览器按自己的能力逐层取值，如图 3-1 所示。

flowchart TD
    A["元素与候选资源"] --> B{"支持首选格式或能力"}
    B -->|"是"| C["使用首选"]
    B -->|"否"| D{"支持第二候选"}
    D -->|"是"| E["使用第二候选"]
    D -->|"否"| F["使用基础资源"]
    F --> G{"仍不可用"}
    G -->|"是"| H["显示元素内部文本与链接"]

图 3-1 资源与能力的回退顺序

图上可见：回退链由声明顺序决定，写在后面的兜底项必须是任何浏览器都能处理的形式。

3.2 回退写法

<!-- 运行环境：Chrome 130+ 与 Firefox 132+；对比两者差异 -->
<picture>
  <source type="image/avif" srcset="./assets/images/cover.avif" />
  <source type="image/webp" srcset="./assets/images/cover.webp" />
  <img src="./assets/images/cover.jpg" alt="雨天街道，路面反光" width="960" height="540" />
</picture>

<video controls width="640" poster="./assets/images/video-cover.jpg">
  <source src="./assets/media/rain.webm" type="video/webm" />
  <source src="./assets/media/rain.mp4" type="video/mp4" />
  <p>当前浏览器不支持内嵌视频，可<a href="./assets/media/rain.mp4">下载观看</a>。</p>
</video>

<noscript>
  <p>本页的搜索功能依赖脚本，禁用后仍可<a href="./index.html">回到首页浏览内容</a>。</p>
</noscript>

<details>
  <summary>兼容性说明</summary>
  <p>不支持 details 的旧版本浏览器会直接展开内容，不影响阅读。</p>
</details>

常见废弃标签与替代见表 3-1。

废弃标签	原用途	替代写法	说明
`center`	居中	CSS `text-align` / `margin`	表现交由样式
`font`	字号与颜色	CSS `font-*`、`color`	语义与表现分离
`big`、`strike`、`tt`	字号与删除线	`strong`、`del`、`code` 或 CSS	语义标签优先
`marquee`	滚动文字	CSS 动画 + `prefers-reduced-motion`	需尊重降低动效偏好
`frame`、`frameset`	页面分栏	`iframe` 或 CSS Grid	框架集已从规范中移除
`applet`	Java 小程序	`object` / `embed` 或直接链接	插件机制已淘汰
`acronym`	缩写	`abbr`	名称统一
`bgsound`	背景音乐	`audio`	自动播放受浏览器限制

判断某特性能否使用，依据见表 3-2。

依据	适用范围	使用方式
规范状态	元素是否被规范收录	查 HTML 标准目录，标注为非规范即不用
兼容数据表	目标浏览器版本覆盖率	查 MDN 兼容表或 Can I use 的覆盖比例
运行时检测	单个能力是否可用	`'属性' in element` 或 `CSS.supports()`
构建期检测	依赖打包链的场景	由工具链按目标浏览器生成前缀与回退

规则三条：优先用「任何浏览器都能渲染」的兜底内容；不支持的标签写出来不会报错，只会静默失效，因此废弃标签必须替换而不是保留；特性检测放在运行时，覆盖比例判断放在设计阶段，两者不能互相替代。

4 验证与讨论

在 Chrome 与 Firefox 中分别打开 compat.html，对比图片请求的格式与视频播放情况。
开发者工具中禁用 JavaScript（Settings → Debugger → Disable JavaScript），刷新，确认 noscript 内容出现。
打开 Elements 面板，检查浏览器是否对 frame 等废弃标签做了纠正或忽略。
执行 'open' in document.createElement('details')，返回 true 即表示当前浏览器支持该元素。

检查项	预期结果	说明
格式回退	两浏览器请求的图片格式可能不同	`source` 顺序生效
视频兜底	不支持时显示下载链接	内部文本生效
无脚本	显示 `noscript` 提示与链接	渐进增强
废弃标签	检查器中被标记为未知元素	静默失效，不报错
特性检测	返回布尔值	用于分支逻辑

讨论与局限。 兼容数据表只给覆盖比例，不给具体设备；企业内部环境固定浏览器版本时，可以只按该版本判断。另 noscript 内容不会被脚本动态更新的数据覆盖，适合放静态说明而非功能。

5 常见问题

现象	原因	处理
旧页面中字体标签无法覆盖	`font` 属性优先级高于外部样式	替换标签，而不是用 CSS 强行覆盖
avif 在旧浏览器显示破图	图片仍用 `img src` 指向 avif	改用 `picture` 与格式回退
禁用脚本后页面全白	内容由脚本渲染，无兜底文本	补 `noscript` 或改为服务端渲染
视频自动播放被拦截	浏览器限制有声自动播放	加 `muted` 或改为用户触发
特性检测写在样式属性上	误用 `'display' in div.style`	用 `CSS.supports()`

6 结论

序号	结论	依据
1	回退链由声明顺序决定，兜底项必须通用	图 3-1
2	废弃标签静默失效，必须替换	表 3-1
3	规范状态、兼容表、运行时检测三者互补	表 3-2
4	禁用脚本后的可用性是兼容性的下限	4 节步骤 2

上一篇：B05-结构化数据
下一篇：C00-总结
返回：B00-总结｜科目 README

参考文献

[1] MDN Web Docs · HTML 元素参考与废弃元素，https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element（访问于 2026-10-29）
[2] HTML Living Standard · Obsolete features，WHATWG，https://html.spec.whatwg.org/multipage/obsolete.html（访问于 2026-10-29）