您的位置:CSS主页 > DIV+CSS技巧 >

压缩优化html网页

 

如何压缩html代码,让html文件缩小优化

优化压缩html目录
  1. 将table改为div布局
  2. 缩减精简div、span、ul li等系列标签
  3. 删除多余空格
  4. 表格类型布局时候适当使用table替代div布局

一、将table改为div布局   -   TOP

尽量将table标签布局html重构div布局,可以节约至少40%的代码量。由于div代码少于table布局的html网页,所以搜索引擎索引权重也优于table布局的html网页。

二、缩减精简div、spanul li等系列标签   -   TOP

布局DIV+CSS网页时候,我们有时候可以节约一些DIV布局代码,减少代码量。
如下案例代码:
<div class="thinkcss">
<ul>
    <li>CSS学习去thinkcss</li>
    <li>我爱thinkcss</li>
    <li>DIV+CSS学习去thinkcss</li>
</ul>
</div>
可以改为:
<ul class="thinkcss">
    <li>CSS学习去thinkcss</li>
    <li>我爱thinkcss</li>
    <li>DIV+CSS学习去thinkcss</li>
</ul>

这样可以节约一对div标签,从而减少html代码量,起到压缩html作用。这样直接对ul命名css样式类,可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格   -   TOP

删除多余空格换行,可以有效地压缩html代码占用字节,一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如:
<div class="thinkcss">
      <div ...></div>
</div>
可以删除空格与换行后:
<div class="thinkcss"><div ...></div></div>
这样即可节约空格和换行所占字节。

注意的是,网页发布版的可以借助于DW进行删除多余空格与空行。如果要再编辑,再到DW软件进行代码格式化排版即可。

四、表格类型布局时候适当使用table替代div布局   -   TOP

如果是本身是表格数据列表排版,我们最好选择table,因为表格布局使用table优于div布局,使用table布局却比div布局节约html标签代码和节约css样式


类似这种列表型table表格,推荐使用table标签布局

标签(Tag): html 压缩 优化

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-10-01     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/g76.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!