03.圖像標(biāo)簽img

1.圖像標(biāo)簽簡介

在 HTML 標(biāo)簽中,<img> 標(biāo)簽用于定義 HTML 頁面中的圖像。

<img src="圖像URL" />

src 是<img>標(biāo)簽的必須屬性,它用于指定圖像文件的路徑和文件名。

所謂屬性:簡單理解就是屬于這個圖像標(biāo)簽的特性。

2.圖像標(biāo)簽寫法

<img src="08-千璽.jpg" alt="親,圖片加載錯誤" title="這是千璽" width="300" border="15" />
img圖片屬性.png

注意:

1.圖像標(biāo)簽可以擁有多個屬性,各必須寫在標(biāo)簽名的后面。
2.屬性之間不分先后順序,標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
3.屬性采取鍵值對的格式,即 key=“value" 的格式,屬性 =“屬性值”。
4.圖片的width和height屬性只需要設(shè)置其中一個,另一個就會等比例縮放。同時(shí)設(shè)置兩個會使圖片壓縮失真。

3.路徑

3.1絕對路徑

3.1.1直接從根目錄開始寫圖片位置

<img src="D:\0code\day01\images\images2\12-千璽.jpg" alt="圖片無法加載" width="300" />

優(yōu)點(diǎn):
1.運(yùn)行環(huán)境簡單明了,不隨網(wǎng)頁位置的變化而變化。
2.比較安全。
缺點(diǎn):
1.當(dāng)html在別的電腦上打開,或者圖片更換了盤符之后,圖片就沒辦法在頁面中顯示,圖片的移植性較差。

3.1.2圖像地址https://

在網(wǎng)站上右鍵點(diǎn)擊復(fù)制圖像地址,寫入src中就可成功引入。

<img src="https://ac.gtimg.com/media/images/ac_logo.png" width="500" />

優(yōu)點(diǎn):
1.路徑簡單明了,便與搜索引擎搜索。
2.只要有網(wǎng)絡(luò),不管html文件怎么移動,圖片還能正常顯示。
缺點(diǎn):
不容易移植,如果網(wǎng)站域名變化,所有的圖片會全部失效。

3.2相對路徑

以html文件所在位置為參考基礎(chǔ),而建立出的目錄路徑。 即圖片相對于 HTML 頁面的位置。


路徑.gif
<img src="同一級路徑圖片名字.png" />
<img src="同一級路徑/下一級路徑圖片名字.png" />
<img src="../上一級路徑圖片名字.jpg" />

3.2.1圖片和html在同一級

直接書寫即可,一定要加上圖片的后綴名。

<img src="08-千璽.jpg" />

3.2.2圖片在文件的下一級

<img src="images/images2/12-千璽.jpg" />

<img src="同一級路徑圖片名字.png" />

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 瀏覽器與服務(wù)器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看。 ②讓用戶通...
    云還灬閱讀 1,285評論 0 0
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,878評論 0 3
  • --- 學(xué)習(xí)目標(biāo): - 了解常用瀏覽器 - 掌握WEB標(biāo)準(zhǔn) - 理解標(biāo)簽語義化 - 掌握常用的排版標(biāo)簽 ...
    紅豆丁244閱讀 1,435評論 0 2
  • 學(xué)習(xí)目標(biāo): 了解常用瀏覽器 掌握WEB標(biāo)準(zhǔn) 理解標(biāo)簽語義化 掌握常用的排版標(biāo)簽 掌握常用的文本格式化圖像鏈接等標(biāo)簽...
    Mr大喵喵閱讀 1,538評論 0 4
  • 第二章 HTML5基礎(chǔ)標(biāo)簽和語法 本章將詳細(xì)講解HTML的語法,以及常用的HTML標(biāo)簽。經(jīng)過本...
    Echo_前端閱讀 1,284評論 0 0

友情鏈接更多精彩內(nèi)容