HTML5新增特性有哪些

HTML5 是 HTML 的重大更新，带来了许多新特性，主要可以分为以下几类：

一、语义化标签

新增了更有意义的标签，使页面结构更清晰：

html 复制代码

<header>   <!-- 页眉 -->
<nav>      <!-- 导航 -->
<main>     <!-- 主要内容 -->
<section>  <!-- 文档中的节 -->
<article>  <!-- 独立内容（如博客文章） -->
<aside>    <!-- 侧边栏 -->
<footer>   <!-- 页脚 -->
<figure>   <!-- 独立内容（如图表） -->
<figcaption> <!-- 图表标题 -->
<time>     <!-- 时间日期 -->
<mark>     <!-- 高亮文本 -->
<details>  <!-- 可折叠内容 -->
<summary>  <!-- details的标题 -->
<dialog>   <!-- 对话框/模态框 -->

二、多媒体支持

无需插件即可播放音视频：

html 复制代码

<!-- 音频 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

三、图形与绘图

Canvas ：2D 绘图 API

html 复制代码

<canvas id="myCanvas" width="200" height="100"></canvas>

SVG ：矢量图形支持

html 复制代码

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

四、表单增强

新的输入类型：

html 复制代码

<input type="email">    <!-- 邮箱 -->
<input type="url">      <!-- URL -->
<input type="number">   <!-- 数字 -->
<input type="range">    <!-- 滑块 -->
<input type="date">     <!-- 日期 -->
<input type="time">     <!-- 时间 -->
<input type="color">    <!-- 颜色选择器 -->
<input type="search">   <!-- 搜索框 -->
<input type="tel">      <!-- 电话号码 -->
<input type="month">    <!-- 年月 -->
<input type="week">     <!-- 周 -->

新的表单属性：

html 复制代码

<input placeholder="提示文本">
<input autofocus>       <!-- 自动聚焦 -->
<input required>        <!-- 必填 -->
<input pattern="\d+">   <!-- 正则验证 -->
<input list="suggestions">
<datalist id="suggestions">
  <option value="选项1">
  <option value="选项2">
</datalist>

五、API 增强

1. 本地存储

javascript 复制代码

localStorage.setItem('key', 'value');  // 永久存储
sessionStorage.setItem('key', 'value'); // 会话存储

2. 地理位置

javascript 复制代码

navigator.geolocation.getCurrentPosition(showPosition);

3. 拖放 API

html 复制代码

<div draggable="true" id="dragme">拖我</div>
<div id="dropzone">放到这里</div>

4. Web Workers（后台线程）

javascript 复制代码

// 主线程
const worker = new Worker('worker.js');

5. WebSocket（实时通信）

javascript 复制代码

const socket = new WebSocket('ws://example.com');

6. 历史记录管理

javascript 复制代码

history.pushState(state, title, url);

7. 文件 API

html 复制代码

<input type="file" onchange="handleFile(this.files)">

六、其他重要特性

1. 文档结构改进

html 复制代码

<!DOCTYPE html>  <!-- 更简洁的文档声明 -->
<meta charset="UTF-8">  <!-- 字符集声明简化 -->

2. 内容可编辑

html 复制代码

<div contenteditable="true">可编辑内容</div>

3. 数据属性

html 复制代码

<div data-user-id="123" data-role="admin"></div>

4. 异步和延迟加载

html 复制代码

<script async src="script.js"></script>
<script defer src="script.js"></script>
<img loading="lazy" src="image.jpg">

5. 新的选择器 API

javascript 复制代码

document.querySelector('.class');      // 选择第一个匹配元素
document.querySelectorAll('.class');   // 选择所有匹配元素

七、已废弃的标签

HTML5 废弃了一些过时标签，建议使用 CSS 替代：

表现性标签：<font>, <center>, <big>, <strike>
框架相关：<frame>, <frameset>, <noframes>
其他：<acronym>, <applet>, <basefont>, <dir>

八、浏览器兼容性处理

对于不支持 HTML5 的老浏览器：

html 复制代码

<!-- 1. 使用 HTML5 Shiv -->
<!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
<![endif]-->

<!-- 2. 为旧浏览器提供回退 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <!-- 如果不支持 video 标签，显示以下内容 -->
  您的浏览器不支持视频播放，请
  <a href="video.mp4">下载视频</a>
</video>

核心优势总结

语义化更好 - 代码更易读，SEO 更友好
多媒体支持 - 无需 Flash 等插件
设备兼容 - 更好的移动设备支持
离线和存储 - 支持本地存储和离线应用
性能提升 - Web Workers、WebSocket 等提高性能
图形处理 - Canvas 和 SVG 提供强大图形能力

这些特性使得 HTML5 成为现代 Web 开发的基础，能够创建更丰富、更交互的 Web 应用。