XHTML 是以 XML 格式编写的 HTML。
什么是 XHTML?
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
为什么使用 XHTML?
因特网上的很多页面包含了“糟糕”的 HTML。
XML 是一种必须正确标记且格式良好的标记语言。
今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行,而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释“糟糕”的标记语言的资源和能力。
所以 - 通过结合 XML 和 HTML 的长处,开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。
与 HTML 相比最重要的区别:
文档结构
- XHTML DOCTYPE 是强制性的
- <html> 中的 XML namespace 属性是强制性的
- <html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
<!DOCTYPE ....> 是强制性的
XHTML 文档必须进行 XHTML 文档类型声明(XHTML DOCTYPE declaration)。
<html>、<head>、<title> 以及 <body> 元素也必须存在,并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。
下面的例子展示了带有最少的必需标签的 XHTML 文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> ...... </body> </html>
如何从 HTML 转换到 XHTML
- 向每张页面的第一行添加 XHTML <!DOCTYPE>
- 向每张页面的 html 元素添加 xmlns 属性
- 把所有元素名改为小写
- 关闭所有空元素
- 把所有属性名改为小写
- 为所有属性值加引号
XHTML 元素是以 XML 格式编写的 HTML 元素。
XHTML 元素 - 语法规则
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
XHTML 元素必须正确嵌套
在 HTML 中,某些元素可以不正确地彼此嵌套在一起,就像这样:
<b><i>This text is bold and italic</b></i>
在 XHTML 中,所有元素必须正确地彼此嵌套,就像这样:
<b><i>This text is bold and italic</i></b>
XHTML 元素必须始终关闭
这是错误的:
<p>This is a paragraph <p>This is another paragraph
这是正确的:
<p>This is a paragraph</p> <p>This is another paragraph</p>
空元素也必须关闭
这是错误的:
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face">
这是正确的:
A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />
XHTML 元素必须小写
这是错误的:
<BODY> <P>This is a paragraph</P> </BODY>
这是正确的:
<body> <p>This is a paragraph</p> </body>
XHTML 属性是以 XML 格式编写的 HTML 属性。
XHTML 属性 - 语法规则
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
XHTML 属性必须使用小写
这是错误的:
<table WIDTH="100%">
这是正确的:
<table width="100%">
XHTML 属性值必须用引号包围
这是错误的:
<table width=100%>
这是正确的:
<table width="100%">
禁止属性简写
这是错误的:
<input checked> <input readonly>
这是正确的:
<input checked="checked" /> <input readonly="readonly" />
canvas 元素用于在网页上绘制图形。
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
通过指定从何处开始,在何处结束,来绘制一条线:
JavaScript 代码:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
通过规定尺寸、颜色和位置,来绘制一个圆:
JavaScript 代码:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
使用您指定的颜色来绘制渐变背景:
JavaScript 代码:
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script>
canvas 元素:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
把一幅图像放置到画布上:
JavaScript 代码:
<script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); }; </script>
canvas 元素:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas>
HTML5 支持内联 SVG。
什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
把 SVG 直接嵌入 HTML 页面
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:
实例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用
Web 上的多媒体指的是音效、音乐、视频和动画。
现代网络浏览器已支持很多多媒体格式。
什么是多媒体?
多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。
在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。
在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。
浏览器支持
第一款因特网浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器,图片支持也被加入。
不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理,而某些则需要额外的插件。
您将在下面的章节学习更多有关插件的知识。
多媒体格式
多媒体元素(比如视频和音频)存储于媒体文件中。
确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。
多媒体元素元素也拥有带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。
视频格式
MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。
格式 | 文件 | 描述 |
---|---|---|
AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。 |
WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。 |
MPEG |
| MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。 |
QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。 |
RealVideo |
| RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。 |
Flash |
| Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 |
Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
声音格式
格式 | 文件 | 描述 |
---|---|---|
MIDI |
| MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。 因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
RealAudio |
| RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。 |
Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。 |
WMA | .wma | WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。 |
MP3 |
| MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
使用哪种格式?
WAVE 是因特网上最受欢迎的无压缩声音格式,所有流行的浏览器都支持它。如果您需要未经压缩的声音(音乐或演讲),那么您应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐,那么 MP3 是一个选项。
插件(Plug-in)是扩展浏览器标准功能的计算机程序。
插件
插件被设计用于许多不同的目的:
- 运行 Java 小程序
- 运行 ActiveX 控件
- 显示 Flash 电影
- 显示地图
- 扫描病毒
- 验证银行账号
警告!
大多数浏览器不再支持 Java Applet 和插件。
所有浏览器均不再支持 ActiveX 控件。
在现代浏览器中,对 Shockwave Flash 的支持也已关闭。
<object> 元素
所有浏览器均支持 <object>
元素。
<object>
元素定义 HTML 文档中的嵌入式对象。
它旨在将插件(例如 Java applet、PDF 阅读器和 Flash 播放器)嵌入网页中,但也可以用于将 HTML 包含在 HTML 中:
<object width="100%" height="500px" data="snippet.html"></object>
或者您喜爱的图像:
<object data="audi.jpeg"></object>
<embed> 元素
所有主要浏览器均支持 <embed>
元素。
<embed>
元素也可定义了 HTML 文档中的嵌入式对象。
Web 浏览器长期以来一直支持 <embed> 元素。但是,它不属于 HTML5 之前的 HTML 规范的一部分。
<embed src="audi.jpeg">
请注意,<embed> 元素没有结束标记。它无法包含替代文本。
<embed>
元素也可用于在 HTML 中包含 HTML:
<embed width="100%" height="500px" src="snippet.html">
在 HTML 中播放声音的方法有很多种。
问题,问题,以及解决方法
在 HTML 中播放音频并不容易!
您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。
在本章,W3School 为您总结了问题和解决方法。
使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件有很多用途:播放音乐、显示地图、验证银行账号,控制输入等等。
可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。
使用 <embed> 元素
<embed> 标签定义外部(非 HTML)内容的容器。(这是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效)。
下面的代码片段能够显示嵌入网页中的 MP3 文件:
<embed height="100" width="100" src="song.mp3" />
问题:
- <embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
- 不同的浏览器对音频格式的支持也不同。
- 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
- 如果用户的计算机未安装插件,无法播放音频。
- 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。
注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。
使用 <object> 元素
<object tag> 标签也可以定义外部(非 HTML)内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件:
<object height="100" width="100" data="song.mp3"></object>
问题:
- 不同的浏览器对音频格式的支持也不同。
- 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。
- 如果用户的计算机未安装插件,无法播放音频。
- 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。
使用 HTML5 <audio> 元素
<audio> 元素是一个 HTML5 元素,在 HTML 4 中是非法的,但在所有浏览器中都有效。
<audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio>
上面的例子使用了一个 mp3 文件,这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
为了使这段音频在 Firefox 和 Opera 中同样有效,添加了一个 ogg 类型的文件。如果失败,会显示错误消息。
问题:
- <audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
- 您必须把音频文件转换为不同的格式。
- <audio> 元素在老式浏览器中不起作用。
注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。
最好的 HTML 解决方法
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
上面的例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed> 元素。
问题:
- 您必须把音频转换为不同的格式。
- <audio> 元素无法通过 HTML 4 和 XHTML 验证。
- <embed> 元素无法通过 HTML 4 和 XHTML 验证。
- <embed> 元素无法回退来显示错误消息。
注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。
向网站添加音频的最简单方法
向网页添加音频的最简单的方法是什么?
雅虎的媒体播放器绝对算其中之一。
使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。
它能播放 mp3 以及一系列其他格式。通过一行简单的代码,您就可以把它添加到网页中,轻松地将 HTML 页面转变为专业的播放列表。
雅虎媒体播放器
实例
<a href="song.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script>
使用雅虎播放器是免费的。如需使用它,您需要把这段 JavaScript 插入网页底部:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
然后只需简单地把 MP3 文件链接到您的 HTML 中,JavaScript 会自动地为每首歌创建播放按钮:
<a href="song1.mp3">Play Song 1</a> <a href="song2.mp3">Play Song 2</a> ... ... ...
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮,而不是完整的播放器。不过,当您点击该按钮,会弹出完整的播放器。
请注意,这个播放器始终停靠在窗框底部。只需点击它,就可将其滑出。
使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”来播放该文件:
<a href="song.mp3">Play the sound</a>
内联的声音
当您在网页中包含声音,或者作为网页的组成部分时,它被称为内联声音。
如果您打算在 web 应用程序中使用内联声音,您需要意识到很多人都觉得内联声音令人恼火。同时请注意,用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是,在用户需要听到录音并点击某个链接时,会打开页面然后播放录音。
HTML 5 多媒体标签
在 HTML 中播放视频并不容易!
您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。
使用 <embed> 标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频:
<embed src="movie.swf" height="200" width="200"/>
问题
- HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
- 如果浏览器不支持 Flash,那么视频将无法播放
- iPad 和 iPhone 不能显示 Flash 视频。
- 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
使用 <object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 片段显示嵌入网页的一段 Flash 视频:
<object data="movie.swf" height="200" width="200"/>
问题
- 如果浏览器不支持 Flash,将无法播放视频。
- iPad 和 iPhone 不能显示 Flash 视频。
- 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
使用 <video> 标签
<video> 是 HTML 5 中的新标签。
<video> 标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频:
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
问题
- 您必须把视频转换为很多不同的格式。
- <video> 元素在老式浏览器中无效。
- <video> 元素无法通过 HTML 4 和 XHTML 验证。
最好的 HTML 解决方法
HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。
问题
- 您必须把视频转换为很多不同的格式
- <video> 元素无法通过 HTML 4 和 XHTML 验证。
- <embed> 元素无法通过 HTML 4 和 XHTML 验证。
注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。
优酷解决方案
在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”,比如 Windows Media Player 来播放这个 AVI 文件:
<a href="movie.swf">Play a video file</a>
关于内联视频的一段注释
当视频被包含在网页中时,它被称为内联视频。
如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。
同时请注意,用户可能已经关闭了浏览器中的内联视频选项。
我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。
在 HTML 中包房视频的最简单方法是,使用 YouTube。
纠结视频格式?
将视频转换为不同的格式可能既困难又耗时。
一个更简单的解决方案是让 YouTube 在您的网页中播放视频。
YouTube Video Id
保存(或播放)视频时,YouTube 会显示一个 id(例如 ih1l6wb7LhU)。
您可以使用这个 id,并在 HTML 代码中引用您的视频。
在 HTML 中保费 YouTube 视频
如需在网页上播放视频,请执行以下操作:
- 将视频上传到 YouTube
- 记下视频 id
- 在您的网页中定义
<iframe>
元素 - 让
src
属性指向视频的 URL - 使用
width
和height
属性来规定播放器的尺寸 - 向 URL 添加其他参数(参阅下文)
<iframe width="420" height="315" src="https://www.youtube.com/embed/ih1l6wb7LhU"> </iframe>
YouTube Autoplay + Mute
您可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放。但是,自动开始播放视频会让您的访问者感到烦恼!
注意:在大多数情况下,Chromium 浏览器都不允许自动播放。但始终允许静音自动播放。
在 autoplay=1
之后添加 mute=1
,可让您的视频自动开始播放(但已静音)。
YouTube - Autoplay + Muted
<iframe width="420" height="315" src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1"> </iframe>
YouTube Playlist
以逗号分隔的要播放的视频列表(原始 URL 除外)。
YouTube Loop
添加 loop=1
会让您的视频永远循环。
值 0(默认):视频将播放一次。
值 1:视频将循环(永远)。
YouTube - Loop
<iframe width="420" height="315" src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1"> </iframe>
YouTube Controls
添加 controls=0
会使视频播放器不显示控件。
值 0:播放器控件不显示。
值 1(默认):播放器控件显示。
YouTube - Controls
<iframe width="420" height="315" src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0"> </iframe>
什么是 HTML5?
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
HTML5 中的新内容?
HTML5 的新的文档类型(DOCTYPE)声明非常简单:
<!DOCTYPE html> The new character encoding (charset) declaration is also very simple: <meta charset="UTF-8">
HTML5 - 新特性
- 新的语义元素,比如 <header>, <footer>, <article>, and <section>。
- 新的表单控件,比如数字、日期、时间、日历和滑块。
- 强大的图像支持(借由 <canvas> 和 <svg>)
- 强大的多媒体支持(借由 <video> 和 <audio>)
- 强大的新 API,比如用本地存储取代 cookie。
所有现代浏览器都支持 HTML5。
此外,所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。
正因如此,您可以帮助老式浏览器处理”未知的“ HTML 元素。
把 HTML5 元素定义为块级元素
HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。
您可以把 CSS display 属性设置为 block,以确保老式浏览器中正确的行为:
header, section, footer, aside, nav, main, article, figure { display: block; }
您可以通过浏览器 trick 向 HTML 添加任何新元素:
拖放(Drag 和 Drop)是很常见的特性。它指的是您抓取某物并拖入不同的位置。
拖放是 HTML5 标准的组成部分:任何元素都是可拖放的。
下列是关于拖放的简单例子:
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" οndragstart="drag(event)" width="336" height="69"> </body> </html>
把元素设置为可拖放
首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true:
<img draggable="true">
拖放的内容 - ondragstart 和 setData()
然后,规定当元素被拖动时发生的事情。
在上面的例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。
dataTransfer.setData() 方法设置被拖动数据的数据类型和值:
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
在本例中,数据类型是 "text",而值是这个可拖动元素的 id ("drag1")。
拖到何处 - ondragover
ondragover 事件规定被拖动的数据能够被放置到何处。
默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。
这个任务由 ondragover 事件的 event.preventDefault() 方法完成:
event.preventDefault()
进行放置 - ondrop
当放开被拖数据时,会发生 drop 事件。
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }
代码解释:
- 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)
- 通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素中
HTML 本地存储:优于 cookies。
什么是 HTML 本地存储?
通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。
HTML 本地存储对象
HTML 本地存储提供了两个在客户端存储数据的对象:
- window.localStorage - 存储没有截止日期的数据
- window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:
if (typeof(Storage) !== "undefined") { // 针对 localStorage/sessionStorage 的代码 } else { // 抱歉!不支持 Web Storage .. }
localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。
// 存储 localStorage.setItem("lastname", "Gates"); // 取回 document.getElementById("result").innerHTML = localStorage.getItem("lastname");
实例解释:
- 创建 localStorage 名称/值对,其中:name="lastname",value="Gates"
- 取回 "lastname" 的值,并把它插到 id="result" 的元素中
上例也可这样写:
// 存储 localStorage.lastname = "Gates"; // 取回 document.getElementById("result").innerHTML = localStorage.lastname;
删除 "lastname" localStorage 项目的语法如下:
localStorage.removeItem("lastname");
注释:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!
下面的例子对用户点击按钮的次数进行计数。在代码中,值字符串被转换为数值,依次对计数进行递增:
if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
sessionStorage 对象
sessionStorage 对象等同 localStorage 对象,不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页,数据也会被删除。
下例在当前 session 中对用户点击按钮进行计数:
if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "在本 session 中,您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";
使用应用程序缓存,通过创建 cache manifest 文件,可轻松创建 web 应用的离线版本。
什么是应用程序缓存?
HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
Cache Manifest 基础
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache"
>
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议文件扩展名是:".appcache"。
注意:manifest 文件需要设置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件有三个部分:
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。
NETWORK
下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:
NETWORK:
login.asp
可以使用星号来指示所有其他其他资源/文件都需要因特网连接:
NETWORK: * FALLBACK
下面的 FALLBACK 部分规定如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件:
FALLBACK:
/html/ /offline.html
注释:第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改(参阅下面的提示)
- 由程序来更新应用缓存
实例 - 完整的 Cache Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注意事项
请留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。
Web worker 是运行在后台的 JavaScript,不会影响页面的性能。
什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成。
Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。
检测 Web Worker 支持
在创建 web worker 之前,请检测用户浏览器是否支持它:
if (typeof(Worker) !== "undefined") { // 是的!支持 Web worker! // 一些代码..... } else { // 抱歉!不支持 Web Worker! }
创建 Web Worker 文件
现在,让我们在一个外部 JavaScript 文件中创建我们的 web worker。
在此处,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
注释: web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。
创建 Web Worker 对象
现在我们已经有了 web worker 文件,我们需要从 HTML 页面调用它。
下面的代码行检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:
if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); }
然后我们就可以从 web worker 发生和接收消息了。
向 web worker 添加一个 "onmessage" 事件监听器:
w.onmessage
= function(event){
document.getElementById("result").innerHTML = event.data;
};
当 web worker 传送消息时,会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。
终止 Web Worker
当创建 web worker 后,它会继续监听消息(即使在外部脚本完成后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();
复用 Web Worker
如果您把 worker 变量设置为 undefined,在其被终止后,可以重复使用该代码:
w = undefined
;
完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button οnclick="startWorker()">Start Worker</button> <button οnclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry! No Web Worker support."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html>
Web Worker 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
- window 对象
- document 对象
- parent 对象
Server-Sent 事件允许网页从服务器获得更新。
Server-Sent 事件 - One Way Messaging
Server-Sent 事件指的是网页自动从服务器获得更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。
例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; };
例子解释:
- 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
- 每当接收到一次更新,就会发生 onmessage 事件
- 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
检测 Server-Sent 事件支持
在 TIY 实例中,我们编写了一段额外的代码来检测服务器发送事件的浏览器支持:
if(typeof(EventSource) !== "undefined") { // 是的!支持服务器发送事件! // 一些代码..... } else { // 抱歉!不支持服务器发送事件! }
服务器端代码实例
为了使上例运行,您需要能够发送数据更新的服务器(比如 PHP 或 ASP)。
服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在,您可以开始发送事件流了。
PHP 中的代码 (demo_sse.php): <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> ASP 中的代码 (VB) (demo_sse.asp): <% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is: " & now()) Response.Flush() %>
代码解释:
- 把报头 "Content-Type" 设置为 "text/event-stream"
- 规定不对页面进行缓存
- 输出要发送的日期(始终以 "data: " 开头)
- 向网页刷新输出数据
EventSource 对象
在上例中,我们使用 onmessage 事件来获取消息。不过还可以使用其他事件:
事件 | 描述 |
---|---|
onopen | 当通往服务器的连接被打开 |
onmessage | 当接收到消息 |
onerror | 当发生错误 |