html5嵌入內(nèi)容_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

在HTML文檔中嵌入內(nèi)容，可以使你的頁(yè)面更加豐富。

嵌入圖像

使用img元素可以在HTML文檔里嵌入圖像，該元素包含如下屬性：

1）src：顯示圖像的URL；

2）alt：圖像的替代文本；

3）height：圖像的高度；

4）width：圖像的寬度；

5）usemap：將圖像定義為客戶(hù)端圖像映射；

6）ismap：將圖像定義為服務(wù)端圖像映射。

下面具體介紹對(duì)圖像的操作。

嵌入圖像

使用src和alt屬性就可以嵌入一張圖像。

<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/> 

src定義了圖像的URL，alt屬性定義了當(dāng)圖像無(wú)法顯示時(shí)，瀏覽器將顯示的替代文本。圖像無(wú)法顯示可能有以下原因：

1）網(wǎng)速太慢；

2）src屬性中的錯(cuò)誤；

3）瀏覽器禁用圖像；

4）用戶(hù)使用的是屏幕閱讀器。

強(qiáng)烈推薦在每個(gè)圖像中都使用該屬性，這樣當(dāng)圖像無(wú)法顯示時(shí)，用戶(hù)還是可以看到關(guān)于圖像的一些信息，而對(duì)于殘疾人來(lái)說(shuō)，alt屬性是他們了解圖像內(nèi)容的唯一方式。

alt屬性的最大長(zhǎng)度是1024個(gè)字符，包括空格和標(biāo)點(diǎn)，可以包含對(duì)特殊字符的實(shí)體引用，但不允許任何形式的標(biāo)簽。

alt文本的使用原則：

1）如果圖像包含信息，使用alt描述圖像；

2）如果圖像在a元素中，使用alt描述目標(biāo)鏈接；

3）如果圖像僅供裝飾，使用alt=""。

圖像在HTML標(biāo)記處理完畢后才會(huì)加載，瀏覽器通常不知道該給圖像預(yù)留多大的空間，這樣就導(dǎo)致加載圖像后，瀏覽器需要重定位屏幕上的內(nèi)容來(lái)容納它，導(dǎo)致屏幕的晃動(dòng)?？梢灾付▓D像的width和height屬性來(lái)解決該問(wèn)題，但注意width和height屬性應(yīng)該僅用來(lái)告訴瀏覽器圖像的尺寸，而不應(yīng)該用來(lái)動(dòng)態(tài)縮放圖像。

在超鏈接中嵌入圖像

結(jié)合a元素，img元素可以生成一個(gè)基于圖像的超鏈接。

<a href="otherpage.html">  
    <img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>  
</a> 

這樣當(dāng)點(diǎn)擊該圖像后，瀏覽器會(huì)導(dǎo)航至父元素a的href屬性所指定的URL上。給img元素應(yīng)用ismap屬性就創(chuàng)建了一個(gè)服務(wù)器端分區(qū)響應(yīng)圖：

<a href="otherpage.html">  
    <img src="triathlon.png" alt="Triathlon Image" width="200" height="67" ismap/>  
</a>  

這樣，圖像的點(diǎn)擊的位置會(huì)附加到URL上，例如，如果點(diǎn)擊的位置是距圖像頂部4像素，左邊10像素，則瀏覽器將導(dǎo)航到一下URL：

http://bjpowernode/listings/otherpage.html?10,4

服務(wù)端分區(qū)響應(yīng)圖通常意味著服務(wù)器會(huì)根據(jù)用戶(hù)在圖像上點(diǎn)擊區(qū)域的不同做出有差別的反應(yīng)。

客戶(hù)端分區(qū)響應(yīng)圖

客戶(hù)端分區(qū)響應(yīng)圖支持用戶(hù)通過(guò)點(diǎn)擊某張圖的不同區(qū)域讓瀏覽器導(dǎo)航到不同的URL上，我們需要使用元素來(lái)定義圖像上的各個(gè)區(qū)域以及他們所代表的行為，需要用到的元素包括map元素和area元素。

map元素

map元素的作用是定義一個(gè)客戶(hù)端圖像映射，map元素中包含一個(gè)或者area元素，他們各自代表了圖像上可被點(diǎn)擊的一塊區(qū)域。map元素通常包含屬性：

1）id：必須，為map標(biāo)簽定義唯一的標(biāo)識(shí)；

2）name：可選，名稱(chēng)。

area元素

area元素定義圖像映射中的區(qū)域，該元素總是嵌套在map元素中。area元素的屬性分為兩類(lèi)，第一類(lèi)處理的是area所代表的圖像區(qū)域被用戶(hù)點(diǎn)擊后瀏覽器會(huì)導(dǎo)航到的URL：

1）href：此區(qū)域被點(diǎn)擊后瀏覽器應(yīng)該加載的URL；

2）alt：替代內(nèi)容，同img元素的對(duì)應(yīng)屬性；

3）target：顯示URL的瀏覽上下文，同base元素的對(duì)應(yīng)屬性；

4）rel：描述當(dāng)前文檔和目標(biāo)文檔的關(guān)系，同link元素的對(duì)應(yīng)屬性；

5）media：媒介，同style元素的對(duì)應(yīng)屬性；

6）hreflang：目標(biāo)文檔的語(yǔ)言；

7）type：目標(biāo)文檔的MIME類(lèi)型。

第二類(lèi)包含了屬性：shape和coords屬性，用來(lái)標(biāo)明用戶(hù)可以點(diǎn)擊的各個(gè)圖像區(qū)域。shape屬性的取值如下：

1）rect：代表了一個(gè)矩形區(qū)域。對(duì)應(yīng)的coords屬性必須由四個(gè)用逗號(hào)分隔的整數(shù)組成(a,b,c,d)：a代表圖像的左邊緣與矩形的左側(cè)；b代表圖像的上邊緣與矩形的上側(cè)；c代表圖像的右邊與矩形的右側(cè)；d代表圖像的下邊緣與矩形的下側(cè)；

2）circle：代表了一個(gè)圓形區(qū)域。coords屬性必須由三個(gè)用逗號(hào)分隔的整數(shù)組成(a,b,c)：a代表從圖像左邊緣到圓心的距離；b代表從圖像上邊緣到圓心的距離；c代表圓的半徑；

3）poly：代表了一個(gè)多邊形。coords屬性必須至少包含六個(gè)用逗號(hào)分隔的整數(shù)，每一對(duì)數(shù)字各代表多邊形的一個(gè)頂點(diǎn)；

4）default：默認(rèn)區(qū)域，即覆蓋整張圖片。不需要提供coords值。

下面是一個(gè)例子：

<p><img src="triathlon.png" usemap="#mymap" alt="Triathlon Image"/></p>  
<map name="mymap">  
    <area href="swimpage.html" shape="rect" coords="3,5,68,62" alt="Swimming"/>  
    <area href="cyclepage.html" shape="rect" coords="70,5,130,62" alt="Running"/>  
    <area href="otherpage.html" shape="default" alt="default"/>  
</map> 

上面的腳本定義了用戶(hù)如果點(diǎn)擊圖片的游泳部分，瀏覽器導(dǎo)航至swimpage.html，如果用戶(hù)點(diǎn)擊圖像上的騎車(chē)部分，瀏覽器則會(huì)導(dǎo)航至cyclepage.html，點(diǎn)擊其它部分則導(dǎo)航至otherpage.html。

嵌入HTML文檔

iframe元素可以在現(xiàn)有的HTML文檔中嵌入另一張文檔。該元素支持的屬性如下：

1）src：在iframe中顯示的文檔的URL；

2）srcdoc：規(guī)定在iframe中顯示的頁(yè)面的HTML內(nèi)容；

3）name：規(guī)定iframe的名稱(chēng)，可以在瀏覽上下文與其他元素（如a、form、button、input和base）的target屬性中使用該名稱(chēng)；

4）width：定義iframe的寬度；

5）height：規(guī)定iframe的高度；

6）sandbox：對(duì)iframe中的內(nèi)容的額外限制，支持的值包括：

---""：應(yīng)用以下所有的限制；

---allow-same-orgin：允許iframe內(nèi)容被視為與文檔其余部分擁有同一個(gè)來(lái)源；

---allow-top-navigation：允許鏈接指向頂層的瀏覽上下文，這樣就能用另一個(gè)文檔替換當(dāng)前整個(gè)文檔，或者創(chuàng)建新的標(biāo)簽和窗口； ---allow-top-scripts：?jiǎn)⒂媚_本； ---allow-forms：?jiǎn)⒂帽韱巍?/p>

7）seamless：指示瀏覽器把iframe的內(nèi)容顯示得像主HTML文檔的一個(gè)整體組成部分；默認(rèn)情況下iframe的內(nèi)容會(huì)有一個(gè)邊框，如果內(nèi)容比width和height屬性所指定的尺寸要大，還會(huì)出現(xiàn)一個(gè)滾動(dòng)條。該屬性的使用方式如下（該屬性大部分瀏覽器還不支持）：

<iframe src="demo_iframe.htm" seamless></iframe>  

下面是iframe的一個(gè)完整例子：

<header>  
    <h1>Things I like</h1>  
    <nav>  
        <ul>  
            <li><a href="fruits.html" target="myframe">Fruits IＬike</a></li>  
            <li><a href="activities.html" target="myframe">Activities IＬike</a></li>  
        </ul>  
    </nav>  
</header>  
<iframe name="myframe" width="300" height="100"/>  

通過(guò)插件嵌入內(nèi)容

object元素和embed元素用于擴(kuò)展瀏覽器能力，添加插件支持。

embed元素

embed元素定義嵌入的內(nèi)容，支持的屬性如下：

1）height：設(shè)置嵌入內(nèi)容的高度；

2）src：嵌入內(nèi)容的URL；

3）type：定義嵌入內(nèi)容的MIME類(lèi)型，這樣瀏覽器就知道該如何處理它；

4）width：設(shè)置嵌入內(nèi)容的寬度。

你應(yīng)用的其它任何屬性都會(huì)被當(dāng)作是插件或內(nèi)容的參數(shù)?？聪旅娴睦樱?/p>

<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3" type="application/x-shockwave-flash" width="560" height="340" allowfullscreen="true"/>

上面使用了allowfullscreen屬性，用于設(shè)置是否啟用全屏觀看功能。

object元素

object元素也用于定義一個(gè)嵌入的對(duì)象，比如：圖像、音頻、視頻、PDF、Flash等。object元素的有點(diǎn)是可以包含備用內(nèi)容，在指定內(nèi)容不可用時(shí)顯示出來(lái)。

<object width="560" height="349" data="http://titan/myimaginaryfile">  
    <param name="allowFullScreen" value="true"/>  
    <b>Sorry!</b> We can't display this content  
</object> 

如果data屬性引用的資源不存在，則顯示object元素中的內(nèi)容。

進(jìn)度條

progress元素表示進(jìn)度條。支持的屬性包括：

1）max：表示任務(wù)的最大值；

2）value：定義了當(dāng)前的進(jìn)度，位于0到max屬性的值之間；

3）form：所屬的一個(gè)或多個(gè)表單。

當(dāng)max屬性被省略時(shí)，范圍是0到1，而value屬性則使用浮點(diǎn)數(shù)來(lái)表示進(jìn)度，例如0.3表示30%。

<progress id="myprogress" value="10" max="100"></progress>  
<p>  
    <button type="button" value="30">30%</button>  
    <button type="button" value="60">60%</button>  
    <button type="button" value="90">90%</button>  
</p>  
<script>  
    var buttons = document.getElementsByTagName('BUTTON');  
    var progress = document.getElementById('myprogress');  
    for(var i = 0;i < buttons.length; i++){  
        buttons[i].onclick = function(e) {  
            progress.value = e.target.value;  
        };  
    }  
</script>  

上面給出的例子演示了點(diǎn)擊不同的button讓progress顯示不同的值，在chrome中的效果如下：

顯示范圍里的值

meter元素顯示某個(gè)范圍內(nèi)的某個(gè)值。支持的屬性包括：

1）min和max：指定可能只所處范圍，可以用浮點(diǎn)數(shù)；

2）low：指定低值范圍，在它之下的所有制都被認(rèn)為是過(guò)低；

3）high：指定高值范圍，在它之上的所有值都被認(rèn)為是過(guò)高；

4）optimum：指定“最佳”值；

5）value：必須，度量的當(dāng)前值；

6）form：所屬的一個(gè)或多個(gè)表單。

<meter id="mymeter" value="90" min="10" max="100" low="40" high="80"optimum="60"></meter>  
<p>  
    <button type="button" value="30">30%</button>  
    <button type="button" value="60">60%</button>  
    <button type="button" value="90">90%</button>  
</p>  
<script>  
    var buttons = document.getElementsByTagName('BUTTON');  
    var meter = document.getElementById('mymeter');  
    for(var i = 0;i < buttons.length; i++){  
        buttons[i].onclick = function(e) {  
            meter.value = e.target.value;  
        };  
    }  
</script>  

當(dāng)meter元素的value值為過(guò)低和過(guò)高，以及最佳值時(shí)，瀏覽器會(huì)以不同的方式呈現(xiàn)它們