html代碼圖片img標簽屬性有哪些?圖片img標簽的用法有哪些,下面全面給大家介紹html代碼img標簽屬性的全部內容,讓大家盡快熟悉html代碼及圖片img標簽內容。

在html代碼中,圖像由img標簽所定義,什么叫<img>圖像空標簽,圖像空標簽指的是沒有閉合的<img>圖像標簽,如果你想在網頁上顯示圖像,那么就必須要使用圖像src屬性,圖像src屬性指的是圖像的URL地址。
圖像img標簽語法定義為<img src=”圖片地址” alt=”圖片描述文字”>
,src=”圖片地址”指的是圖片存儲位置,如果圖像名稱為 “123.jpg” ,而且圖像存儲在www.zhuzhouren.cn的images目錄中,那么圖像URL地址為https://www.zhuzhouren.cn/images/123.jpg,即src=”https://www.zhuzhouren.cn/images/123.jpg”,網頁在瀏覽器中顯示圖像的地方必有<img>圖像標簽。
img標簽的定義和用法
<img>圖像標簽指的是向網頁中嵌入一張圖片,注意從技術上講,圖片<img>標簽并不能插入圖像,而且鏈接網頁上的圖片。
<img>圖像標簽鏈接的是占用網站服務器空間中圖片,圖片<img>標簽還有兩個屬性內容,一個為src屬性,另一個為alt屬性,src屬性定義的是圖像URL地址,alt屬性用來定義可替換圖像的文本,alt屬性用戶是可以自定義的,建議alt屬性內容要與圖片內容相關,如下所示:
<img src=”123.jpg” alt=”用戶定義圖片描述文字”>
當瀏覽器無法加載圖像的時候,圖片alt屬性內容會告訴用戶圖片的信息,此時瀏覽器顯示的是alt屬性替換圖像的文本的內容,而不是圖片,因此在網頁上插入圖片的時候建議要輸入圖片alt屬性內容,這樣有利于提高用戶體驗度。
HTML代碼img標簽屬性的縮放:
HTML部分:
<div class=”tu”><img src=”123.jpg”></div>
HTML代碼img標簽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=”123.jpg” alt=”圖片描述文字” width=”404″ height=”258″>
注意,在圖片屬性內容中定義圖片的高度和寬度對于網站圖片優化有著很好的作用,如果你的圖片屬性指定了高度和寬度,那么在圖片加載的時候就會加載圖片的寬度尺寸,如果未定義圖片寬高尺寸,那么加載時圖片有可能會影響html頁面的布局。
img標簽基本的注意事項:
1、網頁不要用太多的圖片,如果你的這個網頁插入了10張圖片,瀏覽器為了正確顯示網頁內容,就需要將圖片一張張加載出來,需要較多的時間,影響用戶體驗度,建議網頁少用圖片。
2、在網頁插入圖片的時候,一定要插入正確的圖片路徑,如果圖片路徑不正確,網頁就無法正常加載圖片,嚴重影響了用戶體驗。
HTML圖像標簽所包含屬性所表示的意思:
<img>定義圖像標簽;
<map>定義圖像地圖標簽;
<area>定義圖像地圖中的可點擊區域;
HTML 與 XHTML 之間的差異:
在 HTML 中, 標簽沒有結束標簽;
在 XHTML 中, 標簽必須被正確地關閉;
在 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:圖像寬度大小。
