要區分 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
` 完整使用指南)
