HTML减肥精简HTML标记制作网页_HTML/Xhtml_网页制作-html教程-PHP中文网

HTML减肥精简HTML标记制作网页_HTML/Xhtml_网页制作

php中文网

发布： 2016-05-16 16:42:43

原创

1648人浏览过

html 4

HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过 HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记）

<del><font face="Consolas" size="2"></area></font></del>

登录后复制

<del><font face="Consolas" size="2"></base></font></del>

登录后复制

<font face="Consolas" size="2"><body></font>

登录后复制

<font face="Consolas" size="2"></body></font>

登录后复制

<del><font face="Consolas" size="2"></br></font></del>

登录后复制

<del><font face="Consolas" size="2"></col></font></del>

登录后复制

<font face="Consolas" size="2"></colgroup></font>

登录后复制

<font face="Consolas" size="2"></dd></font>

登录后复制

<font face="Consolas" size="2"></dt></font>

登录后复制

<font face="Consolas" size="2"><head></font>

登录后复制

<font face="Consolas" size="2"></head></font>

登录后复制

<del><font face="Consolas" size="2"></hr></font></del>

登录后复制

<font face="Consolas" size="2"><html></font>

登录后复制

<font face="Consolas" size="2"></html></font>

登录后复制

<del><font face="Consolas" size="2"></img></font></del>

登录后复制

<del><font face="Consolas" size="2"></input></font></del>

登录后复制

<font face="Consolas" size="2"></li></font>

登录后复制

<del><font face="Consolas" size="2"></link></font></del>

登录后复制

<del><font face="Consolas" size="2"></meta></font></del>

登录后复制

<font face="Consolas" size="2"></option></font>

登录后复制

<font face="Consolas" size="2"></p></font>

登录后复制

<del><font face="Consolas" size="2"></param></font></del>

登录后复制

<font face="Consolas" size="2"><tbody></font>

登录后复制

<font face="Consolas" size="2"></tbody></font>

登录后复制

<font face="Consolas" size="2"></td></font>

登录后复制

<font face="Consolas" size="2"></tfoot></font>

登录后复制

<font face="Consolas" size="2"></th></font>

登录后复制

<font face="Consolas" size="2"></thead></font>

登录后复制

<font face="Consolas" size="2"></tr></font>

登录后复制

比如，你的代码是

<font face="Consolas" size="2"><li>List item</li></font>

登录后复制

可以写为

<font face="Consolas" size="2"><li>List item</font>

登录后复制

又比如段落要以

立即学习“前端免费学习笔记（深入）”；

<font face="Consolas" size="2"></p></font>

登录后复制

结尾，你可以只写

<font face="Consolas" size="2"><p>My paragraph</font>

登录后复制

甚至可以去掉 html，head，body（把这作为你的编码规范之前请确保这会令你舒服）。

省略标签后 HTML 依然有效，同时减小了文件大小。对一般的页面来说，可以节省 5-20%。

HTML 5

正在发展中的 HTML 5 提供了一些减小文件大小的方法。

比如，页面文档类型声明

<font face="Consolas" size="2"><!DOCTYPE html></font>

登录后复制

对比

<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>

登录后复制

很显然 HTML 5 的 DTD 更短。

当为页面指定编码时，HTML 5 很易用而且更短：

<font face="Consolas" size="2"><meta charset="utf-8"></font>

登录后复制

代替

<font face="Consolas" size="2"><meta http-equiv="content-type" content="text/html; charset=utf-8"></font>

登录后复制

通常情况下，浏览器会正确处理 HTML。

另外，在今天的 HTML 5 中，你可以去除声明 MIME 类型的 type 属性，比如

<font face="Consolas" size="2">type="text/css"</font>

登录后复制

或

<font face="Consolas" size="2">type="text/javascript"</font>

登录后复制

你可以用

<font face="Consolas" size="2"><script></font>

登录后复制

替代

<font face="Consolas" size="2"><script type="text/javascript"></font>

登录后复制

用

<font face="Consolas" size="2"><style></font>

登录后复制

替代

<font face="Consolas" size="2"><style type="text/css"></font>

登录后复制

在所有类型的页面中（甚至是 XHTHML）你可以省略

<font face="Consolas" size="2">type="text/css"</font>

登录后复制

HTML 5 使这一切变得更简单。

同时使用上面所有的方法会使文件节省 10%-20%（甚至更多），这取决于你的编码风格和页面中的文本内容数量。代码将更干净，访问者会更快的获取网站内容。在隐私中心项目中我们采用很多这类技术，节省了原始文件大小的 20%。

HTML减肥 精简HTML标记制作网页_HTML/Xhtml_网页制作

HTML减肥精简HTML标记制作网页_HTML/Xhtml_网页制作