html的基本格式

tml由element組成。element分兩種，正常element和空element。

正常element

<p class=“wd”>world</p>

element由tag和content構(gòu)成

開始tag <p class=“wd”>
結(jié)束tag</p>

content

可以是直接在頁(yè)面上顯示的內(nèi)容
也可包含別的tag

<ul>
<li>first</li>
<li>second</li>
</ul>

空element

沒有content和結(jié)束tag的element。比如

換行<br>
<img src=“bg.png”>
<input type=“text” name=“name”>

element之間存在三種關(guān)系

父子關(guān)系。
祖孫關(guān)系
兄弟關(guān)系

<div>
<h1>title</h1>
<p>p1</p>
<p>p<strong>2</strong ></p>
</div>

div和h1，div和p，p和strong是父子關(guān)系。

div和strong是祖孫關(guān)系。

h1和p是兄弟關(guān)系。

構(gòu)建現(xiàn)代網(wǎng)頁(yè)時(shí)，圖片是不可或缺的元素之一。它們能夠增強(qiáng)視覺吸引力，幫助傳達(dá)信息，并提升用戶體驗(yàn)。然而，如果圖片沒有得到適當(dāng)?shù)膬?yōu)化，它們可能會(huì)顯著拖慢網(wǎng)站的加載速度，影響用戶體驗(yàn)和搜索引擎優(yōu)化（SEO）。在本文中，我們將探討不同的圖片格式，并提供優(yōu)化這些格式的策略和示例。

常見的圖片格式

JPEG（或JPG）

優(yōu)點(diǎn)：支持高色彩深度，適合處理照片和復(fù)雜的圖像。
缺點(diǎn)：有損壓縮，可能會(huì)在高壓縮率下失去細(xì)節(jié)。
使用場(chǎng)景：適用于色彩豐富且沒有透明度要求的圖片。

PNG

優(yōu)點(diǎn)：支持透明度，無損壓縮，保留細(xì)節(jié)。
缺點(diǎn)：文件大小通常大于JPEG。
使用場(chǎng)景：適用于需要透明度或者高保真度的圖形，如徽標(biāo)和圖標(biāo)。

GIF

優(yōu)點(diǎn)：支持動(dòng)畫和透明度（僅限單色透明）。
缺點(diǎn)：僅支持256色，質(zhì)量較低。
使用場(chǎng)景：適用于簡(jiǎn)單動(dòng)畫和小圖標(biāo)。

WebP

優(yōu)點(diǎn)：支持透明度和有損以及無損壓縮，壓縮率高于JPEG和PNG。
缺點(diǎn)：兼容性不如JPEG和PNG廣泛。
使用場(chǎng)景：適用于需要優(yōu)化加載速度的網(wǎng)頁(yè)，同時(shí)保持較高的圖像質(zhì)量。

SVG

優(yōu)點(diǎn)：矢量格式，可無限放大而不失真，文件大小小。
缺點(diǎn)：不適合復(fù)雜的照片。
使用場(chǎng)景：適用于圖標(biāo)、徽標(biāo)、圖表和其他可縮放圖形。

圖片優(yōu)化策略

選擇正確的格式

根據(jù)圖片內(nèi)容和用途選擇最合適的格式。例如，對(duì)于網(wǎng)頁(yè)上的照片，JPEG可能是最佳選擇，因?yàn)樗诒３窒鄬?duì)較小的文件大小的同時(shí)提供了良好的圖像質(zhì)量。對(duì)于需要透明背景的圖標(biāo)，PNG可能更合適。

壓縮圖片

使用工具或服務(wù)壓縮圖片，減少文件大小。例如，使用在線工具如 TinyPNG 來壓縮PNG文件，或者使用 Adobe Photoshop 的“存儲(chǔ)為Web所用格式”功能來減小JPEG文件的大小。

調(diào)整尺寸

根據(jù)需要在網(wǎng)頁(yè)中顯示的大小調(diào)整圖片尺寸。不要上傳超大的圖片然后依賴瀏覽器縮放，因?yàn)檫@會(huì)導(dǎo)致不必要的加載時(shí)間。

使用響應(yīng)式圖片

通過 HTML5 的 <picture> 元素或 srcset 和 sizes 屬性，可以為不同屏幕尺寸提供不同大小的圖片。

延遲加載

對(duì)于非視口內(nèi)的圖片，可以使用延遲加載（lazy loading）技術(shù)。這樣，只有當(dāng)用戶滾動(dòng)到圖片位置時(shí)，圖片才會(huì)加載。

使用CDN

使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）來分發(fā)圖片，可以減少加載時(shí)間，因?yàn)閳D片會(huì)從離用戶最近的服務(wù)器加載。

實(shí)例分析

示例1：優(yōu)化網(wǎng)頁(yè)照片

假設(shè)你有一個(gè)高分辨率的照片，原始尺寸為4000x3000像素，文件大小為5MB。如果這張照片要在網(wǎng)頁(yè)上以800x600像素的尺寸展示，那么：

使用圖像編輯工具將尺寸調(diào)整為800x600像素。
選擇JPEG格式，并設(shè)置合適的壓縮比例，比如70%的質(zhì)量。
使用TinyJPG等在線工具進(jìn)一步壓縮處理。
TinyJPG – Compress WebP, PNG and JPEG images intelligently

優(yōu)化后的圖片可能只有100KB左右，大大減少了加載時(shí)間。

示例2：優(yōu)化圖標(biāo)

如果你有一個(gè)圖標(biāo)，需要在網(wǎng)頁(yè)上以多種尺寸展示，并且需要透明背景：

使用SVG格式，因?yàn)樗С滞该鞫?，且大小不?huì)隨著尺寸變化而變化。
如果SVG不可行，選擇PNG格式，并確保圖片尺寸不大于實(shí)際需要的尺寸。

結(jié)論

圖片優(yōu)化對(duì)于提高網(wǎng)頁(yè)加載速度至關(guān)重要。通過選擇合適的圖片格式，壓縮文件大小，調(diào)整尺寸，使用響應(yīng)式圖片技術(shù)，實(shí)現(xiàn)延遲加載，以及利用CDN，可以確保圖片在不犧牲質(zhì)量的情況下快速加載。這不僅能提升用戶體驗(yàn)，還能對(duì)SEO產(chǎn)生積極影響。

lt;hr>水平線

<hr size="9" /> 水平線(設(shè)定大小,單位:像素)

<hr width="80%" /> 水平線(設(shè)定寬度,單位:像素或百分比)

<hr color="#ff0000" /> 水平線對(duì)齊方式

<hr align="left" /> 水平線水平位置

<hr noshade /> 去掉水平線的陰影

align屬性值:center(默認(rèn)值) left right

<center></center>水平居中.

<br/> 換行

<p></p> 標(biāo)簽定義段落

<p align=""></p>將段落按左、中、右對(duì)齊;

align屬性值:left(默認(rèn)值) right center justify

注意：

<h1>...<h6>標(biāo)題標(biāo)記與<p>段落標(biāo)記都只有一個(gè)屬性align

<pre></pre> 定義預(yù)格式化的文本

<blockquote></blockquote> 設(shè)置段落縮進(jìn)(可以縮進(jìn)5個(gè)字符)

手冊(cè)上沒有的標(biāo)記

<xmp></xmp> 忽略HTML標(biāo)記

<nobr>…</nobr> 禁止換行

<wbr> 指定軟換行（或單詞換行），用在nobr標(biāo)記中，即使用 <nobr> 禁止了換行，使用 <wbr> 仍然可以換行

<nobr>中華人民共和國(guó)上海市<wbr>黃浦區(qū)</wbr></nobr>

在線咨詢

上一篇：「胖達(dá)分享」網(wǎng)頁(yè)中的圖片和html文檔的路徑
下一篇：HTML5培訓(xùn)學(xué)習(xí)（簡(jiǎn)單明了）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商