一、嵌入元素总汇
元素名称
说明
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="备用图">
</a>
2、<map>创建分区响应图：即点击图片不同位置转到不同超链接上去
1
2
3
4
5
6
<code><</code><code>img</code> <code>src</code><code>=</code><code>"img.png"</code> <code>alt</code><code>=</code><code>"风景图"</code> <code>width</code><code>=</code><code>"339"</code> <code>height</code><code>=</code><code>"229"</code> <code>usemap</code><code>=</code><code>"#Map"</code><code>></code>
<code><</code><code>map</code> <code>name</code><code>=</code><code>"Map"</code><code>></code>
<code> </code><code><</code><code>area</code> <code>shape</code><code>=</code><code>"rect"</code> <code>coords</code><code>=</code><code>"31,28,112,100"</code> <code>href</code><code>=</code><code>"http://www.baidu.com"</code> <code>target</code><code>=</code><code>"_blank"</code> <code>alt</code><code>=</code><code>"方形"</code> <code>></code>
<code> </code><code><</code><code>area</code> <code>shape</code><code>=</code><code>"circle"</code> <code>coords</code><code>=</code><code>"187,142,47"</code> <code>href</code><code>=</code><code>"http://www.google.com"</code> <code>target</code><code>=</code><code>"_blank"</code> <code>alt=圆形"></code>
<code> </code><code><</code><code>area</code> <code>shape</code><code>=</code><code>"poly"</code> <code>coords</code><code>=</code><code>"287,26,240,66,308,112"</code> <code>href</code><code>=</code><code>"http://www.sina.com.cn"</code> <code>target</code><code>=</code><code>"_blank"</code> <code>alt=多边形"></code>
<code></</code><code>map</code><code>></code>
解释：通过图片中的热点进行超链接，这里我们采用Dreamweaver进行操作生成的。
<a href="https://s4.51cto.com/wyfs02/M02/8D/99/wKioL1ijsIKi-Y3LAAL5LdUc8V0804.png" target="_blank"></a>
3、<iframe>嵌入另一个页面
<code><</code><code>a</code> <code>href</code><code>=</code><code>"index.html"</code> <code>target</code><code>=</code><code>"in"</code><code>>index</</code><code>a</code><code>></code>
<code><</code><code>a</code> <code>href</code><code>=</code><code>"http://www.baidu.com"</code> <code>target</code><code>=</code><code>"in"</code><code>>百度</</code><code>a</code><code>></code>
<code><</code><code>ifram</code> <code>src</code><code>=</code><code>"http://www.youku.com"</code> <code>width</code><code>=</code><code>"600"</code> <code>height</code><code>=</code><code>"500"</code> <code>name</code><code>=</code><code>"in"</code><code>></</code><code>frame</code><code>></code>
解释：<iframe>表示内嵌一个HTML文档，其下的src属性表示初始化时显示的页面，width和heigth表示内嵌文档的长度和高度，name表示用于target的名称。
示例：
<code><</code><code>a</code> <code>href</code><code>=</code><code>"http://www.baidu.com"</code><code>>百度</</code><code>a</code><code>> | <</code><code>a</code> <code>href</code><code>=</code><code>"http://haosou.com"</code><code>>好搜</</code><code>a</code><code>></code>
<code><</code><code>br</code><code>></code>
<code><</code><code>iframe</code> <code>src</code><code>=</code><code>"http://www.soso.com"</code> <code>width</code><code>=</code><code>"800"</code> <code>height</code><code>=</code><code>"600"</code><code>></</code><code>iframe</code><code>></code>
上面的例子修改代码如下：
<code><</code><code>a</code> <code>href</code><code>=</code><code>"7.html"</code><code>><</code><code>img</code> <code>ismap </code><code>src</code><code>=</code><code>"1.png"</code> <code>width</code><code>=</code><code>"300"</code> <code>height</code><code>=</code><code>"200"</code> <code>alt</code><code>=</code><code>"备用图"</code><code>></</code><code>a</code><code>></code>
<code><</code><code>br</code><code>><</code><code>br</code><code>><</code><code>br</code><code>></code>
<code><</code><code>a</code> <code>href</code><code>=</code><code>"http://www.baidu.com"</code> <code>target</code><code>=</code><code>"in"</code><code>>百度</</code><code>a</code><code>> | <</code><code>a</code> <code>href</code><code>=</code><code>"http://haosou.com"</code> <code>target</code><code>=</code><code>"in"</code><code>>好搜</</code><code>a</code><code>></code>
<code><</code><code>iframe</code> <code>src</code><code>=</code><code>"http://www.soso.com"</code> <code>width</code><code>=</code><code>"800"</code> <code>height</code><code>=</code><code>"600"</code> <code>name</code><code>=</code><code>"in"</code><code>></</code><code>iframe</code><code>></code>
再点击页面上的“百度”，会在插入的页面窗口中打开百度的页面
<a href="https://s3.51cto.com/wyfs02/M02/8D/9C/wKiom1ijuXLi3ngzAAGLMJmW2fs311.png" target="_blank"></a>
4、<embed>嵌入插件内容
<code><</code><code>embed</code> <code>src</code><code>=</code><code>"http://v.youku.com/v_show/id_XMjUxMTEyOTU0NA==.html?f=29473274&spm=a2hpk.20010195.m_90171.5~5!2~5~5~5~5~5~5!2~A&from=y1.3-paike-grid-4071-10195.90404-90171.1-1"</code> <code>width</code><code>=</code><code>"880"</code> <code>height</code><code>=</code><code>"800"</code><code>></</code><code>embed</code><code>></code>
解释：<embed>元素是扩展浏览器的功能，大部分用于添加对插件的支持。这里添加了一个优酷的视频。width和height表示宽度和高度，src表示文件路径
<a href="https://s2.51cto.com/wyfs02/M02/8D/99/wKioL1ijvP6S8OGwAAJc2aNlkBU378.png" target="_blank"></a>
5、<object>和<param>元素
解释：<object>元素<param>和<embed>一样，只不过object是html4的标准，而embed是html5的标准。而object不但可以嵌入flash，还可以嵌入图片等其他内容。由于图片、音频、视频、插件都有相应标签元素代替，我们这里暂时不对其细讲
6、<progress>显示进度
<code><</code><code>progress</code> <code>value</code><code>=</code><code>"30"</code> <code>max</code><code>=</code><code>"100"</code><code>></</code><code>progress</code><code>></code>
解释：<progress>元素可以显示一个进度条，一般通过JS控制内部的值。IE9以及更低版本不支持此元素
<a href="https://s2.51cto.com/wyfs02/M02/8D/9D/wKiom1ijxOrTqfjiAAAQxoGUZUc622.png" target="_blank"></a>
7、<meter>显示范围里的值
<code><</code><code>meter</code> <code>value</code><code>=</code><code>"90"</code> <code>min</code><code>=</code><code>"10"</code> <code>max</code><code>=</code><code>"100"</code> <code>low</code><code>=</code><code>"40"</code> <code>high</code><code>=</code><code>"80"</code> <code>optimum</code><code>=</code><code>"60"</code><code>></</code><code>meter</code><code>></code>
解释：<meter>元素显示某个范围内的值，其下的属性包含：min和max表示范围边界，low表示小于它的值过低，high表示大于它的值过高，optimum表示最佳值。但不出现效果。IE浏览器和谷歌浏览器不支持此元素。
本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/1897957，如需转载请自行联系原作者
![Oracle索引内部结构研究[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)