HTML5 更新的功能

文章目录

前言
- - [**一、语义化标签（Semantic Elements）**](#一、语义化标签（Semantic Elements）)
  - [**二、多媒体支持（Audio & Video）**](#二、多媒体支持（Audio & Video）)
  - [**三、图形与绘图（Canvas & SVG）**](#三、图形与绘图（Canvas & SVG）)
  - - [**1. `<canvas>`**](#1. <canvas>)
    - [**2. SVG 内联支持**](#2. SVG 内联支持)
  - [**四、表单增强（Form Features）**](#四、表单增强（Form Features）)
  - - [**1. 新输入类型**](#1. 新输入类型)
    - [**2. 新属性**](#2. 新属性)
  - [**五、本地存储（Web Storage）**](#五、本地存储（Web Storage）)
  - **六、地理定位（Geolocation）**
  - [**七、拖放 API（Drag & Drop）**](#七、拖放 API（Drag & Drop）)
  - [**八、Web Workers**](#八、Web Workers)
  - **九、WebSocket**
  - **十、其他重要更新**
  - **总结**

前言

HTML5 是一次重大的标准升级，引入了大量新特性和 API，旨在支持现代富媒体应用和更语义化的 Web 结构。以下是核心更新功能的详细说明及示例：

一、语义化标签（Semantic Elements）

目的：增强内容的结构化描述，提升 SEO 和无障碍访问能力。
新增标签：

<header>：页面或区块的头部
<nav>：导航链接
<section>：文档独立区块
<article>：独立内容（如博客/新闻）
<aside>：侧边栏或附属内容
<footer>：页面或区块的底部
<main>：文档主要内容
<figure> + <figcaption>：媒体与标题组合
<mark>：高亮文本

示例：

html 复制代码

<body>
  <header>
    <h1>网站标题</h1>
    <nav>
      <a href="/home">首页</a> | <a href="/about">关于</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>文章标题</h2>
      <p>正文内容...</p>
      <figure>
        <img src="image.jpg" alt="示例图片">
        <figcaption>图片说明</figcaption>
      </figure>
    </article>
    
    <aside>
      <h3>相关链接</h3>
      <ul>...</ul>
    </aside>
  </main>
  
  <footer>
    <p>© 2023 版权信息</p>
  </footer>
</body>

二、多媒体支持（Audio & Video）

目的：原生支持音视频播放，无需 Flash 等插件。
标签：

<video>：嵌入视频
<audio>：嵌入音频
属性：controls（显示控制条）、autoplay、loop、muted、poster（视频封面）

示例：

html 复制代码

<video controls width="600" poster="preview.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持视频播放
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放
</audio>

三、图形与绘图（Canvas & SVG）

1. `<canvas>`

目的：通过 JavaScript 动态绘制 2D/3D 图形。
示例：绘制红色矩形

html 复制代码

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

2. SVG 内联支持

目的：直接嵌入矢量图形。
示例：绘制圆形

html 复制代码

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

四、表单增强（Form Features）

1. 新输入类型

email：邮箱验证
url：URL 验证
number：数字输入
range：滑块（<input type="range" min="0" max="100">）
date/time：日期时间选择器
search：搜索框
color：颜色选择器

2. 新属性

placeholder：输入提示
required：必填字段
autofocus：自动聚焦
pattern：正则验证（如 pattern="[A-Za-z]{3}"）
datalist：输入建议列表

示例：

html 复制代码

<form>
  <label>邮箱：<input type="email" required placeholder="[email protected]"></label>
  <label>日期：<input type="date"></label>
  <label>音量：<input type="range" min="0" max="100"></label>
  
  <label>浏览器：
    <input list="browsers">
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
    </datalist>
  </label>
  
  <input type="submit">
</form>

五、本地存储（Web Storage）

目的：替代 Cookie，提供更大容量的本地存储。

localStorage：永久存储（直到手动清除）
sessionStorage：会话级存储（关闭标签页失效）

示例：

javascript 复制代码

// 存储数据
localStorage.setItem("username", "Alice");

// 读取数据
alert(localStorage.getItem("username")); // 输出 "Alice"

// 删除数据
localStorage.removeItem("username");

六、地理定位（Geolocation）

目的：获取用户地理位置（需用户授权）。
示例：

javascript 复制代码

navigator.geolocation.getCurrentPosition(
  position => {
    alert(`纬度：${position.coords.latitude}，经度：${position.coords.longitude}`);
  },
  error => {
    console.error("定位失败：", error);
  }
);

七、拖放 API（Drag & Drop）

目的：原生支持元素拖拽操作。
步骤：

设置元素 draggable="true"
监听事件：dragstart, dragover, drop

示例：

html 复制代码

<div id="drag-target" draggable="true">拖拽我</div>
<div id="drop-area">放置区域</div>

<script>
  const target = document.getElementById("drag-target");
  const dropArea = document.getElementById("drop-area");

  target.addEventListener("dragstart", e => {
    e.dataTransfer.setData("text", e.target.id);
  });

  dropArea.addEventListener("dragover", e => {
    e.preventDefault(); // 允许放置
  });

  dropArea.addEventListener("drop", e => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));
  });
</script>

八、Web Workers

目的：在后台线程运行脚本，避免阻塞主线程。
示例：

javascript 复制代码

// 主线程
const worker = new Worker("worker.js");
worker.postMessage("开始计算"); // 发送数据
worker.onmessage = e => alert(e.data); // 接收结果

// worker.js
self.onmessage = e => {
  const result = doHeavyCalculation(); // 耗时计算
  self.postMessage(result); // 返回结果
};

九、WebSocket

目的：实现全双工实时通信（如聊天室）。
示例：

javascript 复制代码

const socket = new WebSocket("wss://example.com/socket");

socket.onopen = () => {
  socket.send("Hello Server!");
};

socket.onmessage = e => {
  console.log("收到消息：", e.data);
};

十、其他重要更新

离线应用（Application Cache）
通过 manifest 文件缓存资源（已废弃，推荐使用 Service Worker）。
语义化文本标签
<time>（日期时间）、<meter>（度量值）、<progress>（进度条）。
增强的 <iframe>
新增 sandbox 属性限制 iframe 行为（如禁止脚本）。
原生模态框
<dialog> 元素：
html 复制代码
```
<dialog open>这是一个对话框！</dialog>
```

总结

HTML5 通过语义化标签、多媒体支持、Canvas/绘图、表单增强、本地存储、地理定位等特性，彻底变革了 Web 开发范式，使其从文档展示平台升级为功能强大的应用平台。这些特性与现代 CSS3 和 JavaScript API 结合，构成了现代 Web 技术的基石。

HTML5 更新的功能

文章目录

前言

一、语义化标签（Semantic Elements）

二、多媒体支持（Audio & Video）

三、图形与绘图（Canvas & SVG）

1. <canvas>

2. SVG 内联支持

四、表单增强（Form Features）

1. 新输入类型

2. 新属性

五、本地存储（Web Storage）

六、地理定位（Geolocation）

七、拖放 API（Drag & Drop）

八、Web Workers

九、WebSocket

十、其他重要更新

总结

1. `<canvas>`