HTML5基础学习笔记（五）

Day05 HTML页面元素属性

四、嵌入元素

1.嵌入元素汇总

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

2.嵌入元素解析

1.<img>嵌入图像
<img src="img.png">
解释：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。
img 的私有属性

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

<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.google.com" target="_blank" alt="圆形">
<area shape="poly" coords="287,26,240,66,308,112"
href="http://www.soso.com" target="_blank" alt="多边形">
</map>
解释：通过图片中的热点进行超链接，这里我们采用 Dreamweaver 进行操作生成的。

3.<iframe>嵌入另一个文档
<a href="index.html" target="in">index</a> |
<a href="http://www.baidu.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&resourceI
d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash"
width="480" height="400"></embed>
解释：<embed>元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了
一个土豆网的 flash 视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果
遇到其他类型的文件，再继续探讨；width 和 height 表示宽高；src 表示文件路径。

5.<object>和<param>元素
解释：<object>元素和<embed>一样，只不过 object 是 html4 的标准，而 embed 是
html5 的标准。而 object 不但可以嵌入 flash，还可以嵌入图片等其他内容。由于图片、
音频、视频、插件都有相应标签元素代替，我们这里暂时不对其详细讲解。

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 表示大于它的值过高，optimum 表示最佳值，但不出现效
果。IE 浏览器不支持此元素。