[HTML] 圖片標(biāo)簽、絕對路徑和相對路徑

hdzgx 2019-03-02

展開全文

版權(quán)聲明：本文為博主原創(chuàng)文章，技術(shù)需要傳遞，歡迎分享。 https://blog.csdn.net/yuxin1100/article/details/51925325

［］< img >標(biāo)簽代表圖片，img標(biāo)簽的作用是向網(wǎng)頁中插入一張圖片，并不是將圖片繪制到網(wǎng)頁中。

src 屬性：“插入”圖片到網(wǎng)頁中去。
alt 屬性：值可以是一段文字，當(dāng)圖片由于各種原因無法顯示時(shí)，alt屬性的值就會被顯示在網(wǎng)頁上。
width/height 屬性：設(shè)置圖片的寬度／高度；不適合用于圖片，可用于純色圖的拉伸；單位可以是px，也可以是％，單位為％時(shí)是指占窗體寬高的百分比大小。

<!DOCTYPE html>
<html>
<head>
    <title>image</title>
</head>
<body>
<img src="a.png" alt="picture" width="100px" height="100px" />
</body>
</html>

推薦< img >標(biāo)簽中加上“/”來關(guān)閉標(biāo)簽。

推薦使用PNG圖片格式

當(dāng)圖片無法正確加載時(shí)會出現(xiàn)圖片錯(cuò)誤的圖標(biāo)：
圖片加載錯(cuò)誤

可能導(dǎo)致圖片錯(cuò)誤的原因：
1. 路徑名寫錯(cuò)了
2. 引用的圖片被刪除了
3. 網(wǎng)絡(luò)問題

像素：顯示內(nèi)容基本長度單位 pixel。

位圖：圖片中每一個(gè)像素都由4個(gè)數(shù)字（argb）組成（0-255），原則上不能拉伸因?yàn)闀?dǎo)致失真。
a：透明度；r：紅色；g：綠色；b：藍(lán)色

矢量圖：可以隨意拉伸。

通過圖片的拉伸可以將一張很小的純色圖片冒充為一張大圖，節(jié)約資源的加載。

絕對路徑：使用圖片在硬盤上的絕對位置來訪問圖片，通常是從根目錄開始，向下一個(gè)目錄一個(gè)目錄的尋找；在開發(fā)網(wǎng)頁的過程中，一般不會使用絕對路徑

相對路徑：指的是相對于當(dāng)前網(wǎng)頁的路徑。
相對路徑的起點(diǎn)就是

src的值就是路徑。

“..” 在路徑中代表當(dāng)前網(wǎng)頁所在目錄的上一級目錄
“.” 在路徑中代表當(dāng)前網(wǎng)頁所在目錄

<img src="../a.png" />

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： hdzgx > 《js知識》

舉報(bào)/認(rèn)領(lǐng)

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

[HTML] 圖片標(biāo)簽、絕對路徑 和 相對路徑

[HTML] 圖片標(biāo)簽、絕對路徑和相對路徑