43、HTML5 进阶技术：音频、jQuery、XHTML、SVG 及更多

ff678634

于 2025-11-22 16:12:09 发布

阅读量9

点赞数

CC 4.0 BY-SA版权

分类专栏： Head First学HTML5 文章标签： HTML5音频 jQuery DOM操作

本文链接：https://blog.youkuaiyun.com/ff678/article/details/155156264

Head First学HTML5 专栏收录该内容

44 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

HTML5 进阶技术：音频、jQuery、XHTML、SVG 及更多

1. HTML5 音频

HTML5 为在网页中播放音频提供了标准方式，无需插件，通过 <audio> 元素即可实现。除了 <audio> 元素，还有对应的音频 API，支持播放、暂停和加载等常用方法，其属性如 src 、 currentTime 和 volume 与视频 API 类似。

不同浏览器对音频播放器控件的样式有不同实现，通常包含播放、暂停和音量控制的进度条。虽然音频功能看似简单，但通过隐藏控件并在代码中管理音频播放，能创造出有趣的网页体验，且无需使用插件。

目前音频没有标准编码，常见的三种格式为 mp3、wav 和 Ogg Vorbis，各浏览器对这些格式的支持情况不同，截至目前，Chrome 是唯一支持所有三种格式的浏览器。

以下是一个简单的音频代码示例：

<audio src="song.mp3" id="boombox" controls>
  Sorry but audio is not supported in your browser.
</audio>

var audioElement = document.getElementById("boombox");
audioElement.volume = .5;
audioElement.play();

操作步骤：
1. 在 HTML 中使用 <audio> 元素指定音频源和控件。
2. 在 JavaScript 中获取音频元素的引用。
3. 设置音量并开始播放。

2. jQuery

jQuery 是一个 JavaScript 库，旨在简化与 DOM 交互、使用 Ajax 和添加视觉效果所需的代码。它非常流行，可通过插件模型进行扩展。虽然 jQuery 能实现的功能用原生 JavaScript 也能实现，但它能显著减少代码量。

以下是一些 jQuery 的使用示例：
- 页面加载事件 ：

// 原生 JavaScript
window.onload = function() {
    alert("the page is loaded!");
};
// jQuery
$(document).ready(function() {
    alert("the page is loaded!");
});
// 简化版
$(function() {
    alert("the page is loaded!");
});

为元素添加点击事件 ：

// 为特定 ID 的元素添加点击事件
$(function() {
   $("#buynow").click(function() {
       alert("I want to buy now!");
   });
});
// 为所有锚点元素添加点击事件
$(function() {
   $("a").click(function() {
       alert("I want to buy now!");
   });
});

更复杂的操作 ：

// 为特定元素的子元素添加类
$(function() {
    $("#playlist > li").addClass("favorite");
});
// 元素状态切换和动画效果
$(function() {
    $("#specialoffer").toggle(function() {
        $(this).animate({ backgroundColor: "yellow" }, 800);
    },function() {
        $(this).animate({ backgroundColor: "white" }, 300);
    });
});

操作步骤：
1. 引入 jQuery 库。
2. 根据需求编写 jQuery 代码，使用选择器选择元素并调用相应方法。

3. XHTML 和 SVG

虽然曾有“XHTML 已死”的说法，但实际上只是 XHTML 2 及后续版本不再流行，现在仍可以使用 XHTML 风格编写 HTML5。使用 XHTML 可能是为了将文档作为 XML 进行验证或转换，或者支持与 HTML 配合使用的 XML 技术，如 SVG。

以下是一个简单的 XHTML 文档示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>You Rock!</title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <p>I’m kinda liking this xHTML!</p>
      <svg xmlns="http://www.w3.org/2000/svg">
         <rect stroke="black" fill="blue" x="45px" y="45px"  
               width="200px" height="100px" stroke-width="2" />
      </svg>
   </body>
</html>

编写 XHTML 页面时需要注意：
1. 页面必须是格式良好的 XML。
2. 页面应使用 application/xhtml+xml MIME 类型提供服务，需确保服务器正确配置。
3. 在 <html> 元素中包含 XHTML 命名空间。

4. SVG

可缩放矢量图形（SVG）是在网页中原生包含图形的另一种方式，自 1999 年左右出现，目前主流浏览器（包括 IE9 及更高版本）均支持。与使用 JavaScript 在画布上绘制像素的 <canvas> 元素不同，SVG 图形使用 XML 指定。

以下是一个简单的 SVG 示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>SvG</title>
  <meta charset="utf-8" />
</head>
<body>
  <div id="svg">
    <svg xmlns="http://www.w3.org/2000/svg">
      <circle id="circle"
              cx="50" cy="50" r="20"
              stroke="#373737" stroke-width="2"
              fill="#7d7d7d" />
    </svg>
  </div>
</body>
</html>

SVG 的优点包括可任意缩放而不会出现像素化，且 SVG 文件可以被搜索、索引、脚本化和压缩。SVG 定义了多种基本形状，对于复杂形状可指定路径，也可使用图形编辑器绘制并导出为 SVG。

操作步骤：
1. 在 HTML 中使用 <svg> 元素创建 SVG 图形。
2. 根据需要定义图形元素的属性。

5. 离线 Web 应用

现代智能手机和平板电脑使我们能随时随地访问网络，但有时会遇到网络断开的情况。HTML5 支持离线 Web 应用，除 IE 外，所有现代桌面和移动浏览器均支持。

要使 Web 应用可离线使用，需创建一个缓存清单文件，列出应用运行所需的所有文件，浏览器会下载这些文件，当设备离线时会使用本地文件。在 <html> 标签中添加缓存清单文件名即可告知网页有清单文件。

以下是一个缓存清单文件示例：

CaCHE MaNIFEST
CaCHE:
notetoself.html
notetoself.css
notetoself.js

操作步骤：
1. 创建缓存清单文件，列出所需文件。
2. 在 HTML 中添加缓存清单文件名。
3. 确保服务器正确配置缓存清单文件的 MIME 类型，如在 Apache 服务器的 .htaccess 文件中添加 addType text/cache-manifest .manifest 。
4. 可使用 JavaScript 监听缓存事件，如：

window.applicationCache.addEventListener("error", errorHandler, false);

6. Web 套接字

之前我们了解了基于 HTTP 的 XMLHttpRequest 和 JSONP 两种通信方式，而 Web 套接字是一种新的 API，可与 Web 服务保持开放连接，当有新数据时服务可直接发送给客户端，客户端代码能得到通知。

以下是使用 Web 套接字的基本示例：

var socket = new WebSocket("ws://yourdomain/yourservice");
socket.onopen = function(){
    alert("Your socket is now open with the web service");
};
socket.postMessage("player moved right");
socket.onmessage = function(event) {
    alert("From socket: " + event.data);
};

操作步骤：
1. 使用 WebSocket 构造函数创建 Web 套接字。
2. 为 onopen 事件添加处理程序，在套接字打开时执行相应操作。
3. 使用 postMessage 方法向服务器发送消息。
4. 为 onmessage 事件添加处理程序，接收服务器发送的消息。

7. 更多画布 API

在画布章节中，我们体验了使用画布的乐趣，实际上还有很多与画布相关的有趣功能。例如，可使用 save 和 restore 方法保存和恢复画布上下文，避免在临时更改属性后手动重置。

以下是一个使用 save 和 restore 方法的示例：

context.fillStyle = "lightblue";
context.save();
context.fillStyle = "rgba(50, 50, 50, .5)";
context.fillRect(0, 0, 100, 100);
context.restore();

translate 和 rotate 方法可用于移动和旋转画布，结合使用能创造出有趣的效果。

操作步骤：
1. 使用 save 方法保存当前上下文状态。
2. 进行属性更改和图形绘制。
3. 使用 restore 方法恢复上下文状态。
4. 使用 translate 和 rotate 方法进行画布的移动和旋转。

通过这些 HTML5 进阶技术，我们能为网页添加更丰富的功能和交互性，创造出更出色的用户体验。

HTML5 进阶技术：音频、jQuery、XHTML、SVG 及更多

8. 画布 API 总结与拓展

前面提到了画布的 save 、 restore 、 translate 和 rotate 方法，下面我们详细总结下这些方法的使用场景和效果，以及如何结合它们创造出更复杂的图形。

8.1 `save` 和 `restore` 方法

save 方法用于保存当前画布上下文的状态，包括填充样式、笔触样式、线宽等属性。 restore 方法则用于恢复之前保存的状态。这两个方法在需要临时更改属性并在操作完成后恢复原始状态时非常有用。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// 设置初始填充样式
context.fillStyle = "lightblue";

// 保存当前上下文状态
context.save();

// 临时更改填充样式
context.fillStyle = "rgba(50, 50, 50, .5)";

// 绘制一个矩形
context.fillRect(0, 0, 100, 100);

// 恢复之前保存的上下文状态
context.restore();

// 此时填充样式恢复为 lightblue

操作步骤如下：
1. 获取画布元素和上下文。
2. 设置初始属性。
3. 调用 save 方法保存当前状态。
4. 临时更改属性并进行绘制操作。
5. 调用 restore 方法恢复状态。

8.2 `translate` 和 `rotate` 方法

translate 方法用于移动画布的原点位置， rotate 方法用于旋转画布。这两个方法结合使用可以创造出各种旋转和移动的效果。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var degrees = 36;

// 保存上下文状态
context.save();

// 移动画布原点
context.translate(200, 200);

// 设置填充样式
context.fillStyle = "rgba(50, 50, 50, .5)";

// 循环绘制 10 个矩形，每次旋转 36 度
for (var i = 0; i < 360 / degrees; i++) {
    context.fillRect(0, 0, 100, 100);
    context.rotate(degreesToRadians(degrees));
}

// 恢复上下文状态
context.restore();

// 辅助函数：将角度转换为弧度
function degreesToRadians(degrees) {
    return degrees * (Math.PI / 180);
}

操作步骤如下：
1. 获取画布元素和上下文。
2. 调用 save 方法保存当前状态。
3. 使用 translate 方法移动画布原点。
4. 设置填充样式。
5. 使用循环和 rotate 方法旋转画布并绘制图形。
6. 调用 restore 方法恢复状态。

8.3 结合更多方法创造复杂图形

除了上述方法，画布 API 还提供了合成和变换等更强大的方法。通过结合这些方法，可以创造出无限的图形艺术效果。

// 示例代码暂未给出，但可以想象结合合成和变换方法的复杂操作

操作步骤：
1. 了解合成和变换方法的原理和使用方式。
2. 根据需求选择合适的方法进行组合。
3. 编写代码实现复杂图形的绘制。

9. 技术对比与选择

在实际开发中，我们需要根据具体需求选择合适的技术。下面是对前面介绍的几种技术的对比：

技术	适用场景	优点	缺点
HTML5 音频	网页中播放音频	无需插件，标准方式，可控制播放	无标准编码，各浏览器支持不同
jQuery	简化 DOM 操作、Ajax 和视觉效果	代码简洁，流行且可扩展	需要一定学习成本
XHTML	需要 XML 验证或支持 XML 技术	格式规范，可与 XML 技术配合	要求严格，配置复杂
SVG	网页中包含图形	可缩放，不会像素化，可搜索和脚本化	复杂图形需要专业工具生成
离线 Web 应用	网络不稳定时使用 Web 应用	可离线使用，提高用户体验	部分浏览器不支持，需要配置缓存清单
Web 套接字	实时通信场景	保持开放连接，实时接收数据	部分浏览器支持滞后，需要服务器端代码
画布 API	绘制图形和动画	灵活，可实现复杂效果	代码相对复杂，需要一定图形知识

根据以上对比，我们可以做出如下选择：
- 如果需要在网页中播放音频，优先考虑 HTML5 音频，但要注意编码格式的兼容性。
- 对于 DOM 操作和视觉效果，jQuery 是一个不错的选择，能大大减少代码量。
- 当需要进行 XML 验证或支持 SVG 等 XML 技术时，可使用 XHTML。
- 对于需要缩放且不像素化的图形，SVG 是首选。
- 若要实现离线使用的 Web 应用，可使用 HTML5 的离线支持，但要注意浏览器兼容性和服务器配置。
- 在实时通信场景下，Web 套接字是最佳选择，但要确保服务器端的支持。
- 对于复杂的图形绘制和动画效果，画布 API 能提供强大的功能，但需要一定的学习成本。