第 8 章嵌入元素 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 8 章嵌入元素学习要点： 1.嵌入元素总汇 2.嵌入元素解析主讲教师：李炎恢本章主要探讨 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 | 关联<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&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 是 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 浏览器不支持此元素。