如何区别HTML和HTML5？

要区分 HTML（通常指 HTML4 及更早版本）和 HTML5，主要可以从以下关键方面进行比较：

一、文档声明区别

html 复制代码

<!-- 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

三、多媒体支持差异

html 复制代码

<!-- 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>

四、图形技术演进

html 复制代码

<!-- 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` 属性

html 复制代码

<!-- 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

七、兼容性处理

html 复制代码

<!-- 让旧浏览器支持HTML5标签 -->
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->

八、代码对比示例

html 复制代码

<!-- 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