HTML學習5：常用標簽之圖像標簽 · Web前端HTML+CSS+JS初級入門

HTML中通過使用圖像標簽，可以在文檔中顯示圖像。圖像標簽列表： ![](https://box.kancloud.cn/2016-04-28_5721558777a8b.jpg) ### 一，圖像標簽（<img>）和源屬性（Src）在 HTML 中，圖像由 < img> 標簽定義。< img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。定義圖像的語法是： < img src="url" />。URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。 ~~~ <html> <head> <title>HTML圖像標簽演示</title> </head> <body> <h1>演示圖像標簽</h1> <hr /> 一幅圖像： <img src="16.jpg" width="400" height="200" /> <hr /> 一幅動畫圖像： <img src="15.GIF"/ width="=400" height="=200" /> <hr /> 請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。 </body> </html> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_572155878925d.jpg) ### 二，替換文本屬性（Alt） alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。<img src="boat.gif" alt="Big Boat">在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。 ~~~ <html> <head> <title>HTML圖像標簽演示</title> </head> <body> 僅支持文本的瀏覽器無法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這里，"alt" 的文本是“劉亦菲”。 請注意，如果您把鼠標指針移動到圖像上，大多數瀏覽器會顯示 "alt" 文本。 <img src="10.jpg" alt="劉亦菲" width="400" height="280" /> 如果無法顯示圖像，將顯示 "alt" 屬性中的文本： <img src="112.jpg" alt="劉亦菲" width="400" height="280"/> </body> </html> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215587a2429.jpg) ### 三，圖像標簽的排列屬性align ~~~ <html> <head> <title>HTML圖像標簽演示</title> </head> <body> <h2>未設置對齊方式的圖像：</h2> 圖像 <img src="15.GIF" width="80" height="48"/> 在文本中 <h2>已設置對齊方式的圖像：</h2> 圖像 <img src="15.GIF" width="80" height="48"align="bottom"/> 在文本中 圖像 <img src="15.GIF" width="80" height="48"align="middle"/> 在文本中 圖像 <img src="15.GIF" width="80" height="48" align="top"/> 在文本中 請注意，bottom 對齊方式是默認的對齊方式。 </body> </html> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215587c0dfe.jpg) 對于圖像地圖我們會在后續的學習中提到。