HTML IMG標(biāo)簽的屬性是有哪一些？知道IMG標(biāo)簽的用法

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

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

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

定義圖像的語法是：

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

URL 指存儲圖像的位置。如果名為 "pulpit.jpg" 的圖像位于 www.runoob.com 的 images 目錄中，那么其 URL 為 http://www.runoob.com/images/yidian.jpg。

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

定義和用法

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

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

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

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

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

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

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

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

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（寬度）屬性用于設(shè)置圖像的高度與寬度。

屬性值默認單位為像素:

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

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

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

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

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

HTML圖像標(biāo)簽：

<img>定義圖像

<map>定義圖像地圖

<area>定義圖像地圖中的可點擊區(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" 屬性。

【知識小補充】

img中可選屬性：

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

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

• height: 定義圖像的高度。

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

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

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

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

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

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

【相關(guān)推薦】

html的基礎(chǔ)元素，讓你零基礎(chǔ)學(xué)習(xí)HTML

什么是HTML文件？HTML文件的初步認識

以上就是HTML IMG標(biāo)簽的屬性是有哪些？了解IMG標(biāo)簽的用法的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！