html5学习19：嵌入内容

1、嵌入图像

img元素允许我们在HTML文档里嵌入图像。

属性：src,alt,height,width,usemap,ismap

<img src="te.png" alt="text image" width="200" height="200"/>

src属性指定了图像的URL，alt定义了img元素的备用内容。图像无法显示的时候就呈现alt里面的内容。

1.1 在超链接里嵌入图像

img元素的一个常见用法是结合a元素（第8章已介绍过)创建一个基于图像的超链接。它类似表单里基于图像的提交按钮（在第12章介绍过)。

<a href="http://baidu.com/otherpage.html">
	<img src="t.png" ismap alt="img" />
</a>

如果点击这张图像，浏览器会导航至父元素a的href属性所指定的URL上。给img元素应用ismap属性就创建了一个服务器端分区响应图，意思是在图像上点击的位置会附加到URL上。举个例子，如果点击的位置是距图像顶部4像素，左边缘10像素，浏览器就会导航到下面的地址:

http://baidu.com/otherpage.html?10,4

1.2 创建客户端分区响应图

我们可以创建一个客户端分区响应图,通过点击某张图像上的不同区域让浏览器导航到不同的URL上。这一过程不需要通过服务器引导，因此需要使用元素来定义图像上的各个区域以及它们所代表的行为。客户端分区响应图的关键元素是map。

map属性有name,内容一个或多个area元素。

map元素包含一个或多个area元素，它们各自代表了图像上可被点击的一块区域。area属性有alt,href,target,rel,media,hreflang,typeshape,coords。

area元素的属性可以被分为两类，第一类处理的是area所代表的图像区域被用户点击后浏览器会导航到的URL。

属性	说明
href	此区域被点击时浏览器应该加载的URL
alt	替代内容，参见img元素的对应属性
target	应该用来显示URL的浏览上下文，参见base元素的对应属性
rel	描述了当前文档和目标文档之间的关系，参见link元素的对应属性
media	此区域适用的媒介，参见第7章style元素的对应属性
hreflang	目标文档的语言
type	目标文档的MIME类型

第二类则包含了属性: shape和coords属性。可以用这些属性来标明用户可以点击的各个图像区域。shape和coords属性是共同起作用的。coords属性的意思根据shape属性的值而定。

shape值	coords值
rect	这个值代表了一个矩形区域。coords属性必须由四个逗号分隔的整数组成，他们代表了下位置之间的距离：图像左边缘与矩形的左侧，图像的上边缘与矩形的上侧，图像的右边缘与矩形的右侧，图像的下边缘与矩形的下侧
circle	这个值代表了一个圆形区域。coords属性必须由三个用逗号分隔的整数组成，它们代表了下列参数:从图像左边缘到圆心的距离，从图像上边缘到圆心的距离，圆的半径
poly	这个值代表了一个多边形。coords属性必须至少包含六个用逗号分隔的整数，每一对数字各代表多边形的一个顶点
default	这个值的意思是默认区域，即覆盖整张图片。shape属性使用这个值时不需要提供coords值

<img src="t.png" usemap="#my"
<map name="my">
	<area href="1.html" shape="rect" coords="3,5,68,62" alt="swingming"/>
</map>

2、嵌入另一张HTML文档

iframe元素允许我们在现有的HTML文档中嵌入另一张文档。

属性有src,srcdoc,name,width,height,sandbox,seamless

<a href="fruit.html" target="frame">i like </a>
<iframe name="myframe" width="300" height="100">
</iframe>

属性sandbox对HTML文档进行限制，应用这个属性如果不附值，就会禁用脚本，表单，插件，指向其他浏览上下文的链接。

另外,iframe的内容被视为与HTML文档的其余部分来源不同,这样会引发额外的安全措施。可以通过定义sandbox属性的值来独立启用各种功能，就像这样:

<iframe sandbox="allw-forms">
</iframe>

iframe的sandbox属性所接受的allow值

值	说明
allow-forms	启用表单
allow-scripts	启用脚本
allow-top-navigation	允许链接指向顶层的浏览上下文，这样就能用另一个文档替换当前整个文档，或者创建新的标签和窗口
allow-same-origin	允许iframe里的内容被视为与文档其余部分拥有同一个来源位置

3、通过插件嵌入内容

object和embed元素最初都是作为扩展浏览器能力的一种方式，用于添加插件支持,而插件能够处理浏览器不直接支持的内容。这些元素是在第1章里提到的浏览器战争时期被引入的，分别来自于不同的阵营。

之后，object元素成了HTML4规范的一部分，而embed元素却没有(尽管embed元素已经被广泛使用)。为了公平对待这两种元素，HTML5添加了对embed元素的支持。这样，出于兼容性的缘故，你就有了两个非常相似的元素。

虽然object和embed元素通常用于插件，但它们也可以用来嵌入浏览器能直接处理的内容比如图像。

3.1 使用embed元素

属性：src,type,height,width

<embed src="http://www.youtybe.com/v/qzA?version=2" type="application/x-shockwave-flash" width="560" height="350" allowfullscreen="true"/>

src属性指定了内容的地址，type属性则指定了内容的MIME类型，这样浏览器就知道该如何处理它。width和height属性决定嵌入内容将在屏幕上占据的空间大小。你应用的其他任何属性都会被当做是插件或内容的参数。在这个例子中，我应用了一个名为allowfullscreen的属性，YouTube的视频播放器通过它来启用全屏观看功能。

3.2 使用object和param元素

object元素的属性，data,type,height,width,usemap,name,form。内容可以有空白或任意数量的param元素，并可选择添加短语或流内容作为备用内容。

<object width="200" height="200" data="http://www.baidu.com/video" type="application/x-shochwave-flash">
    <param name="alloFullScreen" value="true/>
</object>

name和value属性定义了参数的name和value。

1)指定备用内容

object元素的一大优点是可以包含备用内容，在指定内容不可用时显示出来。

<object width="200" height="200" data="http://www.baidu.com/video" >
    <param name="alloFullScreen" value="true"/>
    <b>Sorry!</b>
</object>

让data属性引用了一个不存在的文件。浏览器会尝试载人这个不存在的内容，如果失败了，就会转而显示object元素中的内容。param元素会被忽略，只剩下短语和流内容会被显示出来。

代码清单里去掉了type属性。当type属性不存在时，浏览器会尝试从数据本身判断其内容类型。对于某些浏览器上的特定插件而言，即使数据不存在，插件也会被加载。这就意味着屏幕上显示的是一片空白区域,而不是备用内容。

4、object元素的其他用途

4.1 使用object元素嵌入图像

<object data="t.png" type="image/png">
</object>

4.2 使用object元素创建分区响应图

<map name="my">
	<area href="1.html" shape="rect" coords="3,5,68,62" alt="swingming"/>
</map>
<object data="t.png" type="image/png" usemap="#my">
</object>

4.3 将object元素作为浏览上下文环境

可以用object元素来将一张HTML文档嵌入到另一张文档之中，就像用iframe元素一样。如果应用name属性，就会创建一个浏览上下文，可以结合一些元素(比如a和form )的target属性使用。

<a href="t.html" target="frame"></a>
<object type="text/html" name="frame" width="300">
    
</object>

5、嵌入数字表现形式

5.1、显示进度

progress元素用来表现某项任务逐渐完成的过程。属性有value,max,form。

value属性定义了当前的进度，位于0和max属性的值所构成的范围之间。当max属性被省略时，范围是0至1。用浮点数来表示进度，比如0.3代表30%。

<progress id="myprogress" value="10" max="100"/>

5.2 显示范围里的值

meter元素显示了某个范围内所有可能值中的一个。属性有value,min,max,low,high,optimum,form。

min和max属性设定了可能值所处范围的边界，它们可以用浮点数来表示。meter元素的显示可以分为三个部分:过低、过高和最佳。low属性设置了一个值，在它之下的所有值都被认为是过低;high属性设置了一个值，在它之上的所有值都被认为是过高;optimum属性则指定了“最佳”的值。

<meter id="my" value="90" min="10" max="100" low="40" high="80" optimum="60"></meter>

6、其他嵌入元素

6.1 嵌入音频和视频

HTML5定义了一些新元素，它们支持在不借助插件的情况下给HTML文档嵌入音频和视频。这些元素（ audio、video、source和track)。

6.2 嵌入图形

canvas元素是HTML5引人的另一大功能领域，我们可以用它来给HTML文档添加动态图形。