首頁 > web前端 > html教學 > HTML減肥 精簡HTML標籤製作網頁_HTML/Xhtml_網頁製作

HTML減肥 精簡HTML標籤製作網頁_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:42:43
原創
1439 人瀏覽過

HTML 4

HTML (非XHTML),MIME type 為 text/html ,允許省略一些標籤。透過 HTML 4 DTD,你可以省略以下標籤(那些所謂可避免的元素,這裡用刪除線加以標記)

<code><del><font face="Consolas" size="2"></area></font></del></code>
登入後複製
<code><del><font face="Consolas" size="2"></base></font></del></code>
登入後複製
<code><font face="Consolas" size="2"><body></font></code>
登入後複製
<code><font face="Consolas" size="2"></body></font></code>
登入後複製
<code><del><font face="Consolas" size="2"></br></font></del></code>
登入後複製
<code><del><font face="Consolas" size="2"></col></font></del></code>
登入後複製
<code><font face="Consolas" size="2"></colgroup></font></code>
登入後複製
<code><font face="Consolas" size="2"></dd></font></code>
登入後複製
<code><font face="Consolas" size="2"></dt></font></code>
登入後複製
<code><font face="Consolas" size="2"><head></font></code>
登入後複製
<code><font face="Consolas" size="2"></head></font></code>
登入後複製
<code><del><font face="Consolas" size="2"></hr></font></del></code>
登入後複製
<code><font face="Consolas" size="2"><html></font></code>
登入後複製
<code><font face="Consolas" size="2"></html></font></code>
登入後複製
<code><del><font face="Consolas" size="2"></img></font></del></code>
登入後複製
<code><del><font face="Consolas" size="2"></input></font></del></code>
登入後複製
<code><font face="Consolas" size="2"></li></font></code>
登入後複製
<code><del><font face="Consolas" size="2"></link></font></del></code>
登入後複製
<code><del><font face="Consolas" size="2"></meta></font></del></code>
登入後複製
<code><font face="Consolas" size="2"></option></font></code>
登入後複製
<code><font face="Consolas" size="2"></p></font></code>
登入後複製
登入後複製
<code><del><font face="Consolas" size="2"></param></font></del></code>
登入後複製
<code><font face="Consolas" size="2"><tbody></font></code>
登入後複製
<code><font face="Consolas" size="2"></tbody></font></code>
登入後複製
<code><font face="Consolas" size="2"></td></font></code>
登入後複製
<code><font face="Consolas" size="2"></tfoot></font></code>
登入後複製
<code><font face="Consolas" size="2"></th></font></code>
登入後複製
<code><font face="Consolas" size="2"></thead></font></code>
登入後複製
<code><font face="Consolas" size="2"></tr></font></code>
登入後複製

比如,你的程式碼是

<code><font face="Consolas" size="2"><li>List item</li></font></code>
登入後複製

可以寫成

<code><font face="Consolas" size="2"><li>List item</font></code>
登入後複製

又例如段落要以

<code><font face="Consolas" size="2"></p></font></code>
登入後複製
登入後複製

結尾,你可以只寫

<code><font face="Consolas" size="2"><p>My paragraph</font></code>
登入後複製

甚至可以去掉 html,head,body(把這當作你的編碼規範之前請確保這會令你舒服)。

省略標籤後 HTML 依然有效,同時減少了檔案大小。對於一般的頁面來說,可以節省 5-20%。

HTML 5

正在發展中的 HTML 5 提供了一些減少檔案大小的方法。

例如,頁面文件類型聲明

<code><font face="Consolas" size="2"><!DOCTYPE html></font></code>
登入後複製

對比

<code><font face="Consolas" size="2"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></font></code>
登入後複製

很顯然 HTML 5 的 DTD 較短。

當為頁面指定編碼時,HTML 5 很易用且更短:

<code><font face="Consolas" size="2"><meta charset="utf-8"></font></code>
登入後複製

代替

<code><font face="Consolas" size="2"><meta http-equiv="content-type" content="text/html; charset=utf-8"></font></code>
登入後複製

通常情況下,瀏覽器會正確處理 HTML。

另外,在今天的 HTML 5 中,你可以去除宣告 MIME 類型的 type 屬性,例如

<code><font face="Consolas" size="2">type="text/css"</font></code>
登入後複製
登入後複製
<code><font face="Consolas" size="2">type="text/javascript"</font></code>
登入後複製

你可以用

<code><font face="Consolas" size="2"><script></font></code>
登入後複製
替代
<code><font face="Consolas" size="2"><script type="text/javascript"></font></code>
登入後複製
<code><font face="Consolas" size="2"><style></font></code>
登入後複製
替代
<code><font face="Consolas" size="2"><style type="text/css"></font></code>
登入後複製

在所有類型的頁面中(甚至是 XHTHML)你可以省略

<code><font face="Consolas" size="2">type="text/css"</font></code>
登入後複製
登入後複製

HTML 5 讓這一切變得更簡單。

同時使用上面所有的方法會使文件節省 10%-20%(甚至更多),這取決於你的編碼風格和頁面中的文字內容數量。程式碼將更乾淨,訪客會更快的獲取網站內容。在隱私中心專案中我們採用許多這類技術,節省了原始文件大小的 20%。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板