HTML5 嵌入元素

要点：

嵌入元素汇总
嵌入元素解析

嵌入元素主要功能是把外部的一些资源插入到HTML 中。

嵌入元素总汇

这里所列出的元素，并非此教程所全部涉及的，音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等将在后续章节讲解。

元素名称	说明
img	嵌入图片
map	定义客户端分区响应图
area	表示一个用户客户端分区响应图的区域
audio	表示一个音频资源
video	表示一个视频资源
iframe	嵌入一个文档
embed	用插件在 HTML 中嵌入内容
canvas	生成一个动态的图形画布
meter	嵌入数值在许可值范围背景中的图形表示
object	在 HTML 文档中嵌入内容
param	表示将通过 object 元素传递给插件的参数
progress	嵌入目标进展或任务完成情况的图形表示
source	表示媒体资源
svg	表示结构化矢量内容
track	表示媒体的附加轨道（例如字幕）

嵌入元素解析

1、<img>嵌入图像

<img src="img.png">

解析：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。

img的私有属性

属性名称	说明
src	嵌入图像的 URL
alt	当图片不加载时显示的备用内容
width	定义图片的长度（单位是像素）
height	定义图片的高度（单位是像素）
ismap	创建服务器端分区响应图
usemap	关联元素

使用方式如下：

<a href="index.html">
<img src="img.png" width="339" height="229" alt="风景图" ismap> </a>

2、<map>创建分区响应图

<img src="img.png" alt="风景图" width="339" height="229" usemap="#Map"> 
<map name="Map">
	<area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形">
	<area shape="circle" coords="187,142,47" href="http://www.taobao.com" target="_blank" alt="圆形">
	<area shape="poly" coords="287,26,240,66,308,112" href="http://www.sogou.com" target="_blank" alt="多边形">
</map>

解析：通过图片中的位点进行超链接。简单来说coords结合alt画出了图片的一部分区域，当鼠标点击图片的这一部分区域时，浏览器将会转到href所指的位置。 这个区域可以使用网页开发工具进行相关的操作生成的。

coords的属性值及对应的使用方法：

值	描述
x1,y1,x2,y2	如果 shape 属性设置为 “rect”，则该值规定矩形左上角和右下角的坐标。
x,y,radius	如果 shape 属性设置为 “circ”，则该值规定圆心的坐标和半径。
x1,y1,x2,y2,…,xn,yn	如果 shape 属性设置为 “poly”，则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。

3、<iframe>嵌入另一个文档

<a href="index.html" target="in">index</a> | <a href="http://www.bing.com" target="in">必应</a>
<iframe src="http://www.ycku.com" width="600" height="500" name="in"></iframe>

解析：<iframe>表示内嵌一个 HTML 文档，它可以在一个页面内部开辟一个窗口来显示另一个页面。其下的 src 属性表示初始化时显示的页面， width 和 height 表示内嵌文档窗口的长度和高度，name 表示用于 target 的名称。点击上面的两个链接，其链接的页面内容将会显示在开辟的新窗口内。

4、<embed>嵌入插件内容

<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" width="480" height="400"></embed>

解析：<embed>元素能够扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的 flash 视频，swf是flish可播放文件。type 属性表示被插入内容的类型；width 和 height 表示插件窗口的宽高；src 表示文件路径。

5、<object>和<param>元素

解析：<object>元素和<embed>一样用于嵌入插件，但object 是 html4 的标准，embed 是 html5 的标准。object 不但可以嵌入 flash，还可以嵌入图片等其他内容。在HTML5中图片、音频、视频、插件都有相应标签元素代替所以不在学习其使用，这里仅简要说明。

6、<progress>显示进度

<progress value="30" max="100"></progress>

解析：<progress>元素可以显示一个进度条，一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。

7、<meter>显示范围里的值

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

解析：<meter>元素显示某个范围内的值，也可做进度条。其下的属性包含：min 和 max 表示范围边界， low 表示小于它的值过低，high 表示大于它的值过高，不同的value会根据low，high变换进度条颜色，optimum 表示最佳值，但不出现效果。IE 浏览器不支持此元素。