HTML <img>標(biāo)簽（插入圖片）

時(shí)間：2023-07-25 09:09:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-25 09:09:01 來源：網(wǎng)站運(yùn)營

HTML <img>標(biāo)簽（插入圖片）：

如果是HTML初學(xué)者，建議在使用圖片新建一個(gè)存放圖片的文件夾，方便后期圖片的整理。這是一個(gè)良好的習(xí)慣。




開發(fā)過程中，經(jīng)常使用圖像來美化頁面，圖像已經(jīng)成為大多數(shù)網(wǎng)站的一個(gè)重要組成部分。都說一圖勝千言，好的圖像有助于制作出精美的網(wǎng)站，從而與那些外觀平平的網(wǎng)站區(qū)別開來。在 HTML 中，使用 <img> 標(biāo)簽來插入圖像，其語法格式如下：

<img src="url" />

<img> 是圖片 image 的簡稱，它只包含屬性，沒有閉和標(biāo)簽。src 是它的必選屬性，用來表示圖片的路徑來源。下面，我們來詳細(xì)分析一下 <img> 標(biāo)簽的 src 屬性。




1. src屬性

src 是 source 的簡稱，用來聲明圖像文件的來源，也就是定義圖片的引用地址。圖片可以是jpg、png、gif等多種格式，引用地址可以是相對 url，也可以是絕對 url。下面我們來看兩個(gè)示例。

引用網(wǎng)絡(luò)圖片

可以這樣引用網(wǎng)絡(luò)圖片：

運(yùn)行結(jié)果如下圖所示：


引用本地圖片


如果在項(xiàng)目的當(dāng)前文件中，想要引入上一層 image 目錄下的一張圖片 logo.jpg，可以這樣引用：

<img src="../image/logo.jpg"/>運(yùn)行結(jié)果如下圖所示：

此處../可以進(jìn)入上一層目錄，然后進(jìn)入 image 文件夾，最后找到 img.jpg。

提示：圖片的名稱盡量不要使用中文，否則即使路徑正確，瀏覽器也可能無法識別，從而顯示不出圖片。




2. 其他屬性

前面講述了 <img> 標(biāo)簽的必選屬性 src，接下來再看一下它的可選屬性。<img> 標(biāo)簽常用的可選屬性有alt、title、width以及height等，我們來分別看一下：

• alt 屬性用來對圖像進(jìn)行文本說明。一般情況下，當(dāng)瀏覽器因某種原因無法載入圖像時(shí)，就會顯示這段文本。雖然 alt 屬性值可以為空，但還是建議讀者給 alt 屬性設(shè)置符合圖像信息的文本；
• title 用來設(shè)置鼠標(biāo)移動到圖片上的提示文字。它的值一般與 alt 的值相同，最大的區(qū)別是顯示的前提條件不同，alt 屬性是圖片加載失敗后顯示，而 title 屬性則是圖片加載成功后鼠標(biāo)放到它上面才顯示
• width 用來設(shè)置圖片的寬度，使用時(shí)不需要加單位，默認(rèn)是像素（px）；
  
• height 用來設(shè)置圖片的高度，和 width 一樣在使用時(shí)不需要加單位，默認(rèn)是像素（px）。
  
  

在瀏覽器中運(yùn)行結(jié)果如下圖所示：


在這段代碼中，首先引入了文件的路徑，緊接著對圖片的寬高進(jìn)行了設(shè)置，均是 200px；其次又設(shè)置了 title 屬性，當(dāng)鼠標(biāo)移動到圖片上時(shí)，會顯示 title 的內(nèi)容；最后設(shè)置了 alt，當(dāng)圖片加載不出來會顯示 alt 的內(nèi)容。

建議讀者為頁面上的圖像都加上 alt 屬性，這樣不僅有助于更好的顯示信息，而且對于那些使用屏幕閱讀軟件（存在視覺障礙的人使用的一類軟件）的人來說幫助很大。

3. 總結(jié)

從上面的講述中我們可以收獲以下幾點(diǎn)內(nèi)容：

• src 表示圖片的引用地址，這個(gè)地址可以是相對 url，也可以是絕對 url；
• alt 表示圖片加載失敗時(shí)顯示的內(nèi)容；
• title 表示鼠標(biāo)移動到圖片上時(shí)顯示的文字；
• width 表示圖片的寬，默認(rèn)單位是像素（px）；
• height 表示圖片的高，默認(rèn)單位也是像素（px）。