Html圖像標簽、絕對路徑和相對路徑：
阿新 • • 發佈：2019-03-18
需要 charset doctype ima pre span true ren image
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>
頁面顯示效果：
Html圖像標簽、絕對路徑和相對路徑：