在 HTML 中,圖像由 img 標簽定義。
img 是空標簽,意思是說,它只包含屬性,并且沒有閉合標簽。
要在頁面上顯示圖像,你需要使用源屬性(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。
瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間,那么瀏覽器會首先顯示第一個段落,然后顯示圖片,最后顯示第二段。
定義和用法
img 元素向網頁中嵌入一幅圖像。
請注意,從技術上講, img 標簽并不會在網頁中插入圖像,而是從網頁上鏈接圖像。 img 標簽創建的是被引用圖像的占位空間。
img 標簽有兩個必需的屬性:src 屬性 和 alt 屬性。
src屬性:規定顯示圖像的URL。
alt 屬性用來為圖像定義一串預備的可替換的文本。
替換文本屬性的值是用戶定義的。
img src= boat.gif alt= Big Boat
在瀏覽器無法載入圖像時,替換文本屬性告訴讀者她們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣,這樣有助于更好的顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。
HTML img屬性的縮放
HTML部分:
div >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的基礎元素,讓你零基礎學習HTML
什么是HTML文件?HTML文件的初步認識
以上就是HTML IMG標簽的屬性是有哪些?了解IMG標簽的用法的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答