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

嵌入圖像

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

1）src：顯示圖像的URL；

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

3）height：圖像的高度；

4）width：圖像的寬度；

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

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

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

嵌入圖像

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

<img src="triathlon.png"     <img src="triathlon.png" </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" </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ù)用戶在圖像上點(diǎn)擊區(qū)域的不同做出有差別的反應(yīng)。

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

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

map元素

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

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

2）name：可選，名稱。

area元素

area元素定義圖像映射中的區(qū)域，該元素總是嵌套在map元素中。area元素的屬性分為兩類，第一類處理的是area所代表的圖像區(qū)域被用戶點(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)文檔的語言；

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

第二類包含了屬性：shape和coords屬性，用來標(biāo)明用戶可以點(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" <map name="mymap">      <area href="swimpage.html" shape="rect" coords="3,5,68,62"     <area href="cyclepage.html" shape="rect" coords="70,5,130,62"     <area href="otherpage.html" shape="default" </map> 

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

嵌入HTML文檔

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

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

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

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

4）width：定義iframe的寬度；

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

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

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

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

---allow-top-navigation：允許鏈接指向頂層的瀏覽上下文，這樣就能用另一個(gè)文檔替換當(dāng)前整個(gè)文檔，或者創(chuàng)建新的標(biāo)簽和窗口； ---allow-top-scripts：啟用腳本； ---allow-forms：啟用表單。

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"/>  

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

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

embed元素

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

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

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

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

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

你應(yīng)用的其它任何屬性都會(huì)被當(dāng)作是插件或內(nèi)容的參數(shù)。看下面的例子：

<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í)顯示出來。

<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ù)來表示進(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)為是過低；

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

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值為過低和過高，以及最佳值時(shí)，瀏覽器會(huì)以不同的方式呈現(xiàn)它們