整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
例
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)系。
