如何区别HTML和HTML5?

要区分 HTML(通常指 HTML4 及更早版本)和 HTML5,主要可以从以下关键方面进行比较:


一、文档声明区别


DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">


DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


DOCTYPE html>

二、语义化标签对比

用途 HTML4 标签 HTML5 新标签
头部区域
导航栏
内容区块
独立文章
侧边栏
页脚
主要内容区

✅ HTML5 通过语义化标签取代了泛滥的

,提升可读性和SEO


三、多媒体支持差异


<object data="video.mp4">
  <embed src="video.mp4"> 
object>


<video controls>
  <source src="video.mp4" type="video/mp4">
video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
audio>

四、图形技术演进


<img src="image.png" alt="示例">


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

<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

七、兼容性处理




八、代码对比示例


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


<body>
  <header>...header>
  <nav>...nav>
  <main>
    <article>...article>
  main>
  <aside>...aside>
  <footer>...footer>
body>

核心区别总结表

特性 HTML4 及之前 HTML5
设计目标 文档标记语言 应用开发平台
文档声明 冗长复杂
语义结构 依赖
+CSS类
原生语义标签
多媒体支持 需Flash/插件 原生/
图形能力 仅静态图片 /SVG
数据存储 Cookie (受限) Web Storage/IndexedDB
设备交互 Geolocation/Camera API
连接性 短轮询 WebSocket/Server-Sent Events

通过 document.createElement('video') 检测:
!!document.createElement('video').canPlayType 返回 true 即为支持HTML

你可能感兴趣的:(html,html5,前端)