當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

017_html图像

發布時間：2025/4/17 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 017_html图像小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 通過使用html, 可以在文檔中顯示圖像。

2. 圖像標簽

3. 圖像標簽(<img />)和源屬性(src)

3.1. 在html中, 圖像由<img />標簽定義。

3.2. 要在頁面上顯示圖像, 你需要使用源屬性(src)。src指"source"。源屬性的值是圖像的URL地址。

3.3. 定義圖像的語法是:

3.4. URL指存儲圖像的位置。如果名為"boat.gif"的圖像位于www.w3school.com.cn的images目錄中, 那么其URL為http://www.w3school.com.cn/images/boat.gif。

4. 替換文本屬性(alt)

4.1. alt屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。<img src="boat.gif" alt="Big Boat" />

4.2. 在瀏覽器無法載入圖像時, 替換文本屬性告訴讀者圖像失去的信息。此時, 瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣, 這樣有助于更好的顯示信息, 并且對于那些使用純文本瀏覽器的人來說是非常有用的。

4.3. src屬性和alt屬性是<img />標簽的兩個必需屬性。

5. 圖像標簽屬性

5.1. 必需的屬性

5.2. 可選的屬性

6. 圖像標簽例子

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>僅支持文本的瀏覽器無法顯示圖像, 僅僅能夠顯示在圖像的"alt"屬性中指定的文本。在這里, "alt"的文本是"向左轉"。請注意, 如果您把鼠標指針移動到圖像上, 大多數瀏覽器會顯示"alt"文本。<img src="eg_goleft.gif" alt="向左轉" />如果無法顯示圖像, 將顯示"alt"屬性中的文本:<img src="eg_goleft123.gif" alt="向左轉" /></body> </html>

6.2. 效果圖

7. <area>標簽

7.1. 定義和用法

?7.1.1. <area>標簽定義圖像映射中的區域(注: 圖像映射指得是帶有可點擊區域的圖像)。

?7.1.2. area元素總是嵌套在<map>標簽中。

?7.1.3. 注釋: <img>中的usemap屬性可引用<map>中的id或name屬性(由瀏覽器決定, 一般用id), 所以我們需要同時向<map>添加id和name兩個屬性。

7.2. <area>屬性

?7.2.1. 必需的屬性

?7.2.2. 可選的屬性

8. <map>標簽

8.1. 定義和用法

?8.1.1. 定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像。

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>請點擊圖像上的星球, 把它們放大。<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>注釋: img元素中的"usemap"屬性引用map元素中的"id"或"name"屬性(根據瀏覽器), 所以我們同時向map元素添加了"id"和"name"屬性。</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. 效果圖

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的017_html图像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

图像
_HTML