整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
解了什么是塊級元素和行內元素之后，接下來還是把這個東西給完善一下，然后把這些多余的圖片給刪掉。
這三個圖片的位置是隔得比較開的，所以得調整一下它們的位置。這個還不簡單嗎？不就是改image的CSS代碼嘛？所以image的需求是把圖片與圖片之間的間隔調大，所以應該是調margin，而且是調左右兩邊的margin。
所以margin left，比如30 Pixel，開一點了，然后對照看一下，好像還要再過來一點，那就60，還要再過來一點80，好像差不多，但是后面這兩個的位置不太對。所以是不是可以去調整margin right？比如30px，過來了，好像還要再過去一點50，像模像樣了。
構建現代網頁時，圖片是不可或缺的元素之一。它們能夠增強視覺吸引力，幫助傳達信息，并提升用戶體驗。然而，如果圖片沒有得到適當的優化，它們可能會顯著拖慢網站的加載速度，影響用戶體驗和搜索引擎優化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優化這些格式的策略和示例。
根據圖片內容和用途選擇最合適的格式。例如，對于網頁上的照片，JPEG可能是最佳選擇，因為它在保持相對較小的文件大小的同時提供了良好的圖像質量。對于需要透明背景的圖標，PNG可能更合適。
使用工具或服務壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲為Web所用格式”功能來減小JPEG文件的大小。
根據需要在網頁中顯示的大小調整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因為這會導致不必要的加載時間。
通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。
對于非視口內的圖片，可以使用延遲加載（lazy loading）技術。這樣，只有當用戶滾動到圖片位置時，圖片才會加載。
使用內容分發網絡（CDN）來分發圖片，可以減少加載時間，因為圖片會從離用戶最近的服務器加載。
假設你有一個高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網頁上以800x600像素的尺寸展示，那么：
優化后的圖片可能只有100KB左右，大大減少了加載時間。
如果你有一個圖標，需要在網頁上以多種尺寸展示，并且需要透明背景：
圖片優化對于提高網頁加載速度至關重要。通過選擇合適的圖片格式，壓縮文件大小，調整尺寸，使用響應式圖片技術，實現延遲加載，以及利用CDN，可以確保圖片在不犧牲質量的情況下快速加載。這不僅能提升用戶體驗，還能對SEO產生積極影響。
維網和其它網絡類型最大的區別就是它在網頁上可呈現豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網絡上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質的損失，且壓縮率高，支持動畫效果，很適合互聯網平臺，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數據造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數據越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網頁圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數據損失。它不僅支持像gif大部分優點，還支持48 bit的色彩，跨平臺的圖像亮度控制，更多層的透明度設置。
網頁中通過<img>標簽插入圖片，語法如下：
<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>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網頁中插入一個寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網頁中對一個圖片進行超鏈接設置，點擊這張圖片就會跳轉到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對整個圖片進行超鏈接設置外，還可以將圖像劃分成不同區域進行鏈接設置，比如一張地圖中給每個省份圖形進行超鏈接。
圖像熱區鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個熱區點擊區域形狀、大小、坐標等。
area標簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標點位置，相對于圖片左上角位置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點擊太陽或其他行星，注意變化：</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 這里。
可以看到鼠標在圖片上點擊小行星會打開對應的圖片。
到此網頁中使用圖片已經大體介紹了，自己親手寫下，會加深印象，感謝關注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網頁中使用視頻音頻
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
