html圖像標簽教程學習

文本使網頁的內容得到充實，那圖像使網頁的內容更加豐富多彩。因此圖像在網頁中的作用是舉足輕重的。作為一個網頁設計者，掌握好網頁中ｈｔｍｌ圖像標簽的應用尤為重要。

下面我們就開始介紹常用的圖片格式，以及如何在網頁中實現圖文並茂的頁面。

本節單詞記憶：標簽　1.img　屬性　1.src　2.width　3.height

網頁提示：html語言非常簡單，不需要邏輯理解，而絕大部分朋友覺得它難以掌握，90%的原因在於英語單詞不過關，所以每節記憶幾個單詞是非常有必要的。

一、常見的圖片格式

在日常生活中，使用比較多的圖像格式有4種，即JPG、GIF、SWF、BMP。在網頁中使用比較多的是JPG、GIF和SWF，大多數浏覽器都可以顯示這些圖像。下面我們就來分別介紹這4種常用圖像。

１．ＪＰＧ

JPG　(JPEG)格式圖像是在Intemet上被廣泛支持的圖像格式，它是聯合圖像專家組文件格式(Joint　Photographic　Experts　Group)的英文縮寫。JPG格式采用的是有損壓縮，

會造成圖像畫面的失真，不過壓縮之後的體積很小，而且還比較清晰，所以比較適合在網頁中應用。

此格式最適合用於攝影或連續色調圖像的高級格式，這是因為JPG文件可以包含數百萬種顏色。隨著JPG文件品質的提高，文件的大小和下載時間也會隨之增加。通常可以通

過壓縮JPG文件在圖像品質和文件大小之間達到良好的平衡。

制作JPG文件的軟件很多，比較常見的有Photoshop、HyperSnap等。

２．ＧＩＦ

GIF圖像是網頁中使用最廣泛，最普遍的一種圖像格式，它是圖像交換格式(Graphics　Interchange　Format)的英文縮寫。GIF文件的眾多特點恰恰適應了Intemet的需要，於是它成了Internet上最流行的圖像格式，它的出現為Internet注入了一股新鮮的活力。

GIF格式圖像采用的是無損壓縮，由於只支持256色，所以GIF格式圖像體積也很小。支持透明色，使得GIF在網頁的背景和一些多層特效的顯示上用得非常多，還支持幀動

畫，這是它最突出的一個特點。要設計GIF動畫，首先要用圖像處理軟件做好GIF動畫中的每一幅單幀畫面，然後再用專門的GIF動畫軟件把這些靜止的畫面連在一起，再定

好幀與幀之間的時間間隔，最後保存成GIF格式就可以了。

制作GIF文件的軟件也很多，比較常見的有Photoshop、GIF　Construction　Set等。

３．ＳＷＦ

SWF動畫是網頁中應用非常廣泛的一種多媒體圖像動畫，這種格式的動畫圖像能夠用比較小的體積來表現豐富的多媒體形式。在圖像的傳輸方面，可以邊傳輸邊觀看，因此

特別適合網絡傳輸，特別是在傳輸速率不佳的情況下，也能取得較好的效果。事實也證明了這一點，SWF如今已被大量應用於Web網頁進行多媒體播放與交互性設計。此

外，SWF動畫是基干矢量技術制作的，因此不管將畫面放大多少倍，畫面不會因此而有任何失真。綜上所述，SWF格式作品以其高清晰度的畫質和小巧的體積，受到了越

來越多網頁設計者的青睐，也越來越成為網頁動畫和網頁圖片設計制作的主流，目前已成為網頁上動畫的事實標准。SWF文件的缺點就是制作起來非常耗時耗力。

制作SWF文件的軟件也很多，比較常見的有Flash、SWFText等。

４．ＢＭＰ

BMP圖像是在Windows操作系統中使用得比較多，它是“位圖”的英文縮寫。BMP圖像可以用任何顏色深度(從黑白到24位顏色)存儲單個光柵圖像。BMP圖像文件格式

與其他Microsoft　Windows程序兼容。它不支持文件壓縮，也不適用於Web頁。從總體上看，BMP圖像格式的缺點超過了它的優點。為了保證照片圖像的質量，請使用

JPG文件。BMP文件適用於Windows中的牆紙。BMP的優點支持l位到24位顏色深度，並且與現有Windows程序廣泛兼容。BMP的缺點是不支持壓縮，這會造成文件非

常大。

制作BMP文件的軟件也很多，比較常見的有Photoshop、Windows自帶的“畫圖”軟件等。

二、圖像的基本語法

標簽用於在HTML文檔中插入圖像，該標簽可以放在要顯示圖像的位置。

標簽不含任何內容，它使用src屬性指定圖像源文件所在的路徑。

其中，src參數用來設置圖像文件所在的位置，width和height屬性用來指定圖像的寬度和高度，alt屬性有兩個作用：第一個是在網頁中，如果圖像沒有被下載，在圖像位置

上出現的提示文字;第二個是在網頁中，如果圖像下載完，將鼠標放在該圖像上，在鼠標旁邊出現的提示文字。

示例１：

＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ａｄｖ＿２．ｊｐｇ＂　ａｌｔ＝＂明星演唱會開幕＂　ｗｉｄｔｈ＝＂３００＂　ｈｅｉｇｈｔ＝＂１５０＂＞

示例1在浏覽器中預覽效果如圖1所示，把鼠標指向圖像上方，稍等片刻，就會出現提示文字“明星演唱會開幕”。

圖1　給圖像添加提示文字的效果

三、圖像與文本的對齊

標簽的align屬性可用於調整圖像相對於周圍文本的對齊方式。align屬性可取下面的值：top、bottom、middle、left或right。

語法：

其中，align=”top”表示圖片的頂端和當前行文字頂端對齊，align=”bottom”表示圖片的底部和當前行文字底部對齊，align=”middle”表示圖片的中部和當前行文字中部對齊，

align=”left”表示圖片左對齊，align=”right”表示圖片右對齊。

示例２

示例1在浏覽器中預覽效果如圖1所示，把鼠標指向圖像上方，稍等片刻，就會出現提示文字“明星演唱會開幕”。

圖1　給圖像添加提示文字的效果

三、圖像與文本的對齊

標簽的align屬性可用於調整圖像相對於周圍文本的對齊方式。align屬性可取下面的值：top、bottom、middle、left或right。

語法：

其中，align=”top”表示圖片的頂端和當前行文字頂端對齊，align=”bottom”表示圖片的底部和當前行文字底部對齊，align=”middle”表示圖片的中部和當前行文字中部對齊，

align=”left”表示圖片左對齊，align=”right”表示圖片右對齊。

示例２

＜ＩＭＧ　　ａｌｉｇｎ＝＂ｍｉｄｄｌｅ＂　ｓｒｃ＝＂ｉｍａｇｅｓ／ａｄｖ＿２．ｊｐｇ＂　ｗｉｄｔｈ＝＂１８０＂　ｈｅｉｇｈｔ＝＂９５＂　ｂｏｒｄｅｒ＝＂０＂　／＞　　請點擊廣告進入明星專區

＜ＩＭＧ　　ａｌｉｇｎ＝＂ｔｏｐ＂　ｓｒｃ＝＂ｉｍａｇｅｓ／ａｄｖ＿２．ｊｐｇ＂　ｗｉｄｔｈ＝＂１８０＂　ｈｅｉｇｈｔ＝＂９５＂　ｂｏｒｄｅｒ＝＂０＂　／＞　　請點擊廣告進入明星專區

示例2在浏覽器中預覽效果如圖2所示。

圖2　圖像與文本的對象方式

本節作業：

制作如下圖網頁。

注意事項：

1.圖片的寬度，高度可自由設置。

2.圖片與文本的對齊方式。

3.如何居中，如何空格等簡單排版。

以上就是精品學習提供的關於ｈｔｍｌ圖像標簽的內容，希望能夠帶給您幫助。