HTML 嵌入元素

学习要点

1. 嵌入元素总汇
2. 嵌入元素解析

一、嵌入元素总汇

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

二、嵌入元素解析

1、 < img > 嵌入图像

<img src="img.jpg">

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

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

• src
  

<img src="img.jpg">

• alt
  
  

<img src="img3.jpg" alt="风景图">

• width,height
  
  

<img src="img.jpg" width="200px" height="200px">

• ismap
  
  
  
  

<a href="嵌入元素.html">    <img src="img.jpg" ismap></a>

2、map创建分区响应图

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507629472245&di=824cc86cb4731551570be6676842b6c2&imgtype=0&src=http%3A%2F%2Fimage.shuoman.com%2Ffile%2Fuserfiles%2Fimages%2Fauto20%2F2017031910102226890.jpg" usemap="#Map"><map name="Map">    <area shape="rect" coords="47,33,132,102" href="http://www.baidu.com" target="_blank" alt="方形">    <area shape="circle" coords="232,115,40" href="https://liulanqi.baidu.com/?sid=10002896" target="_blank" alt="圆形">    <area shape="poly" coords="56,151,177,182,50,217" href="https://www.so.com" target="_blank" alt="多边形"></map>

解释：通过图片中的人点进行超链接。

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

百度|好搜

<a href="http://www.baidu.com" target="in">百度</a>|<a href="http://www.so.com" target="in">好搜</a><br><iframe src="http://www.firefoxchina.cn/?ntab" width="800" height="600" name="in"></iframe><br>

解释：< iframe > 表示内嵌一个HTML文档。在其下的src属性表示初始化时显示的页面，width和height表示内嵌文档的长度和高度，name表示用于target的名称。

4、< embed > 嵌入插件内容

<embed src="http://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视频。type类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的文件，再继续探讨；width和height表示宽高；src表示文件路径。

5、< object >和 < param >元素

解释：object元素和embed一样，只不过object是html4的标准，而embed是htnl5的标准。而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 value="30" min="10" max="100" low="40" high="80" optimum="60"></meter><meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter>

解释：meter元素显示某个范围内的值。其下的属性包含：min和max表示范围边界，low表示小于它的值过低，high表示大于它的值过高，optimum表示最佳值，但不出现效果。IE浏览器不支持此元素。