第 8 章嵌入元素

柔光的暖阳◎ 2022-05-25 00:21 172阅读 0赞

摘要：  
1.嵌入元素总汇  
2.嵌入元素解析  
本章主要探讨 HTML5中嵌入元素，嵌入元素主要功能是把外部的一些资源插入到  
HTML中。

**一．嵌入元素总汇**  
这里所列出的元素，并非本节课全部涉及到，比如音频 audio、视频 video、以及动态  
图像 canvas和媒体资源 source、track等会在后面章节或季度讲解。  
![这里写图片描述][70]

二．嵌入元素解析  
1.<img>嵌入图像  
<img src=”img.png”>  
解释：<img>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。  
![这里写图片描述][70 1]

ismap：点击区域可以获取到点击的坐标，提交出去。

<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浏览器不支持此元素。

[70]: /images/20220525/2a5bb291ab3f475c9b21d2e685ca1f01.png
[70 1]: /images/20220525/5870661f695b44d3b3cd358be3085316.png