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

嵌入圖像

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

1）src：顯示圖像的URL；

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

3）height：圖像的高度；

4）width：圖像的寬度；

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

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

下面具體介紹對圖像的操作。

嵌入圖像

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

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

src定義了圖像的URL，alt屬性定義了當圖像無法顯示時，瀏覽器將顯示的替代文本。圖像無法顯示可能有以下原因：

1）網速太慢；

2）src屬性中的錯誤；

3）瀏覽器禁用圖像；

4）用戶使用的是屏幕閱讀器。

強烈推薦在每個圖像中都使用該屬性，這樣當圖像無法顯示時，用戶還是可以看到關于圖像的一些信息，而對于殘疾人來說，alt屬性是他們了解圖像內容的唯一方式。

alt屬性的最大長度是1024個字符，包括空格和標點，可以包含對特殊字符的實體引用，但不允許任何形式的標簽。

alt文本的使用原則：

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

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

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

圖像在HTML標記處理完畢后才會加載，瀏覽器通常不知道該給圖像預留多大的空間，這樣就導致加載圖像后，瀏覽器需要重定位屏幕上的內容來容納它，導致屏幕的晃動?？梢灾付▓D像的width和height屬性來解決該問題，但注意width和height屬性應該僅用來告訴瀏覽器圖像的尺寸，而不應該用來動態縮放圖像。

在超鏈接中嵌入圖像

結合a元素，img元素可以生成一個基于圖像的超鏈接。

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

這樣當點擊該圖像后，瀏覽器會導航至父元素a的href屬性所指定的URL上。給img元素應用ismap屬性就創建了一個服務器端分區響應圖：

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

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

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

服務端分區響應圖通常意味著服務器會根據用戶在圖像上點擊區域的不同做出有差別的反應。

客戶端分區響應圖

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

map元素

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

1）id：必須，為map標簽定義唯一的標識；

2）name：可選，名稱。

area元素

area元素定義圖像映射中的區域，該元素總是嵌套在map元素中。area元素的屬性分為兩類，第一類處理的是area所代表的圖像區域被用戶點擊后瀏覽器會導航到的URL：

1）href：此區域被點擊后瀏覽器應該加載的URL；

2）alt：替代內容，同img元素的對應屬性；

3）target：顯示URL的瀏覽上下文，同base元素的對應屬性；

4）rel：描述當前文檔和目標文檔的關系，同link元素的對應屬性；

5）media：媒介，同style元素的對應屬性；

6）hreflang：目標文檔的語言；

7）type：目標文檔的MIME類型。

第二類包含了屬性：shape和coords屬性，用來標明用戶可以點擊的各個圖像區域。shape屬性的取值如下：

1）rect：代表了一個矩形區域。對應的coords屬性必須由四個用逗號分隔的整數組成(a,b,c,d)：a代表圖像的左邊緣與矩形的左側；b代表圖像的上邊緣與矩形的上側；c代表圖像的右邊與矩形的右側；d代表圖像的下邊緣與矩形的下側；

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

3）poly：代表了一個多邊形。coords屬性必須至少包含六個用逗號分隔的整數，每一對數字各代表多邊形的一個頂點；

4）default：默認區域，即覆蓋整張圖片。不需要提供coords值。

下面是一個例子：

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

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

嵌入HTML文檔

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

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

2）srcdoc：規定在iframe中顯示的頁面的HTML內容；

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

4）width：定義iframe的寬度；

5）height：規定iframe的高度；

6）sandbox：對iframe中的內容的額外限制，支持的值包括：

---""：應用以下所有的限制；

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

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

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

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

下面是iframe的一個完整例子：

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

通過插件嵌入內容

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

embed元素

embed元素定義嵌入的內容，支持的屬性如下：

1）height：設置嵌入內容的高度；

2）src：嵌入內容的URL；

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

4）width：設置嵌入內容的寬度。

你應用的其它任何屬性都會被當作是插件或內容的參數。看下面的例子：

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

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

object元素

object元素也用于定義一個嵌入的對象，比如：圖像、音頻、視頻、PDF、Flash等。object元素的有點是可以包含備用內容，在指定內容不可用時顯示出來。

<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元素中的內容。

進度條

progress元素表示進度條。支持的屬性包括：

1）max：表示任務的最大值；

2）value：定義了當前的進度，位于0到max屬性的值之間；

3）form：所屬的一個或多個表單。

當max屬性被省略時，范圍是0到1，而value屬性則使用浮點數來表示進度，例如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>  

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

顯示范圍里的值

meter元素顯示某個范圍內的某個值。支持的屬性包括：

1）min和max：指定可能只所處范圍，可以用浮點數；

2）low：指定低值范圍，在它之下的所有制都被認為是過低；

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

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

5）value：必須，度量的當前值；

6）form：所屬的一個或多個表單。

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

當meter元素的value值為過低和過高，以及最佳值時，瀏覽器會以不同的方式呈現它們