一.嵌入元素

一．嵌入元素总汇

这里所列出的元素，并非本节课全部涉及到，比如音频 audio、视频 video、以及动态图像 canvas 和媒体资源 source、track 等会在后面章节或季度讲解。

二．嵌入元素解析

1.<img>**嵌入图像**

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

img 的私有属性

2.<map>**创建分区响应图**

解释：通过图片中的热点进行超链接，这里我们采用 Dreamweaver 进行操作生成的。

3.<iframe>**嵌入另一个文档**

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

4.<embed>**嵌入插件内容**

解释：<embed>元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个土豆网的 flash 视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的文件，再继续探讨；width 和 height 表示宽高；src 表示文件路径。

5.<object>**和<param>元素**

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

6.<progress>**显示进度**

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

7.<meter>**显示范围里的值**

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

	<!-- 1.<img>**嵌入图像** -->
		<img src="img/1.JPG" ismap alt="人物图" />
		<br>

		<img src="img/1.JPG" alt="人物图" usemap="#Map">
		<br>
		<!-- 2.<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="圆形">
		</map>
		<br>
		<!-- 3.<iframe>**嵌入另一个文档** -->
		<a href="index.html" target="in">index</a> | <a href="https://www.4399.com" target="in">4399</a>
		<br>
		<iframe src="http://www.ycku.com" width="600" height="500" name="in"></iframe>
		<br>
		<!-- 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>
		<!-- 6.<progress>**显示进度** -->
		<progress value="30" max="100"></progress>
		<!-- 7.<meter>**显示范围里的值** -->
		<meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter>

结果展示：

最后

以上就是怕孤单冰淇淋为你收集整理的HTML5（第四部分）一.嵌入元素的全部内容，希望文章能够帮你解决HTML5（第四部分）一.嵌入元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。