017_html图像
1. 通過使用html, 可以在文檔中顯示圖像。
2. 圖像標(biāo)簽
3. 圖像標(biāo)簽(<img />)和源屬性(src)
3.1. 在html中, 圖像由<img />標(biāo)簽定義。
3.2. 要在頁面上顯示圖像, 你需要使用源屬性(src)。src指"source"。源屬性的值是圖像的URL地址。
3.3. 定義圖像的語法是:
<img src="url" />3.4. URL指存儲圖像的位置。如果名為"boat.gif"的圖像位于www.w3school.com.cn的images目錄中, 那么其URL為http://www.w3school.com.cn/images/boat.gif。
4. 替換文本屬性(alt)
4.1. alt屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。<img src="boat.gif" alt="Big Boat" />
4.2. 在瀏覽器無法載入圖像時, 替換文本屬性告訴讀者圖像失去的信息。此時, 瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣, 這樣有助于更好的顯示信息, 并且對于那些使用純文本瀏覽器的人來說是非常有用的。
4.3. src屬性和alt屬性是<img />標(biāo)簽的兩個必需屬性。
5. 圖像標(biāo)簽屬性
5.1. 必需的屬性
5.2. 可選的屬性
6. 圖像標(biāo)簽例子
6.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>為圖片顯示替換文本</title></head><body><p>僅支持文本的瀏覽器無法顯示圖像, 僅僅能夠顯示在圖像的"alt"屬性中指定的文本。在這里, "alt"的文本是"向左轉(zhuǎn)"。</p><p>請注意, 如果您把鼠標(biāo)指針移動到圖像上, 大多數(shù)瀏覽器會顯示"alt"文本。</p><img src="eg_goleft.gif" alt="向左轉(zhuǎn)" /><p>如果無法顯示圖像, 將顯示"alt"屬性中的文本:</p><img src="eg_goleft123.gif" alt="向左轉(zhuǎn)" /></body> </html>6.2. 效果圖
7. <area>標(biāo)簽
7.1. 定義和用法
?7.1.1. <area>標(biāo)簽定義圖像映射中的區(qū)域(注: 圖像映射指得是帶有可點擊區(qū)域的圖像)。
?7.1.2. area元素總是嵌套在<map>標(biāo)簽中。
?7.1.3. 注釋: <img>中的usemap屬性可引用<map>中的id或name屬性(由瀏覽器決定, 一般用id), 所以我們需要同時向<map>添加id和name兩個屬性。
7.2. <area>屬性
?7.2.1. 必需的屬性
?7.2.2. 可選的屬性
8. <map>標(biāo)簽
8.1. 定義和用法
?8.1.1. 定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區(qū)域的一幅圖像。
8.2. <map>屬性
?8.2.1. 必需的屬性
?8.2.2. 可選的屬性
9. 圖像映射例子
9.1.?imgae_map_area.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>行星</title></head><body><p>請點擊圖像上的星球, 把它們放大。</p><img src="eg_planets.jpg" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"><area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" /><area shape="circle" coords="129,161,10" href ="mercur.html" target ="_blank" alt="Mercury" /><area shape="rect" coords="0,0,110,260" href ="sun.html" target ="_blank" alt="Sun" /></map><p><b>注釋: </b>img元素中的"usemap"屬性引用map元素中的"id"或"name"屬性(根據(jù)瀏覽器), 所以我們同時向map元素添加了"id"和"name"屬性。</p></body> </html>?9.2.?sun.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>太陽</title></head><body><img src="eg_sun.gif" width="99px" height="98px" alt="sun" /></body> </html>?9.3.?mercur.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>水星</title></head><body><img src="eg_mercur.gif" width="100px" height="100px" alt="mercur" /></body> </html>?9.4.?venus.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>金星</title></head><body><img src="eg_venus.gif" width="100px" height="100px" alt="venus" /></body> </html>9.5. 效果圖
《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的017_html图像的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 036_Unicode对照表二
- 下一篇： 019_html超链接