Html圖像標簽:
<img>標簽可以在網頁上插入一張圖片,它是獨立使用的標簽,它的常用屬性有:
(1)src 屬性 定義圖片的引用地址
(2)alt 屬性 定義圖片加載失敗時顯示的文字,搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片,所以此屬性非常重要。(圖片的文字說明)
<img src=”images/pic.jpg” alt=”產品圖片” />
絕對路徑和相對路徑:
像網頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表、javascript等等,引用地址分為絕對地址和相對地址。
絕對地址:相對於磁盤的位置去定位文件的地址
相對地址:相對於引用文件本身去定位被引用的文件地址
代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁插入圖片</title>
</head>
<body>
<h1>圖片</h1>
<h2>相對路徑</h2>
<!-- 網頁和images在同一目錄 -->
<!-- 完整的寫法是:./images/我是仙女.jpg ./ 表示當前目錄,可以省略 -->
<img src="./images/我是仙女.jpg" alt="做個優雅的女人" />
<img src="images/loading.gif" alt="加載中" />
<!-- 網頁所在的目錄和images 在同一目錄 -->
<!-- 圖片並沒有展示出來 -->
<img src="../images/哥總是這么迷人.jpg" alt="哥總是這么迷人" />
<h2>絕對路徑,不建議使用</h2>
<!-- 圖片並沒有展示出來 -->
<img src="C:\Users\Ren\Desktop\img\5.jpg" alt="生無可戀" />
</body>
</html>
頁面顯示效果:

