HTML圖片img標(biāo)簽_動力節(jié)點Java學(xué)院整理
我要評論摘要
說明
img 是 Image（圖像）的縮寫。src 屬性用來指定圖像的路徑。
HTML4.01 里為了配合各種無法顯示圖像的瀏覽器和有聲閱讀瀏覽器，必須設(shè)定 <img> 標(biāo)簽里的 alt 屬性。HTML5 變成了非必須。
height屬性和width屬性雖然不是必須的，但如果設(shè)定了這兩個屬性的話，能夠使圖像打開得更快一些，并且顯示圖像時可以避免某些顯示上的bug。
屬性
【重要屬性】
|
屬性
|
意義
|
|
src=url
|
H2+/e2+/N2+。圖像的路徑。必須屬性。
|
|
alt=alt
|
H2+/e2+/N2+。圖片的說明。當(dāng)有些瀏覽器無法顯示圖片的時候能在網(wǎng)頁上看到這個圖片的說明。HTML4.01 里為必須屬性。
|
|
height=n
|
H3+/e2+/N2+。設(shè)置圖片高度。
|
|
width=n
|
H3+/e2+/N2+。設(shè)置圖片寬度。
|
【特性】
|
屬性
|
意義
|
|
align=align
|
H2-H4T/e2+/N2+。指定圖像的顯示位置。設(shè)定 align="right" 和 align="left" 可以讓圖像的左邊或右邊顯示文字。取消此效果用<br clear=all>。
|
|
border=n
|
H3-H4T/e2+/N2+。指定圖像周圍的邊框線的粗細(xì)。當(dāng)圖像被包含在 <a href="...">～</a> 標(biāo)簽里的時候，會自動產(chǎn)生邊框線。想取消的話設(shè)定 border=0。
|
|
galleryimg=bool
|
e6+。當(dāng)鼠標(biāo)放在 200×200 以上的圖像上面的時候，不顯示工具條。也可以在 <meta> 里全局指定。
|
|
hspace=n
|
H3-H4T/e2+/N2+。設(shè)定圖像周圍橫向的空白。
|
|
longdesc=url
|
H4。當(dāng)圖像的說明長度太長，以至于title屬性無法顯示完全的時候，用此屬性指向包含圖像說明的文檔的 URL。
|
|
lowsrc=url
|
e4+/N2+。如果一張圖片很大，那么在瀏覽器里顯示可能需要花費一些時間。在圖像還在網(wǎng)絡(luò)傳輸中的時候，可以用 lowsrc 屬性指定一張縮略圖，使它先顯示在瀏覽器上，等原圖像傳輸完畢后會自動替換縮略圖。
|
|
suppress=suppress
|
N4+。suppress 是壓制的意思。默認(rèn)值是 false，如果設(shè)定為 true 的話，在圖像傳輸中，本該顯示在圖像位置的小圖標(biāo)會被ToolTip（提示框）代替。
|
|
vspace=n
|
H3-H4T/e2+/N2+。設(shè)定圖像周圍縱向的空白。
|
|
name=name
|
H4/e4+/N3+。指定名字。
|
【可點擊領(lǐng)域相關(guān)屬性】
|
屬性
|
意義
|
|
ismap
|
H2+/e2+/N2+。指定圖像為服務(wù)器端圖像映射。
|
|
usemap=usemap
|
H3+/e2+/N2+。指定圖像為客戶端圖像映射。請參考<map>。
|
【視頻相關(guān)屬性】
|
屬性
|
意義
|
|
controls
|
e2-e3。在視頻的下面顯示播放控制按鈕。在 IE4.0 時被廢棄。
|
|
dynsrc=url
|
e2+。指定視頻文件（*.avi）。因為已經(jīng)有了 <embed> 和 <object> 標(biāo)簽，所以此屬性基本上沒什么人用。
|
|
loop=n
|
e2+。設(shè)定播放次數(shù)。loop=infinite 的時候無限循環(huán)播放。
|
|
start=start
|
e2+。設(shè)定為 fileopen 的時候，網(wǎng)頁一打開就播放。設(shè)定為 mouseover 的時候，鼠標(biāo)放在視頻上面的時候就開始播放。
|
【數(shù)據(jù)綁定相關(guān)屬性】
|
屬性
|
意義
|
|
datafld=datafld
|
e4+。指定數(shù)據(jù)綁定時的數(shù)據(jù)源的列名。
|
|
datasrc=datasrc
|
e4+。指定數(shù)據(jù)綁定時的數(shù)據(jù)源的ID。
|
【一般屬性】
|
屬性
|
意味
|
|
class=class
|
H4+/e3+/N4+。指定類。
|
|
id=id
|
H4+/e3+/N4+。指定ID。
|
|
style=style
|
H4+/e3+/N4+。指定樣式。
|
|
title=title
|
H4+/e4+/N6+。指定標(biāo)題。
|
|
dir=dir
|
H4+/e5+/N6+。指定文字顯示的方向。
|
|
lang=lang
|
H4+/e4+/N6+。指定語言種類。
|
|
accesskey=key
|
H5+。指定快捷鍵。
|
|
tabindex=n
|
H5+。指定TAB鍵在控件中的移動順序。
|
|
contenteditable=bool
|
H5+/e55+。使元素可編輯。
|
|
contextmenu=id
|
H5+。指定contextmenu。
|
|
draggable=bool
|
H5+。可拖動。
|
|
dropzone=value
|
H5+?？赏戏?。
|
|
hidden
|
H5+。隱藏元素。
|
|
spellcheck=bool
|
H5+。檢查拼寫。
|
|
IE擴展屬性
|
可以指定IE擴展屬性。
|
舉例
HTML代碼
<img src="image/kanami.jpg" alt="舉例圖片" width=100 height=100>
相關(guān)文章
HTML中img標(biāo)簽只顯示圖片中心位置的方法(三種方法)
html中 img標(biāo)簽顯示圖片中心的方法目前知道三種，下面小編把他分享到腳本之家平臺，需要的朋友參考下2017-04-13用html的ul和li標(biāo)簽做圖片展示功能示例代碼
做圖片展示功能很簡單的把下面代碼拷貝到dreamweaver 的代碼區(qū)域，預(yù)覽時可以顯示下面圖片，也就是我們常說的圖片展示功能2014-02-17
這篇文章主要介紹了詳解HTML中的圖片標(biāo)簽的用法,本文圖文并茂，通過實例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-19
