在HTML文檔中嵌入內(nèi)容，可以使你的頁面更加豐富。
嵌入圖像
使用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）網(wǎng)速太慢；
2）src屬性中的錯誤；
3）瀏覽器禁用圖像；
4）用戶使用的是屏幕閱讀器。
強烈推薦在每個圖像中都使用該屬性，這樣當圖像無法顯示時，用戶還是可以看到關(guān)于圖像的一些信息，而對于殘疾人來說，alt屬性是他們了解圖像內(nèi)容的唯一方式。
alt屬性的最大長度是1024個字符，包括空格和標點，可以包含對特殊字符的實體引用，但不允許任何形式的標簽。
alt文本的使用原則：
1）如果圖像包含信息，使用alt描述圖像；
2）如果圖像在a元素中，使用alt描述目標鏈接；
3）如果圖像僅供裝飾，使用alt=""。
圖像在HTML標記處理完畢后才會加載，瀏覽器通常不知道該給圖像預留多大的空間，這樣就導致加載圖像后，瀏覽器需要重定位屏幕上的內(nèi)容來容納它，導致屏幕的晃動?？梢灾付▓D像的width和height屬性來解決該問題，但注意width和height屬性應該僅用來告訴瀏覽器圖像的尺寸，而不應該用來動態(tài)縮放圖像。
在超鏈接中嵌入圖像
結(jié)合a元素，img元素可以生成一個基于圖像的超鏈接。
<a href="otherpage.html">
<img src="triathlon.png" alt="Triathlon Image" width="200" height="67"/>
</a>
這樣當點擊該圖像后，瀏覽器會導航至父元素a的href屬性所指定的URL上。給img元素應用ismap屬性就創(chuàng)建了一個服務器端分區(qū)響應圖：
<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
服務端分區(qū)響應圖通常意味著服務器會根據(jù)用戶在圖像上點擊區(qū)域的不同做出有差別的反應。
客戶端分區(qū)響應圖
客戶端分區(qū)響應圖支持用戶通過點擊某張圖的不同區(qū)域讓瀏覽器導航到不同的URL上，我們需要使用元素來定義圖像上的各個區(qū)域以及他們所代表的行為，需要用到的元素包括map元素和area元素。
map元素
map元素的作用是定義一個客戶端圖像映射，map元素中包含一個或者area元素，他們各自代表了圖像上可被點擊的一塊區(qū)域。map元素通常包含屬性：
1）id：必須，為map標簽定義唯一的標識；
2）name：可選，名稱。
area元素
area元素定義圖像映射中的區(qū)域，該元素總是嵌套在map元素中。area元素的屬性分為兩類，第一類處理的是area所代表的圖像區(qū)域被用戶點擊后瀏覽器會導航到的URL：
1）href：此區(qū)域被點擊后瀏覽器應該加載的URL；
2）alt：替代內(nèi)容，同img元素的對應屬性；
3）target：顯示URL的瀏覽上下文，同base元素的對應屬性；
4）rel：描述當前文檔和目標文檔的關(guān)系，同link元素的對應屬性；
5）media：媒介，同style元素的對應屬性；
6）hreflang：目標文檔的語言；
7）type：目標文檔的MIME類型。
第二類包含了屬性：shape和coords屬性，用來標明用戶可以點擊的各個圖像區(qū)域。shape屬性的取值如下：
1）rect：代表了一個矩形區(qū)域。對應的coords屬性必須由四個用逗號分隔的整數(shù)組成(a,b,c,d)：a代表圖像的左邊緣與矩形的左側(cè)；b代表圖像的上邊緣與矩形的上側(cè)；c代表圖像的右邊與矩形的右側(cè)；d代表圖像的下邊緣與矩形的下側(cè)；
2）circle：代表了一個圓形區(qū)域。coords屬性必須由三個用逗號分隔的整數(shù)組成(a,b,c)：a代表從圖像左邊緣到圓心的距離；b代表從圖像上邊緣到圓心的距離；c代表圓的半徑；
3）poly：代表了一個多邊形。coords屬性必須至少包含六個用逗號分隔的整數(shù)，每一對數(shù)字各代表多邊形的一個頂點；
4）default：默認區(qū)域，即覆蓋整張圖片。不需要提供coords值。
下面是一個例子：
上面的腳本定義了用戶如果點擊圖片的游泳部分，瀏覽器導航至swimpage.html，如果用戶點擊圖像上的騎車部分，瀏覽器則會導航至cyclepage.html，點擊其它部分則導航至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：對iframe中的內(nèi)容的額外限制，支持的值包括：
---""：應用以下所有的限制；
---allow-same-orgin：允許iframe內(nèi)容被視為與文檔其余部分擁有同一個來源；
---allow-top-navigation：允許鏈接指向頂層的瀏覽上下文，這樣就能用另一個文檔替換當前整個文檔，或者創(chuàng)建新的標簽和窗口； ---allow-top-scripts：啟用腳本； ---allow-forms：啟用表單。
7）seamless：指示瀏覽器把iframe的內(nèi)容顯示得像主HTML文檔的一個整體組成部分；默認情況下iframe的內(nèi)容會有一個邊框，如果內(nèi)容比width和height屬性所指定的尺寸要大，還會出現(xiàn)一個滾動條。該屬性的使用方式如下（該屬性大部分瀏覽器還不支持）：
<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"/>
通過插件嵌入內(nèi)容
object元素和embed元素用于擴展瀏覽器能力，添加插件支持。
embed元素
embed元素定義嵌入的內(nèi)容，支持的屬性如下：
1）height：設(shè)置嵌入內(nèi)容的高度；
2）src：嵌入內(nèi)容的URL；
3）type：定義嵌入內(nèi)容的MIME類型，這樣瀏覽器就知道該如何處理它；
4）width：設(shè)置嵌入內(nèi)容的寬度。
你應用的其它任何屬性都會被當作是插件或內(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元素也用于定義一個嵌入的對象，比如：圖像、音頻、視頻、PDF、Flash等。object元素的有點是可以包含備用內(nèi)容，在指定內(nè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)容。
進度條
progress元素表示進度條。支持的屬性包括：
1）max：表示任務的最大值；
2）value：定義了當前的進度，位于0到max屬性的值之間；
3）form：所屬的一個或多個表單。
當max屬性被省略時，范圍是0到1，而value屬性則使用浮點數(shù)來表示進度，例如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元素顯示某個范圍內(nèi)的某個值。支持的屬性包括：
1）min和max：指定可能只所處范圍，可以用浮點數(shù)；
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值為過低和過高，以及最佳值時，瀏覽器會以不同的方式呈現(xiàn)它們
