HTML中IMG標(biāo)簽怎么用

小編給大家分享一下HTML中IMG標(biāo)簽怎么用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

在 HTML 中，圖像由<img> 標(biāo)簽定義。

<img> 是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

定義圖像的語法是：

<img src="url" alt="some_text">

URL 指存儲(chǔ)圖像的位置。如果名為 "pulpit.jpg" 的圖像位于 www.runoob.com 的 images 目錄中，那么其 URL 為 https://cache.yisu.com/upload/information/20200318/90/8377.jpg。

瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。

定義和用法

img 元素向網(wǎng)頁中嵌入一幅圖像。

請(qǐng)注意，從技術(shù)上講，<img> 標(biāo)簽并不會(huì)在網(wǎng)頁中插入圖像，而是從網(wǎng)頁上鏈接圖像。<img> 標(biāo)簽創(chuàng)建的是被引用圖像的占位空間。

<img> 標(biāo)簽有兩個(gè)必需的屬性：src 屬性 和 alt 屬性。

src屬性：規(guī)定顯示圖像的URL。

alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。

替換文本屬性的值是用戶定義的。

<img src="boat.gif" alt="Big Boat">

在瀏覽器無法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的。

HTML img屬性的縮放

HTML部分：

<div class="tu"><img src=“suofang.jpg”>

css控制圖片縮放：

.tu img{
 max-height:720px; 
 max-width:640px; 
 width:expression(this.width > 640 && this.height < this.width ? 640: true); 
 height:expression(this.height > 720 ? 720: true);
}

說明：圖片大于640自動(dòng)縮放到640px，如果小于640px即為實(shí)際大小，高度大于720px縮放到720px，小于720px為實(shí)際大小。注意事項(xiàng)：一般對(duì)圖片不控制大小。

圖像的居中顯示：（附全部對(duì)齊屬性值）

left：     把圖像對(duì)齊到左邊

right：   把圖像對(duì)齊到右邊

middle:  把圖像與中央對(duì)齊

top:       把圖像與頂部對(duì)齊

bottom: 把圖像與底部對(duì)齊

height,width屬性

height（高度） 與 width（寬度）屬性用于設(shè)置圖像的高度與寬度。

屬性值默認(rèn)單位為像素:

<img src="pulpit.jpg" alt="Pulpit rock" width="404" height="258">

提示: 指定圖像的高度和寬度的一個(gè)很好的習(xí)慣。如果圖像指定了高度寬度，頁面加載時(shí)就會(huì)保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時(shí)有可能會(huì)破壞HTML頁面的整體布局。

基本的注意事項(xiàng) - 有用的提示：

注意: 假如某個(gè) HTML 文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁面，需要加載 11 個(gè)文件。加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片。

注意: 加載頁面時(shí)，要注意插入頁面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無法加載圖片，圖像標(biāo)簽就會(huì)顯示一個(gè)破碎的圖片。

HTML圖像標(biāo)簽：

<img>定義圖像

<map>定義圖像地圖

<area>定義圖像地圖中的可點(diǎn)擊區(qū)域

HTML 與 XHTML 之間的差異：

在 HTML 中，<img> 標(biāo)簽沒有結(jié)束標(biāo)簽。

在 XHTML 中，<img> 標(biāo)簽必須被正確地關(guān)閉。

在 HTML 4.01 中，不推薦使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。

在 XHTML 1.0 Strict DTD 中，不支持 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 屬性。

【知識(shí)小補(bǔ)充】

img中可選屬性：

• align:       規(guī)定如何根據(jù)周圍的文本來排列圖像。

• border:    定義圖像周圍的邊框。

• height:     定義圖像的高度。

• hspace:    定義圖像左側(cè)和右側(cè)的空白。

• ismap:      將圖像定義為服務(wù)器端圖像映射。

• longdesc: 指向包含長(zhǎng)的圖像描述文檔的URL。

• usemap:   將圖像定義為客戶端圖像映射。

• vspace:     定義圖像頂部和底部的空白。

• width:       設(shè)置圖像的寬度。

看完了這篇文章，相信你對(duì)HTML中IMG標(biāo)簽怎么用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！