HTML中IMG標簽怎么用

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

在 HTML 中，圖像由<img> 標簽定義。

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

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

定義圖像的語法是：

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

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

瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。

定義和用法

img 元素向網頁中嵌入一幅圖像。

請注意，從技術上講，<img> 標簽并不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。

<img> 標簽有兩個必需的屬性：src 屬性 和 alt 屬性。

src屬性：規定顯示圖像的URL。

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

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

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

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

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自動縮放到640px，如果小于640px即為實際大小，高度大于720px縮放到720px，小于720px為實際大小。注意事項：一般對圖片不控制大小。

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

left：     把圖像對齊到左邊

right：   把圖像對齊到右邊

middle:  把圖像與中央對齊

top:       把圖像與頂部對齊

bottom: 把圖像與底部對齊

height,width屬性

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

屬性值默認單位為像素:

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

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

基本的注意事項 - 有用的提示：

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

注意: 加載頁面時，要注意插入頁面圖像的路徑，如果不能正確設置圖像的位置，瀏覽器無法加載圖片，圖像標簽就會顯示一個破碎的圖片。

HTML圖像標簽：

<img>定義圖像

<map>定義圖像地圖

<area>定義圖像地圖中的可點擊區域

HTML 與 XHTML 之間的差異：

在 HTML 中，<img> 標簽沒有結束標簽。

在 XHTML 中，<img> 標簽必須被正確地關閉。

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

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

【知識小補充】

img中可選屬性：

• align:       規定如何根據周圍的文本來排列圖像。

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

• height:     定義圖像的高度。

• hspace:    定義圖像左側和右側的空白。

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

• longdesc: 指向包含長的圖像描述文檔的URL。

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

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

• width:       設置圖像的寬度。

看完了這篇文章，相信你對HTML中IMG標簽怎么用有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！