如何区别HTML和HTML5

Epicurus
61 阅读2分钟

如何区别HTML和HTML5

HTML 和 HTML5 是 Web 开发中使用的标记语言的不同版本，HTML5 是 HTML 的最新版本，引入了许多新特性和改进。以下是 HTML 和 HTML5 的主要区别：

1. 文档类型声明

  • HTML：

    • 文档类型声明复杂且冗长。
    • 例如： 
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • HTML5：

    • 文档类型声明简化。
    • 例如： 
      <!DOCTYPE html>

2. 语义化标签

  • HTML：

    • 缺乏语义化标签，主要使用 <div> 和 <span>。
    • 示例： 
      <div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>

  • HTML5：

    • 引入了语义化标签，使文档结构更清晰。
    • 示例： 
      <header></header>
<nav></nav>
<main></main>
<footer></footer>

3. 多媒体支持

  • HTML：

    • 不支持原生音频和视频播放，依赖 Flash 等插件。
    • 示例： 
      <object data="video.flv" type="application/x-shockwave-flash"></object>

  • HTML5：

    • 支持原生音频和视频播放。
    • 示例： 
      <video controls>
  <source src="video.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

4. 表单增强

  • HTML：

    • 表单功能有限，输入类型较少。
    • 示例： 
      <input type="text" name="username">
<input type="password" name="password">

  • HTML5：

    • 引入了新的输入类型和属性，增强了表单功能。
    • 示例： 
      <input type="email" name="email" required>
<input type="date" name="birthday">
<input type="range" name="volume" min="0" max="100">

5. 图形和动画

  • HTML：

    • 不支持原生图形绘制，依赖 Flash 或图片。
    • 示例： 
      <img src="image.png" alt="图形">

  • HTML5：

    • 支持 <canvas> 和 SVG，可用于绘制图形和动画。
    • 示例： 
      <canvas id="myCanvas" width="200" height="100"></canvas>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

6. 本地存储

  • HTML：

    • 依赖 Cookie 存储少量数据。
    • 示例： 
      document.cookie = "username=John Doe";

  • HTML5：

    • 提供了 localStorage 和 sessionStorage，支持更大容量的本地存储。
    • 示例： 
      localStorage.setItem("username", "John Doe");
sessionStorage.setItem("token", "abc123");

7. 离线应用

  • HTML：

    • 不支持离线应用。

  • HTML5：

    • 支持离线应用，通过 Application Cache 和 Service Worker 实现。
    • 示例： 
      <!DOCTYPE html>
<html manifest="app.manifest">
<head>
  <title>离线应用</title>
</head>
<body>
  <h1>Hello, 离线世界！</h1>
</body>
</html>

8. Web Workers

  • HTML：

    • 不支持多线程。

  • HTML5：

    • 支持 Web Workers，允许在后台运行 JavaScript 脚本。
    • 示例： 
      const worker = new Worker("worker.js");
worker.postMessage("开始计算");
worker.onmessage = function(event) {
  console.log("收到结果：" + event.data);
};

9. 地理定位

  • HTML：

    • 不支持地理定位。

  • HTML5：

    • 支持 Geolocation API，可以获取用户的地理位置。
    • 示例： 
      navigator.geolocation.getCurrentPosition(function(position) {
  console.log("纬度：" + position.coords.latitude);
  console.log("经度：" + position.coords.longitude);
});

总结

特性HTMLHTML5
文档类型声明复杂简单（<!DOCTYPE html>）
语义化标签无有（如<header>、<nav>）
多媒体支持依赖插件原生支持
表单功能功能有限功能增强
图形和动画不支持支持（<canvas>、SVG）
本地存储依赖 Cookie支持localStorage 等
离线应用不支持支持
Web Workers不支持支持
地理定位不支持支持

通过以上区别，可以清晰地识别 HTML 和 HTML5 的不同之处。HTML5 是现代 Web 开发的标准，提供了更强大的功能和更好的用户体验。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝