HTML img標(biāo)簽的用法及相關(guān)屬性介紹

在HTML中圖像標(biāo)簽<img src="">主要涉及alt屬性、寬度和高度屬性、表框?qū)傩?、邊距屬性、?duì)齊屬性這些屬性，下面分別介紹img標(biāo)簽的這些屬性的特點(diǎn)和用法。

HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽，要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)簽，需要熟練掌握?qǐng)D像標(biāo)簽<img />和相關(guān)的屬性。圖像標(biāo)簽的基本語(yǔ)法格式：

在上面的語(yǔ)法中，src屬性用于指定圖像文件的路徑和文件名，是img標(biāo)簽的必需屬性。要想在網(wǎng)頁(yè)中靈活地使用圖像，僅僅依靠src屬性是遠(yuǎn)遠(yuǎn)不夠的。為此HTML還為<img />標(biāo)簽準(zhǔn)備了其他的屬性：

<img />標(biāo)簽的屬性

<img />標(biāo)簽的常用屬性：

1、圖像的替換文本屬性alt

有時(shí)頁(yè)面中的圖像可能無(wú)法正常顯示，如圖片加載錯(cuò)誤，瀏覽器版本過(guò)低等。因此為頁(yè)面上的圖像添加替換文本是個(gè)很好的習(xí)慣，在圖像無(wú)法顯示時(shí)告訴用戶(hù)該圖片的信息，這就需要使用圖像的alt屬性。

2、圖像的寬度和高度屬性 width、height

通常情況下，如果不給<img />標(biāo)簽設(shè)置寬高屬性，圖片就會(huì)按照它的原始尺寸顯示，此外，也可以通過(guò)width和height屬性用來(lái)定義圖片的寬度和高度。通常我們只設(shè)置其中的一個(gè)屬性，另一個(gè)屬性則會(huì)依據(jù)前一個(gè)設(shè)置的屬性將原圖等比例顯示。如果同時(shí)設(shè)置兩個(gè)屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會(huì)變形或失真。

3、圖像的表框?qū)傩詁order

默認(rèn)情況下圖像是沒(méi)有邊框的，通過(guò)border屬性可以為圖像添加邊框、設(shè)置邊框的寬度。

4、圖像的邊距屬性 vspace、hspace

在網(wǎng)頁(yè)中，由于排版需要，有時(shí)候還需要調(diào)整圖像的邊距。HTML中通過(guò)vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。

5、圖像的對(duì)齊屬性align

圖文混排是網(wǎng)頁(yè)中很常見(jiàn)的效果，默認(rèn)情況下圖像的底部會(huì)與文本的第一行文字對(duì)齊。但是在制作網(wǎng)頁(yè)時(shí)需要經(jīng)常實(shí)現(xiàn)圖像和文字環(huán)繞效果，例如左圖右文，這就需要使用圖像的對(duì)齊屬性align。

實(shí)際制作中并不建議圖像標(biāo)簽<img />直接使用border、vspace、hspace及align屬性，可用CSS樣式替代。網(wǎng)頁(yè)制作中，裝飾性的圖像不建議直接插入<img />標(biāo)簽，最好通過(guò)CSS設(shè)置背景圖像來(lái)實(shí)現(xiàn)。

猜你喜歡：

什么是HTML語(yǔ)義化？HTML語(yǔ)義化有哪些好處？

HTML5中figure標(biāo)簽的作用

HTML入門(mén)之 a 標(biāo)簽

Html5是什么?HTML5的發(fā)展歷程介紹

黑馬程序員HTML&JS+前端課程