整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
了第一節(jié)課的基礎(chǔ)，大家對頁面有了初步得認(rèn)識，具體怎么實(shí)現(xiàn)頁面添加圖片呢？
首先需要有圖片存在于我們的工程項(xiàng)目中，直接復(fù)制粘貼到我們的項(xiàng)目中，最好在項(xiàng)目中單獨(dú)建一個(gè)文件夾img用來放圖片，把圖片直接粘貼到img文件中。
然后找到需要放圖片的位置，實(shí)現(xiàn)代碼，具體如下<img src=“圖片路徑” alt=“” width=“” />
代碼中src指圖片具體在什么位置；
alt是指圖片加載不出來，顯示的文字，用于解釋說明圖片是干什么用的。
width是指圖片的寬度，調(diào)整圖片大小的。
片
當(dāng)我們在制作頁面的時(shí)候，通常會(huì)遇到圖片的三種表現(xiàn)形式，如下：
1、內(nèi)容圖片
內(nèi)容圖片是頁面中真正的內(nèi)容，沒有內(nèi)容圖片，就無法完整的理解頁面內(nèi)容。如淘寶網(wǎng)上的商品展示圖片，這些圖片是網(wǎng)頁的一部分，它們能幫助你決定這個(gè)頁面的內(nèi)容是否是你需要的。
內(nèi)容圖片
2、布局圖片
布局圖片出現(xiàn)在頁面背景中，要想理解頁面的內(nèi)容，它們不是必須的。如蘋果官網(wǎng)的這個(gè)圖片，沒有這個(gè)圖片也能理解頁面上文字描述的內(nèi)容是什么意思。
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會(huì)給你瀏覽頁面的時(shí)候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產(chǎn)品，箭頭圖片點(diǎn)擊可以看到更詳細(xì)的產(chǎn)品等。
交互圖片
在HTML中我們用 img 標(biāo)簽創(chuàng)建圖片，英文是image的縮寫。
<img src="" alt="">
內(nèi)容圖片
布局圖片是在CSS中被創(chuàng)建出來的，使用CSS中的background屬性，如：
1）background-color 定義背景顏色，設(shè)置背景圖片時(shí)，要始終設(shè)置背景顏色，確保背景圖片沒有成功時(shí)會(huì)顯示一個(gè)背景顏色
2）background-image 可以指向一個(gè)相對路徑或者絕對路徑來添加圖片。
3）background-repeat可以設(shè)置背景是否平鋪在容器中，包含四個(gè)關(guān)鍵字：
4）background-position 屬性可以控制背景圖片顯示在什么位置，包含兩個(gè)關(guān)鍵字，如：
background-position：top left 設(shè)置圖片顯示在容器的左上角，第一個(gè)關(guān)鍵字可以是top、center、bottom，第二個(gè)關(guān)鍵字可以是left、center、right
CSS中和背景相關(guān)的屬性可以簡寫在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。
布局圖片
Web上最常用的三種圖像格式
1）Jpeg 可以展示一張照片或者復(fù)雜圖像
2）png最適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)
3）gif適合展示網(wǎng)頁插畫、logo和網(wǎng)頁小圖標(biāo)
建議：
一般情況下用戶交互圖片都是一些小圖標(biāo)，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網(wǎng)頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個(gè)文件中，可以提高網(wǎng)絡(luò)和服務(wù)器性能，如：
交互圖片
交互圖片
具體如何操作呢？后續(xù)教頭會(huì)通過視頻給大家詳細(xì)演示，請繼續(xù)關(guān)注。
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會(huì)造成任何品質(zhì)的損失，且壓縮率高，支持動(dòng)畫效果，很適合互聯(lián)網(wǎng)平臺，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會(huì)對一些圖像數(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>
一幅動(dòng)畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請注意，插入動(dòng)畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當(dāng)瀏覽器無法載入圖像時(shí)，替換文本屬性可告訴讀者他們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網(wǎng)頁中插入一個(gè)寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網(wǎng)頁中對一個(gè)圖片進(jìn)行超鏈接設(shè)置，點(diǎn)擊這張圖片就會(huì)跳轉(zhuǎn)到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對整個(gè)圖片進(jìn)行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置，比如一張地圖中給每個(gè)省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個(gè)熱區(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)擊小行星會(huì)打開對應(yīng)的圖片。
到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了，自己親手寫下，會(huì)加深印象，感謝關(guān)注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網(wǎng)頁中使用視頻音頻
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
