學習要點：
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 瀏覽器不支援此元素。