html5新功能

html5新功能

HTML5 是 HTML 标准的第五个主要版本，于 2014 年正式定稿。它引入了许多新功能和 API，旨在改进网页的语义化、多媒体支持、交互性和性能。以下是 HTML5 的核心新功能：

1. 语义化标签

HTML5 新增了多个语义化标签，使页面结构更清晰，提升可访问性和 SEO：

• <header>：页眉或区块头部
• <footer>：页脚或区块尾部
• <nav>：导航栏
• <article>：独立内容（如博客文章）
• <section>：文档中的逻辑区块
• <aside>：侧边栏或附属内容
• <main>：页面主要内容
• <figure> 和 <figcaption>：图像及其标题
• <time>：时间或日期

---

2. 多媒体支持

无需插件即可嵌入音视频：

• <audio>：嵌入音频（支持 MP3、WAV、OGG 等格式）
• <video>：嵌入视频（支持 MP4、WebM、OGG 等格式）
• 支持通过 JavaScript API 控制播放、暂停、音量等。

---

3. 图形与动画

• Canvas：
  • <canvas> 标签允许通过 JavaScript 绘制动态图形、图表或游戏。
  • 支持 2D 和 WebGL（3D）渲染。
• SVG：内联矢量图形支持，适合缩放和动画。

---

4. 表单增强

• 新输入类型：
  • email、url、tel、number、date、time、range、color 等。
• 表单验证：
  • 自动验证输入格式（如必填字段 required、正则表达式 pattern）。
• 新属性：
  • placeholder（占位文本）、autofocus（自动聚焦）、autocomplete（自动填充）。

---

5. Web 存储

• localStorage 和 sessionStorage：
  • 客户端存储键值对数据（容量比 Cookie 更大，约 5MB）。
  • 数据不会随 HTTP 请求发送，提升安全性。
• IndexedDB：浏览器端数据库，支持复杂数据结构存储。

---

6. 离线应用

• Application Cache（已逐渐被淘汰）：
  • 通过 .manifest 文件缓存资源，支持离线访问。
• Service Workers（更现代的替代方案）：
  • 后台脚本，支持离线缓存、推送通知和后台同步（用于 PWA）。

---

7. 地理定位

• Geolocation API：
  • 通过 navigator.geolocation 获取用户地理位置（需用户授权）。

---

8. Web Workers

• 允许在后台运行 JavaScript 多线程任务，避免阻塞主线程，提升性能。

---

9. WebSocket

• 全双工通信协议（ws:// 或 wss://），实现实时数据传输（如聊天应用、在线游戏）。

---

10. 拖放 API

• 通过 draggable 属性和 Drag and Drop API 实现元素拖放功能。

---

11. 其他特性

• 响应式设计支持：
  • <meta name="viewport"> 优化移动端显示。
• MathML：
  • 内联数学公式支持。
• 微数据（Microdata）：
  • 通过属性（如 itemscope、itemtype）增强语义化，方便搜索引擎理解内容。

---

12. 性能优化

• 异步脚本加载：<script async> 或 <script defer>。
• 新的解析规则：更容错的解析器，兼容不规范的代码。

多媒体

HTML5 提供了多种方法来处理多媒体内容，主要包括使用 <video> 和 <audio> 标签嵌入和控制音视频内容，以及通过 JavaScript 进行高级操作。以下是详细介绍：

1. <video> 和 <audio> 标签

HTML5 引入了 <video> 和 <audio> 标签，用于在网页中嵌入视频和音频内容，而无需依赖第三方插件。

<video> 标签

• 基本用法：

  <video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 HTML5 视频。
  </video>

• 常用属性：
  • controls：显示播放控件。
  • autoplay：页面加载后自动播放。
  • loop：循环播放。
  • muted：静音播放。
  • poster：视频加载前显示的图像。
  • preload：预加载策略（auto、metadata、none）。

<audio> 标签

• 基本用法：

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

• 常用属性：
  • controls：显示播放控件。
  • autoplay：自动播放。
  • loop：循环播放。
  • muted：静音播放。

2. JavaScript 控制多媒体

通过 JavaScript，可以实现更复杂的多媒体控制。

视频播放控制

const video = document.getElementById('myVideo');
video.play();       // 播放视频
video.pause();      // 暂停视频
video.volume = 0.5; // 设置音量（0.0 到 1.0）
video.currentTime = 10; // 跳转到第 10 秒
video.playbackRate = 2; // 设置播放速度（0.5 到 2.0）

事件监听

video.addEventListener('loadedmetadata', () => {
  console.log(`视频时长: ${video.duration}秒`);
});
video.addEventListener('timeupdate', () => {
  console.log(`播放进度: ${(video.currentTime / video.duration) * 100}%`);
});

3. 字幕和媒体轨道

HTML5 支持通过 <track> 标签添加字幕、章节等。

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subs_zh.vtt" srclang="zh" label="中文" default>
  <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">
</video>

4. 其他多媒体方法

• <iframe>：用于嵌入外部内容（如视频、地图等）。
• <embed> 和 <object>：用于嵌入其他类型的多媒体内容。

5. 浏览器兼容性与格式支持

• 视频格式：推荐使用 MP4（H.264 编码）和 WebM（VP8/VP9 编码）。
• 音频格式：常用 MP3 和 Ogg。