一、嵌入元素總彙
元素名稱
說明
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=)