HTML5嵌入标签整理及使用介绍
本章主要探讨 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>元素主要是插入一张外部的图片，那么图片的路径问题和超链接一致。
<a href="index.html"><img src="img.png" width="339" height="229" alt="风景图" ismap></a>img 的私有属性
| 属性名称 | 说明 |
| src | 嵌入图像的URL |
| alt | 当图片不加载时显示的备用内容 |
| width | 定义图片的长度（单位是像素） |
| height | 定义图片的高度（单位是像素） |
| ismap | 创建服务器端分区响应图 |
| usemap | 关联<map>元素 |
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="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 浏览器不支持此元素。
<html lang="en"><head><meta charset="UTF-8"><title>HTML5嵌入标签</title><style type="text/css">*{padding: 0; margin: 0;}ul,li{ }a{ text-decoration: none; color:#000;}body{font-family: '微软雅黑';}dl{width:100%; height: auto; padding: 20px 0; border-bottom: 1px solid #ccc;}dl dt{ padding-bottom: 5px; color: red;}dl dd{ padding-bottom: 5px; }</style></head><body><dl><dt>"img" 嵌入图像</dt><dd><a href="index.html"><img ismap src="img/logo.jpg" alt="logo" width="200" height="200"></a></dd><dd>点击这个图片,点击的坐标将作为查询字符串发送到服务器。</dd></dl><dl><dt>"map" 创建分区响应图</dt><dd><img ismap src="img/logo.jpg" alt="logo" width="200" height="200" usemap="#Map"><map name="Map"><area shape="rect" coords="2,0,48,198" href="http://www.baidu.com"><area shape="circle" coords="110,53,37" href="http://www.sogou.com"><area shape="poly" coords="190,85,164,49,151,78" href="https://www.so.com"></map></dd><dd>解释：通过图片中的热点进行超链接，这里我们采用 Dreamweaver 进行操作生成的。</dd></dl><dl><dt>"iframe" 嵌入另一个文档</dt><dd><a href="http://www.baidu.com" target="in">百度</a> <a href="http://www.sogou.com" target="in">搜狗</a><iframe src="" frameborder="0" width="600" height="500" name="in"></iframe></dd><dd>解释："iframe" 表示内嵌一个 HTML 文档。其下的 src 属性表示初始化时显示的页面，width 和 height 表示内嵌文档的长度和高度，name 表示用于 target 的名称。</dd></dl><dl><dt>"embed"嵌入插件内容</dt><dd><embed src="img/v.flv" type="application/x-shockwave-flash" width="480" height="400"></embed></dd><dd>解释：<embed>元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了 flash 视频。type 类型表示被插入内容的类型，这里不列出所有，后面如果遇到其他类型的文件，再继续探讨；width 和 height 表示宽高；src 表示文件路径。</dd></dl><dl><dt>"progress" 显示进度</dt><dd><progress value="30" max="100"></progress></dd><dd>解释："progress"元素可以显示一个进度条，一般通过 JS 控制内部的值。IE9 以及更低版本不支持此元素。</dd></dl><dl><dt>meter 显示范围里的值</dt><dd><meter value="60" min="10" max="100" low="40" high="80" optimum="60"></meter></dd><dd>解释："meter" 元素显示某个范围内的值。其下的属性包含：min 和 max 表示范围边界，low 表示小于它的值过低，high 表示大于它的值过高，optimum 表示最佳值，但不出现效果。IE 浏览器不支持此元素。</dd></dl></body></html>
如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉 上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。
每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！