查看: 1385|回复: 3

HTML标签优化技巧秘密分享+文召召`

4 主题	0 好友	327 积分

中级会员

Rank: 3 Rank: 3

TA的每日心情

	开心 2013-3-29 10:07

签到天数: 5 天

连续签到: 1 天

[LV.2]偶尔看看I

发消息

电梯直达

楼主

发表于 2013-3-21 15:48:18 |只看该作者 |倒序浏览

要减少代码体积，就要先用不必要保留的地方下手，也许你是用智能编辑器如DREAMWERVER，VS等，让你点眯就能插入代码，但是
代码中有一些代码是不必要的，我们可以从三个方面来做常见的优化：
  1。去除不必要的HTML标签：
<meta>标签。除了其中的编码声明行，<keyword>与<decription>子标签，其他的都可以删除，
<link>标签，通常用来载入CSS文件，其他用途则可删除，而且LINK载入CSS时带上type=text/css即可，不用再加上
rel=stylesheet,media属性也不要。通常<html xmlns=http://www.w3.org/1999/xhtml>这句中只保留<html>即可。<script>标签，
只须保留type,而无须使用language属性。
  2。主动减少HTML标签
这点需要有点代码基础，重点：减少HTML标签嵌套，就是使用一层标签的就不要用二层，然后通过CSS来达到相同的社觉效果，该块
的HTML结构和写法如下：
<div>
<div><h2>相关文章</h2></div>
<div><ul><li>.....</li></ul></div>
</div>
也可以写成这样的
<div>
<h2>相关文章</h2>
<ul><li>...</ul></li>
</div>
相比之下，第二种更简，而且还可以通过CSS实现相同的视觉效果，减少嵌套，对SEO更发，不过前者无颖更有好的扩展性，如你想在
相关文章右侧加一个更多链接，那上述这种结构就很容易修改
  3。尽量减少使用行内CSS
因为行内CSS每次都要加个STYLE=，关键是只能对此元素生效，不如用一个CLASS代替，重用起来也方便，把不需要判断条件载入CSS
文件结合并了，可以减少一个<link>标签，也就减少了一个HTTP请求