如何壓縮html代碼

小編給大家分享一下如何壓縮html代碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

如何壓縮html代碼，讓html文件縮小優化

• HTML優化壓縮目錄

• 
  

1. 將table改為div布局

2. 縮減精簡div、span、ul li等系列標簽

3. 刪除多余空格

4. 表格類型布局時候適當使用table替代div布局

5. html網頁GZIP壓縮

一、將table改為div布局    -   TOP

盡量將table標簽布局html重構div布局，可以節約至少40%的代碼量。由于div代碼少于table布局的html網頁，所以搜索引擎索引權重也優于table布局的html網頁。

二、縮減精簡div、span、ul li等系列標簽    -   TOP

布局DIV+CSS網頁時候，我們有時候可以節約一些DIV布局代碼，減少代碼量。
如下案例代碼：

<div class="億速云"> 　　<ul> 　　<li>CSS學習去DIVCSS5</li> 　　<li>我愛DIVCSS5</li> 　　<li>DIV+CSS學習去DIVCSS5</li> 　　</ul> </div>

可以改為：

<ul class="億速云"> 　　<li>CSS學習去DIVCSS5</li> 　　<li>我愛DIVCSS5</li> 　　<li>DIV+CSS學習去DIVCSS5</li> </ul>

這樣可以節約一對div標簽，從而減少html代碼量，起到壓縮html作用。這樣直接對ul命名css樣式類，可以區別在一個頁面不同地方使用ul li列表標簽。

三、刪除多余空格    -   TOP

刪除多余空格換行，可以有效地壓縮html代碼占用字節，一般在開發完成后可以對html中代碼進行刪除換行和空格內容。

可以借助于DW軟件進行批量刪除html內標簽之間空格

如：

<div class="億速云"> 　　<div ...></div> </div>

可以刪除空格與換行后：

<div class="億速云"><div ...></div></div>

這樣即可節約空格和換行所占字節。

注意的是，網頁發布版的可以借助于DW進行刪除多余空格與空行。如果要再編輯，再到DW軟件進行代碼格式化排版即可。

四、表格類型布局時候適當使用table替代div布局    -   TOP

如果是本身是表格數據列表排版，我們最好選擇table，因為表格布局使用table優于div布局，使用table布局卻比div布局節約html標簽代碼和節約css樣式。

如下圖表格數據類型，建議采用TABLE標簽+CSS樣式布局

類似這種列表型table表格，推薦使用table標簽布局

五、網頁GZIP壓縮    -   TOP

自己的服務器推薦設置網頁Gzip壓縮功能。

1.開GZIP有什么好處？
答：Gzip開啟以后會將輸出到用戶瀏覽器的數據進行壓縮的處理，這樣就會減小通過網絡傳輸的數據量，提高瀏覽的速度。

2.如何啟用IIS的Gzip壓縮功能：
答：首先，如果你需要壓縮靜態文件（HTML），需要在硬盤上建一個目錄，并給它“IUSR_機器名”這個用戶的寫權限。如果壓縮動態文件（PHP，asp，aspx）就不需要了，因為它的頁面是每次都動態生成的，壓縮完就放棄。然后在IIS管理器中，“網站”上面右鍵－屬性，不是下面的某個站點，而是整個網站。進入“服務”標簽，選上啟用動態內容壓縮，靜態內容壓縮。然后選中網站下面那個服務器擴展，新建一個服務器擴展。名字無所謂，下面的添加文件的路徑是： c:\windows\system32\inetsrv\gzip.dll，然后啟用這個擴展。這時候靜態內容是可以壓縮的，但是對于動態內容，aspx文件卻不在壓縮范圍內。因為默認的可壓縮文件并沒有這個擴展名。而管理界面中你又找不到可以增加擴展名的地方，這時候只能去修改它的配置文件了。在c:\windows\system32\inetsrv\下面有個MetaBase.xml文件，可以用記事本打開，找到IIsCompressionScheme，有三個相同名字的段，分別是deflate,gzip,Parameters，第三段不用管它，前兩段有基本相同的參數，在這兩段的參數HcScriptFileExtensions下面都加上一行aspx，如果你有其它的動態程序要壓縮，也加在這里。HcDynamicCompressionLevel改成9，（0－10，9是性價比最高的一個）。然后需要重啟一下IIS服務，就可以體會到壓縮后的速度了。

以上是“如何壓縮html代碼”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！