要区分 HTML（通常指 HTML4 及更早版本）和 HTML5，主要可以从以下关键方面进行比较：
一、文档声明区别
<!-- HTML4 文档声明 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 文档声明 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 文档声明（极简） -->
<!DOCTYPE html>
二、语义化标签对比
| 用途 | HTML4 标签 | HTML5 新标签 |
|---|---|---|
| 头部区域 | <div class="header"> |
<header> |
| 导航栏 | <div class="nav"> |
<nav> |
| 内容区块 | <div class="section"> |
<section> |
| 独立文章 | <div class="article"> |
<article> |
| 侧边栏 | <div class="sidebar"> |
<aside> |
| 页脚 | <div class="footer"> |
<footer> |
| 主要内容区 | <div class="main"> |
<main> |
✅ HTML5 通过语义化标签取代了泛滥的
<div>，提升可读性和SEO
三、多媒体支持差异
<!-- HTML4 依赖插件 -->
<object data="video.mp4">
<embed src="video.mp4"> <!-- 兼容性写法 -->
</object>
<!-- HTML5 原生支持 -->
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
四、图形技术演进
<!-- HTML4 仅支持静态图片 -->
<img src="image.png" alt="示例">
<!-- HTML5 新增矢量绘图能力 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
<!-- SVG 内联支持 -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" fill="yellow" />
</svg>
五、表单功能增强
| 功能 | HTML4 | HTML5 |
|---|---|---|
| 输入类型 | 仅基础类型(text/password) | email/url/number/date color/range/search |
| 表单验证 | 需JavaScript实现 | 原生验证 (required/pattern) |
| 提示占位符 | 无直接支持 | placeholder 属性 |
| 自动聚焦 | 需JS代码 | autofocus 属性 |
<!-- HTML5 表单示例 -->
<input type="email" placeholder="输入邮箱" required>
<input type="date" min="2020-01-01">
<input type="range" min="0" max="100">
六、API 革新对比
| 功能 | HTML4 | HTML5 |
|---|---|---|
| 本地存储 | Cookie (4KB限制) | localStorage/sessionStorage (5MB+) |
| 地理位置 | 无 | Geolocation API |
| 多线程 | 无 | Web Workers |
| 实时通信 | 轮询 | WebSocket |
| 离线应用 | 无 | Application Cache |
| 拖放交互 | 需复杂JS | 原生拖放 API |
七、兼容性处理
<!-- 让旧浏览器支持HTML5标签 -->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
八、代码对比示例
<!-- HTML4 典型页面结构 -->
<body>
<div id="header">...</div>
<div id="nav">...</div>
<div class="content">
<div class="post">...</div>
</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>
<!-- HTML5 语义化结构 -->
<body>
<header>...</header>
<nav>...</nav>
<main>
<article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>
</body>
核心区别总结表
| 特性 | HTML4 及之前 | HTML5 |
|---|---|---|
| 设计目标 | 文档标记语言 | 应用开发平台 |
| 文档声明 | 冗长复杂 | <!DOCTYPE html> |
| 语义结构 | 依赖<div>+CSS类 |
原生语义标签 |
| 多媒体支持 | 需Flash/插件 | 原生<video>/<audio> |
| 图形能力 | 仅静态图片 | <canvas>/SVG |
| 数据存储 | Cookie (受限) | Web Storage/IndexedDB |
| 设备交互 | 无 | Geolocation/Camera API |
| 连接性 | 短轮询 | WebSocket/Server-Sent Events |
通过
document.createElement('video')检测：
!!document.createElement('video').canPlayType返回true即为支持HTML