例
Norwegian Mountain Trip
在線實(shí)例
插入圖像
本例演示如何在網(wǎng)頁中顯示圖像。
從不同的位置插入圖片
本例演示如何將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁中。
(可以在本頁底端找到更多實(shí)例。)
HTML 圖像- 圖像標(biāo)簽( <img>)和源屬性(Src)
在 HTML 中,圖像由<img> 標(biāo)簽定義。
<img> 是空標(biāo)簽,意思是說,它只包含屬性,并且沒有閉合標(biāo)簽。
要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是:
<img src="url" alt="some_text">
URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中,那么其 URL 為 http://www.w3school.com.cn/images/boat.gif。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個段落之間,那么瀏覽器會首先顯示第一個段落,然后顯示圖片,最后顯示第二段。
HTML 圖像- Alt屬性
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時,替換文本屬性告訴讀者她們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣,這樣有助于更好的顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。
HTML 圖像- 設(shè)置圖像的高度與寬度
height(高度) 與 width(寬度)屬性用于設(shè)置圖像的高度與寬度。
屬性值默認(rèn)單位為像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定圖像的高度和寬度的一個很好的習(xí)慣。如果圖像指定了高度寬度,頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小,加載頁面時有可能會破壞HTML頁面的整體布局。
基本的注意事項(xiàng) - 有用的提示:
注意: 假如某個 HTML 文件包含十個圖像,那么為了正確顯示這個頁面,需要加載 11 個文件。加載圖片是需要時間的,所以我們的建議是:慎用圖片。
注意: 加載頁面時,要注意插入頁面圖像的路徑,如果不能正確設(shè)置圖像的位置,瀏覽器無法加載圖片,圖像標(biāo)簽就會顯示一個破碎的圖片。
更多實(shí)例
排列圖片
本例演示如何在文字中排列圖像。
浮動圖像
本例演示如何使圖片浮動至段落的左邊或右邊。
設(shè)置圖像鏈接
本例演示如何將圖像作為一個鏈接使用。
創(chuàng)建圖像映射
本例顯示如何創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。
HTML 圖像標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<img> | 定義圖像 |
<map> | 定義圖像地圖 |
<area> | 定義圖像地圖中的可點(diǎn)擊區(qū)域 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像,還可以播放音頻、視頻,及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等,以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮,是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質(zhì)的損失,且壓縮率高,支持動畫效果,很適合互聯(lián)網(wǎng)平臺,但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片,通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數(shù)據(jù)造成損失,這部分損失不影響圖片顯示,一般人眼是看不出來差異的。損失數(shù)據(jù)越多,圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁圖像文件格式,它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn),還支持48 bit的色彩,跨平臺的圖像亮度控制,更多層的透明度設(shè)置。
網(wǎng)頁中通過<img>標(biāo)簽插入圖片,語法如下:
<img src="圖片路徑" alt="替換文本" />
具體示例:
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像:
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動畫圖像:
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請注意,插入動畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>
效果如下:
替換文本屬性(Alt)
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">
當(dāng)瀏覽器無法載入圖像時,替換文本屬性可告訴讀者他們失去的信息。此時,瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣,這樣有助于更好地顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼,在網(wǎng)頁中插入一個寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />
圖片超鏈接
如下代碼,在網(wǎng)頁中對一個圖片進(jìn)行超鏈接設(shè)置,點(diǎn)擊這張圖片就會跳轉(zhuǎn)到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>
除了對整個圖片進(jìn)行超鏈接設(shè)置外,還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置,比如一張地圖中給每個省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接,使用usemap 屬性通過#name指定到名叫name的map元素上,map定義了每個熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種,rect 方形,circle 圓形,poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置,相對于圖片左上角位置。
示例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽或其他行星,注意變化:</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>
效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。
可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會打開對應(yīng)的圖片。
到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了,自己親手寫下,會加深印象,感謝關(guān)注。
上篇:前端入門——html 超鏈接
下篇:前端入門——html 如何在網(wǎng)頁中使用視頻音頻
在 HTML 中,圖像由 <img> 標(biāo)簽定義。
<img> 是空標(biāo)簽,意思是說,它只包含屬性,并且沒有閉合標(biāo)簽。
要在頁面上顯示圖像,你需要使用源屬性(src)。src 指 "source","源頭"的意思。源屬性的值是圖像的 URL 地址。
定義圖像的語法是:
<img src="url" />
URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.baidu.com 的 images 目錄中,那么其 URL 為 http://www.baidu.com /images/boat.gif。
這是絕對路徑,當(dāng)然也可以設(shè)置相對路徑。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個段落之間,那么瀏覽器會首先顯示第一個段落,然后顯示圖片,最后顯示第二段。
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時,替換文本屬性告訴讀者她們失去的信息。
這時候?yàn)g覽器將顯示這個替代性的文本,而不是圖像(因?yàn)閳D像無法加載)。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣,這樣有助于更好的顯示信息,并且對于那些使用純文本瀏覽器的人來說是非常有用的。有提示性和為想節(jié)流的用戶節(jié)省流量。
注意事項(xiàng) :
假如某個 HTML 文件包含十個圖像,那么為了正確顯示這個頁面,需要加載 11 個文件(還有一個是文檔)。加載圖片是需要時間的,所以我們的建議是:慎用圖片。
有些圖片可以用css組成,能節(jié)省加載時間,特別是圖片多的時候。
如果您覺得有用,麻煩點(diǎn)個贊,支持一下!!
歡迎提問與建議。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。