第六十五，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瀏覽器不支持此元素。