HTML4 与 HTML5 之间存在着显著的区别，主要体现在设计理念、语义化、功能特性、兼容性等多个方面。以下是两者的主要区别：
1. 语义化标签（Semantic Elements）
- HTML4: 缺乏明确的语义化标签，通常使用大量的
<div>和<span>配合id或class来划分页面结构（如<div id="header">,<div class="nav">），可读性和可维护性较差。 - HTML5: 引入了丰富的语义化标签，使页面结构更清晰，易于理解，也利于搜索引擎优化（SEO）和无障碍访问。
<header>: 定义页眉。<nav>: 定义导航链接。<article>: 定义独立的文章内容。<section>: 定义文档中的节（如章节、页眉、页脚或文档的其他部分）。<aside>: 定义页面的侧边栏内容。<footer>: 定义页脚。<main>: 定义文档的主要内容。
2. 多媒体支持
- HTML4: 不原生支持音频和视频，需要依赖第三方插件（如 Flash、Silverlight）来播放多媒体内容。
- HTML5: 原生支持音频和视频，无需插件。
<audio>标签：用于嵌入音频内容。<video>标签：用于嵌入视频内容。- 支持多种格式（如 MP3, Ogg, MP4, WebM），并可通过
source标签提供备选格式。
3. 表单增强
- HTML4: 表单控件类型有限（如
text,password,radio,checkbox等），验证功能依赖 JavaScript。 - HTML5: 极大地增强了表单功能：
- 新的输入类型：
email,url,number,range,date,time,color,search等，提供更好的用户体验和输入约束。 - 新属性：
placeholder（占位符文本）、required（必填）、autofocus（自动聚焦）、autocomplete（自动补全）、pattern（正则表达式验证）等。 - 内置表单验证：浏览器可以自动进行基本的格式验证，减少对 JavaScript 的依赖。
- 新的输入类型：
4. 图形与绘图
- HTML4: 无法直接在网页上绘制图形，通常需要使用图片或 Flash。
- HTML5: 提供了
<canvas>和<svg>标签用于绘制图形。<canvas>: 通过 JavaScript 脚本绘制位图（像素级绘图），适合动态图形、游戏、数据可视化。<svg>: 可缩放矢量图形，基于 XML，适合图标、图表等需要缩放的图形。
5. API 与本地存储
- HTML4: 存储能力有限，主要依赖 Cookie（存储空间小、每次请求都发送）。
- HTML5: 提供了强大的 Web API 和本地存储机制：
- 本地存储：
localStorage（持久化存储）和sessionStorage（会话级存储），容量远大于 Cookie，且不会随请求发送。 - Web SQL / IndexedDB: 更复杂的客户端数据库（IndexedDB 是推荐标准）。
- 其他 API：地理定位（Geolocation）、拖放（Drag & Drop）、文件读取（File API）、离线应用（Application Cache – 已废弃，被 Service Worker 取代）、Web Workers（后台线程）、WebSocket（全双工通信）等。
- 本地存储：
6. Doctype 声明
- HTML4: Doctype 声明冗长且复杂。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - HTML5: Doctype 声明极其简洁。
<!DOCTYPE html>
7. 字符编码声明
- HTML4: 字符编码声明较长。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - HTML5: 字符编码声明更短。
<meta charset="UTF-8">
8. 错误处理与容错性
- HTML4: 对语法错误的容忍度较低，错误可能导致渲染问题。
- HTML5: 设计上具有更强的容错性，浏览器能更好地处理不规范的代码，提高了兼容性。
9. 移动设备支持
- HTML4: 主要为桌面浏览器设计，对移动设备支持不佳。
- HTML5: 天然支持移动设备，其特性（如触控事件、离线存储、地理位置）非常适合移动 Web 应用开发。
总结
| 特性 | HTML4 | HTML5 |
|---|---|---|
| 语义化 | 弱，依赖 div | 强，有专用语义标签 |
| 多媒体 | 依赖插件 | 原生支持 <audio> 和 <video> |
| 表单 | 功能有限，依赖 JS 验证 | 类型丰富，内置验证 |
| 图形 | 无原生支持 | 支持 <canvas> 和 <svg> |
| 存储 | Cookie（容量小） | localStorage, sessionStorage, IndexedDB |
| API | 少 | 丰富（地理定位、拖放、Web Workers 等） |
| Doctype | 冗长复杂 | 简洁 (<!DOCTYPE html>) |
| 移动支持 | 差 | 好 |
| 设计理念 | 结构与表现分离 | 丰富功能，构建 Web 应用 |
简单来说，HTML5 不仅仅是一个标记语言的升级，它更像是一套完整的 Web 应用开发平台，旨在减少对第三方插件的依赖，提供更强大的功能，使 Web 应用能够媲美原生应用。
THE END
