首页 > 站内优化 > HTML代码优化
2017
05-17

既然要削减代码体积,那就先从没必要保留的地方下手,也许你是用的智能编辑器如Dreamweaver等,让你点点鼠标就能插入代码,但这些代码中也有一些代码是不必要的。下面是一些常见的可优化的HTML标签。

  • 去除不必要的HTML标签

<meta>标签。除了其中的编码声明行、<keyword><description>子标签,其余的都可以删除。

<link>标签。通常用来载入css文件,其余用途则可删除;而且,link载入css时, 上type=“text/css”即可,不用再加上rel=”stylesheet”,media属性也可不要。

通常<htnl xmlns=”http://www.w3.org/1999/xhtml”>这句中只保留<html>即可。

<scrip>标签。只需保留type,而无需使用language属性。

内容为空的属性。比如img的空白Alt,a的空白title。

加在不需要视觉操作的元素上的属性。如link,cript上的class,ID等。

  • 主动减少HTML标签

这点需要有比较良好的代码知识。我们应该本着写更少的代码,却能做同样多事情的心态来写HTML。

重点:减少HTML标签嵌套。就是能用一层标签的就不要用两层,然后通过css来达到相同的视觉效果。

 

<div>

<div><h2>相关文章</h2></div>

<div><ul><li>。。。</li></ul></div>

</div>

这块代码也可以是如下写法:

<div>

<h2>相关文章</h2>

<ul><li>。。。</li></ul>

</div>

相比之下,后者代码就精简的多了,而且可以通过css实现相同的视觉效果。减少嵌套,对SEO也更好。

不过,前者无疑具有更好的扩展性。如你想在“相关文章”右侧加一个“更多”链接,那上述这种结构就很容修改。

所以,精简代码,是在确认了需求改动不频繁的前提下,否则以后修改起来会让你很痛。

3.尽量少使用行内css

因为行内css每次都要加个style=,关键词是,只能对此元素生效。不如用一个class代替,重用起来也方便。把不需要判断条件载入的css文件给合并了,可以减少一个<link>标签,也就减少了一个http请求。


留下一个回复

你的email不会被公开。