第六十五，html嵌入元素

標籤：

html嵌入元素

學習要點：

    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="401.png" alt="風景圖" width="318" height="213" title="風景圖">

效果：

解釋：<img>元素主要是插入一張外部的圖片，那麼圖片的路徑問題和超連結一致。img的私人屬性

屬性名稱                                 說明

src       內嵌影像的URL

alt        當圖片不載入時顯示的備用內容

title　　圖片標題，滑鼠放到圖片上顯示

width       定義圖片的長度（單位是像素）

height      定義圖片的高度（單位是像素）

ismap      建立伺服器端分區響應圖

usemap      關聯<map>元素

 

建立伺服器端分區響應圖

<a href="1.html">    <img src="401.png" alt="風景圖" width="318" height="213" title="風景圖" ismap></a>

分區響應圖，就是滑鼠在圖片不同位置點擊，就會將圖片當前的地區參數發送到網址後面，如：http://localhost:63342/py/1.html?170,160

 

2.<map>建立分區響應圖，圖片地圖

<imgsrc="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="https://www.so.com" target="in">好搜</a> |<a href="http://www.baidu.com" target="in">百度</a><br><iframe src="https://www.so.com" width="600" height="500" name="in"></iframe>

效果：

解釋：<iframe>表示內嵌一個HTML文檔。其下的src屬性工作表示初始化時顯示的頁面，width和height表示內嵌文檔的長度和高度，name表示用於target的名稱串連。

 

4.<embed>嵌入外掛程式內容

 

屬性名稱                                 說明

 

src       　外掛程式URL

 

type        外掛程式類型

 

width　　寬度
height　  高度

 

<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="60" min="10" max="100" low="40" high="80" optimum="60"></meter>

效果：

解釋：<meter>元素顯示某個範圍內的值。其下的屬性包含：min和max表示範圍邊界，low表示小於它的值過低，high表示大於它的值過高，optimum表示最佳值，但不出現效果。IE瀏覽器不支援此元素。

第六十五，html嵌入元素