◎歡迎參與討論,請(qǐng)?jiān)谶@里發(fā)表您的看法、交流您的觀點(diǎn)。
html代碼圖片img標(biāo)簽屬性有哪些?圖片img標(biāo)簽的用法有哪些,下面全面給大家介紹html代碼img標(biāo)簽屬性的全部?jī)?nèi)容,讓大家盡快熟悉html代碼及圖片img標(biāo)簽內(nèi)容。

在html代碼中,圖像由img標(biāo)簽所定義,什么叫<img>圖像空標(biāo)簽,圖像空標(biāo)簽指的是沒有閉合的<img>圖像標(biāo)簽,如果你想在網(wǎng)頁(yè)上顯示圖像,那么就必須要使用圖像src屬性,圖像src屬性指的是圖像的URL地址。
圖像img標(biāo)簽語(yǔ)法定義為<img src=”圖片地址” alt=”圖片描述文字”>
,src=”圖片地址”指的是圖片存儲(chǔ)位置,如果圖像名稱為 “123.jpg” ,而且圖像存儲(chǔ)在www.zhuzhouren.cn的images目錄中,那么圖像URL地址為https://www.zhuzhouren.cn/images/123.jpg,即src=”https://www.zhuzhouren.cn/images/123.jpg”,網(wǎng)頁(yè)在瀏覽器中顯示圖像的地方必有<img>圖像標(biāo)簽。
<img>圖像標(biāo)簽指的是向網(wǎng)頁(yè)中嵌入一張圖片,注意從技術(shù)上講,圖片<img>標(biāo)簽并不能插入圖像,而且鏈接網(wǎng)頁(yè)上的圖片。
<img>圖像標(biāo)簽鏈接的是占用網(wǎng)站服務(wù)器空間中圖片,圖片<img>標(biāo)簽還有兩個(gè)屬性內(nèi)容,一個(gè)為src屬性,另一個(gè)為alt屬性,src屬性定義的是圖像URL地址,alt屬性用來(lái)定義可替換圖像的文本,alt屬性用戶是可以自定義的,建議alt屬性內(nèi)容要與圖片內(nèi)容相關(guān),如下所示:
<img src=”123.jpg” alt=”用戶定義圖片描述文字”>
當(dāng)瀏覽器無(wú)法加載圖像的時(shí)候,圖片alt屬性內(nèi)容會(huì)告訴用戶圖片的信息,此時(shí)瀏覽器顯示的是alt屬性替換圖像的文本的內(nèi)容,而不是圖片,因此在網(wǎng)頁(yè)上插入圖片的時(shí)候建議要輸入圖片alt屬性內(nèi)容,這樣有利于提高用戶體驗(yàn)度。
HTML代碼img標(biāo)簽屬性的縮放:
HTML部分:
<div class=”tu”><img src=”123.jpg”></div>
HTML代碼img標(biāo)簽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);
}
說(shuō)明:圖片大于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=”123.jpg” alt=”圖片描述文字” width=”404″ height=”258″>
注意,在圖片屬性內(nèi)容中定義圖片的高度和寬度對(duì)于網(wǎng)站圖片優(yōu)化有著很好的作用,如果你的圖片屬性指定了高度和寬度,那么在圖片加載的時(shí)候就會(huì)加載圖片的寬度尺寸,如果未定義圖片寬高尺寸,那么加載時(shí)圖片有可能會(huì)影響html頁(yè)面的布局。
img標(biāo)簽基本的注意事項(xiàng):
1、網(wǎng)頁(yè)不要用太多的圖片,如果你的這個(gè)網(wǎng)頁(yè)插入了10張圖片,瀏覽器為了正確顯示網(wǎng)頁(yè)內(nèi)容,就需要將圖片一張張加載出來(lái),需要較多的時(shí)間,影響用戶體驗(yàn)度,建議網(wǎng)頁(yè)少用圖片。
2、在網(wǎng)頁(yè)插入圖片的時(shí)候,一定要插入正確的圖片路徑,如果圖片路徑不正確,網(wǎng)頁(yè)就無(wú)法正常加載圖片,嚴(yán)重影響了用戶體驗(yàn)。
<img>定義圖像標(biāo)簽;
<map>定義圖像地圖標(biāo)簽;
<area>定義圖像地圖中的可點(diǎn)擊區(qū)域;
HTML 與 XHTML 之間的差異:
在 HTML 中, 標(biāo)簽沒有結(jié)束標(biāo)簽;
在 XHTML 中, 標(biāo)簽必須被正確地關(guān)閉;
在 HTML 4.01 中,不推薦使用 image 元素的 “align”、”border”、”hspace” 以及 “vspace” 屬性;
在 XHTML 1.0 Strict DTD 中,不支持 image 元素的 “align”、”border”、”hspace” 以及 “vspace” 屬性。
img標(biāo)簽可選屬性知識(shí)小補(bǔ)充:
align:規(guī)定如何根據(jù)周圍的文本來(lái)排列圖像;
border:定義圖像周圍的邊框;
height:定義圖像的高度;
hspace:定義圖像左側(cè)和右側(cè)的空白;
ismap:將圖像定義為服務(wù)器端圖像映射;
longdesc:指向包含長(zhǎng)的圖像描述文檔的URL;
usemap:將圖像定義為客戶端圖像映射;
vspace:圖像頂部和底部的空白;
width:圖像寬度大小。