Web前端开发笔记——第二章 HTML语言 第五节 图像标签
目錄
- 前言
- 一、圖像標簽的屬性
- （一）src屬性和alt屬性
- （二）width屬性和height屬性
- （三）borde屬性
- 二、絕對路徑和相對路徑
- 三、圖像映射
- 例題
- 結語
前言
本節介紹圖像標簽即img標簽的用法以及相關應用例題。
一、圖像標簽的屬性
（一）src屬性和alt屬性
img標簽，即圖像標簽，該標簽用于插入圖像，動態圖和靜態圖是一樣的，它表示為<img src="圖像名.圖像類型" alt="文本" />，是個單獨出現的標簽。它一般有兩個屬性：src屬性和alt屬性。
src屬性代表其文件名和類型，即其值是圖像的 URL 地址。而alt屬性的作用是當圖片無法找到或者是出現問題無法打開等情況時，它就會替代圖片顯示，顯示的即是alt屬性內的文字，可以說是圖片的替代文本。
例如，下面圖片未能顯示出來，代替的是文字“海邊的風景圖”：
（二）width屬性和height屬性
width屬性和height屬性用于設置圖像的寬度和高度，其屬性值默認單位為像素，但如果沒有指定圖片的高寬度，可能會對頁面的布局有影響。
例如，下列html代碼中，對圖片11.jpg設置其寬度為600像素、高度為520像素：
運行結果如下：
（三）borde屬性
borde屬性用于設置圖片是否有邊框，border后面的取值即邊框的大小，border=0或者不使用borde屬性表示無邊框。
例如，下列html代碼中，對圖片baidu.jpg加上屬性為10的邊框：
運行結果如下：
二、絕對路徑和相對路徑
引用圖片的兩種路徑，分為絕對路徑和相對路徑：
絕對路徑是以根目錄為基準，需要對文件的具體位置詳細表示出來；相對路徑是以該文檔的所在位置為基準的。
1、當圖片直接位于站點文件夾內時，且網頁也位于其內時，設置src屬性時只需以圖像名.圖像類型的形式即可，它省略當前的基準點位置。
2、當網頁位于站點文件夾內，圖片位于站點文件夾內的子文件夾時，設置src屬性時需要帶上子文件夾的名稱加上圖像名.圖像類型。
<img src="圖片子文件夾名稱/圖像名.圖像類型" alt="文本" />3、當圖片直接位于站點文件夾內，且網頁位于子文件夾內時，設置src屬性時需要用“…”來表示上一級文件夾再加上圖像名.圖像類型即可。
<img src="../圖像名.圖像類型" alt="文本" />4、當圖片和網頁都位于站點文件夾內，且位于不同的子文件夾內時，設置src屬性時需要用“…”來表示上一級文件夾且帶上圖片子文件夾的名稱加上圖像名.圖像類型。
<img src="../圖片子文件夾名稱/圖像名.圖像類型" alt="文本" />三、圖像映射
在html中可使用圖像映像，它帶有可供點擊區域的圖像即map標簽，其區域都是超鏈接，在<img>中的 usemap 屬性可以引用 <map> 標簽中的 id 或 name 屬性。
在 <map> 標簽中， id 屬性必須定義，它表示該標簽定義的名稱，而name 屬性即為 image-map 規定的名稱。且通過定義<area>標簽在<map>內，在 HTML5 中，該標簽是單獨的，它用于定義可供點擊區域的圖像區域。
例題
例、完成下列網頁設計，通過圖片標簽，設置點擊相應的圖片鏈接進行相應的網頁跳轉，且在新的窗口中打開跳轉網頁，效果圖如下:
1、創建站點文件夾，并創建image子文件夾，用于存放四個瀏覽器的縮略圖，如下：
2、編輯主頁的html代碼，即主頁.html文件，如下：
3、保存后，我們的站點文件夾里就有了一個主頁的html文件以及之前創建的image文件夾，如下:
4、測試一下效果，打開主頁.html，我們發現沒有問題：
5、測試是否能通過點擊圖案跳轉至相應的瀏覽器頁面且在新窗口打開：
其它也是沒有問題的：
達到了題設要求！
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第五节 图像标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第二章 HTML语
- 下一篇： Web前端开发笔记——第二章 HTML语