首頁技術(shù)文章正文

圖像標(biāo)簽基本特點(diǎn)和相關(guān)屬性

更新時間:2021-03-15 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


HTML網(wǎng)頁中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽,要想在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽,接下來將詳細(xì)介紹圖像標(biāo)簽<img />以及和它相關(guān)的屬性。圖像標(biāo)簽的基本語法格式如下。

<img src="圖像URL" />


在上面的語法中,src屬性用于指定圖像文件的路徑和文件名,是img標(biāo)簽的必需屬性。

要想在網(wǎng)頁中靈活地使用圖像,僅僅依靠src屬性是遠(yuǎn)遠(yuǎn)不夠的。為此HTML還為<img />標(biāo)簽準(zhǔn)備了其他的屬性,具體如表2-5所示。

表1 <img />標(biāo)簽的屬性
1615798085698_1.png

表1對<img />標(biāo)簽的常用屬性做了簡要的描述,下面對它們進(jìn)行詳細(xì)講解,具體如下:

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

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

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

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

3.圖像的表框?qū)傩?border

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

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

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

5.圖像的對齊屬性align

圖文混排是網(wǎng)頁中很常見的效果,默認(rèn)情況下圖像的底部會與文本的第一行文字對齊,如圖1所示。


1615798095571_2.png

圖 1 圖像標(biāo)簽的默認(rèn)對齊效果

但是在制作網(wǎng)頁時需要經(jīng)常實(shí)現(xiàn)圖像和文字環(huán)繞效果,例如左圖右文,這就需要使用圖像的對齊屬性align。

注意:

1、實(shí)際制作中并不建議圖像標(biāo)簽<img />直接使用border、vspace、hspace及align屬性,可用CSS樣式替代。

2、網(wǎng)頁制作中,裝飾性的圖像不建議直接插入<img />標(biāo)簽,最好通過CSS設(shè)置背景圖像來實(shí)現(xiàn)。






猜你喜歡:
如何使用H標(biāo)簽?【卡其漫畫2】

JavaScript中如何獲取標(biāo)簽屬性?

有序列表標(biāo)簽的基本屬性簡介【前端web文章】

黑馬程序員web前端培訓(xùn)班

分享到:
在線咨詢 我要報名
和我們在線交談!