HTML5向后兼容HTML4网页，旧标签如<font><u>等仍被解析渲染，但语义弱或样式有差异；真正影响兼容性的是DOCTYPE触发的标准/怪异模式切换及API支持情况。
HTML5 在绝大多数情况下能直接渲染 HTML4 写的网页，不会出错——浏览器对 HTML 的解析是向后兼容的，不是“非此即彼”的切换。
HTML5 解析器默认处理所有旧标签
现代浏览器（Chrome、Firefox、Safari、Edge）都使用 HTML5 规范定义的解析算法，它明确支持 <font>、<center>、<u>、<b>、<i> 等 HTML4 甚至更早的标签。这些标签虽被 HTML5 标记为“不鼓励使用（obsolete / non-conforming）”，但仍被完整解析并渲染，只是语义弱或样式行为可能和预期略有差异。
常见现象：
-
<u>在 HTML5 中不再默认带下划线（部分浏览器已移除默认样式），而 HTML4 下通常有 -
<small>在 HTML5 中语义变为“附属细则”，字体尺寸可能比 HTML4 更小（取决于 UA stylesheet） -
<hr>在 HTML5 中是自闭合标签，但写成<hr></hr>也不会报错，解析器会自动忽略闭合标签
真正会出问题的地方：DOCTYPE 和 script/style 位置
旧网页若用 HTML4 的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 或干脆没 DOCTYPE，浏览器会进入“怪异模式（Quirks Mode）”；而显式声明 <!DOCTYPE html> 会触发“标准模式（Standards Mode）”。这不是 HTML5 本身的问题，而是渲染模式切换导致的布局/盒模型/JS 行为差异。
立即学习“前端免费学习笔记（深入）”；
典型表现：
- IE6–8 下
width包含 padding/border（怪异模式），标准模式下遵循 W3C 盒模型 -
document.body.scrollTop在怪异模式下有效，标准模式下需用document.documentElement.scrollTop - CSS 中
height: 100%在无明确父高时，怪异模式可能“意外生效”，标准模式下失效
HTML5 新特性在旧页面里不能直接用
如果你把一个纯 HTML4 页面的 DOCTYPE 换成 <!DOCTYPE html>，并不等于就能用 <video>、<canvas> 或 localStorage——这些功能依赖浏览器实现，和 DOCTYPE 无关。但反过来，你在旧页面里插入 <video src="a.mp4"></video>，只要浏览器支持该元素（Chrome 12+、Firefox 3.5+），它就会工作；不支持的浏览器（如 IE8）会忽略该标签，只显示 fallback 内容（如果有）。
安全做法：
- 用
Modernizr或if ('geolocation' in navigator)检测 API 可用性，而非依赖 DOCTYPE 判断 - 避免在旧项目中直接替换
<script type="text/javascript">为<script type="module">，后者需要模块化支持且不兼容旧加载逻辑 -
<input type="email">在不支持的浏览器中退化为普通text输入框，不影响功能，但客户端校验失效
验证器报错 ≠ 页面崩溃
用 W3C HTML Validator 检查一个 HTML4 页面加上 <!DOCTYPE html>，大概率会报一堆 “element X is obsolete” 或 “attribute Y is not allowed” 错误。这些是规范合规性提示，不是运行时错误。浏览器不会因为用了 <font color="red"> 就停止渲染或抛 JS 异常。
真正要警惕的是：
- 已废弃且被移除的接口，如
document.all（IE 特有，现代浏览器已彻底删除） - 被重定义行为的属性，如
border在<table>上，HTML5 中仅当值为"0"才等效于border="0"，其他数值会被忽略 - 未闭合的内联元素嵌套，如
<p><div>xxx</div></p>，HTML5 解析器会自动修正 DOM 结构（<div>被踢出<p>），可能导致 CSS 选择器失效
<!DOCTYPE html> <html> <head> <title>旧页面加 HTML5 DOCTYPE</title> </head> <body> <!-- 这行在 HTML4 是合法的，在 HTML5 是 obsolete，但所有浏览器都渲染 --> <font color="blue">Hello</font> <p><!-- 这行在 HTML4 不合法（p 里不能放 div），HTML5 解析器会自动修复 --> <p>Text <div>Inside</div></p> </body> </html>
最常被忽略的一点：DOCTYPE 只影响解析和渲染模式，不影响 JavaScript 执行环境或 CSS 引擎版本。所谓“升级到 HTML5”，本质是换了解析规则和启用了一组新 API，而不是给旧代码打补丁。旧页面跑得稳不稳，关键看是否无意中踩了标准模式与怪异模式的边界，而不是 DOCTYPE 本身。
