时代财富 > 网络营销专区 > 企业SEO攻略 > HTML代码优化三大原则

HTML代码优化三大原则

  随着时间的推移,当对一个网页进行更改或更新的过程中,也同时会产生很多不必要的代码堆积。这些无用代码不但会降低网页的打开速度,同时还会损害到网页的效率。更有甚者,乱糟糟的html代码也会严重影响到您的搜索引擎排名。

  这种情形在使用诸如FrontPage或Dreamweaver这一类使用所见即所得(WYSIWYG)的网页编辑软件编辑的网页中表现尤为明显。这些编辑软件虽然能够快捷地生成网页,但却可能包含大量冗余代码,从而无法保证代码的干净简洁。

  我将借此文主要只针对实际的HTML编码就这一点进行探讨,而对网页中可能使用到的其它编程语言,如Javascript等则一概忽略掉。

  最早在使用HTML语言对网页进行编辑时,我们会用象<font>字体和<p>段落这样的标签。然后在这些标签之间放入网页的内容、链接和图片等。每一次对网页上的格式的改变都需要借助新的HTML标签来实现这种改变。后来有了CSS样式表,通过CSS我们可以将格式一次性定义好,实现网页格式和结构的分离,从而可在网页中随意调用该格式,并通过对CSS设置来轻松控制整个页面的布局。

  为了加速网页的下载速度,这就需要我们让网页的HTML源码尽可能地减少。事实上不必,网站也不会愿意去删除任何网站的可视内容,这时候对源码中多余代码的清除就显得势在必行。对多余代码的清除和源码的精简,我们就能够创建一个体积更小,下载速度更快的网页。

  随着时间的推移,HTML也在变化着,现在对于同一件事情,我们可以有很多种方式和选择来完成。例如对字体加粗,在HTML下可以有两种选择:一种是<strong>标签,另外一种就是<b>标签。我们可以看到:使用<strong></strong>标签要比<b></b>多出10个字符。(译者注:虽然<strong>比<b>标签多5个字符,但互联网领军的标准制定组织W3C还是建议将<strong>标签作为首选。)

  这就是清除代码的第一个原则:使用最简单的HTML编码方式。

  HTML具有在代码中嵌套代码的能力。假设现在有一行文字“HTML CODE CLEANING PRINCIPLES”,其中“CLEANING”要求粗体。有的人可能会这样写:

  <font face="Times">HTML CODE</font>

  <font face="Times"<strong>CLEANING</strong></font>

  <font face="Times">PRINCIPLES</font>

  这些源码总共占了117个字符。显然,这是一种很拙劣的HTML编码,但在使用“所见即所得”的软件下编辑的网页有时候就会出现这样的情形。我们将上述冗余代码清理,并使用代码内嵌之后,上述代码可精简为:

  <font face="times>HTML CODE<b>CLEANING</b>PRINCIPLES</font>

  总共只有57个字节。

  这就是清除代码的第二个原则:尽可能使用代码嵌套。

  需要注意的是:WYSIWYG――所见即所得的编辑软件往往会在更新代码的时候通过一层又一层的嵌套代码来实现。所以如果是使用象FrontPage或Dreamweaver这样的WYSIWYG网页编辑软件所生成的网页,就需要我们对那些嵌套的冗余代码进行清除。

  使用HTML标签还存在着一个大问题,那就是一旦格式发生改变,就需要重复该标签编码。 幸而CSS的出现改变了这一点:我们可以一次性将CSS样式表设置好,然后只需在网页中调用即可。

  譬如,现在网页上有六个段落的内容,并且这六段内容交替使用两种不同格式。例如标题用蓝色加粗的4号Arial字体,段落文字用黑色2号Times字体,在这种情况下,倘若用HTML标签来实现的话,其代码如下:

  <font face="Arial" color="blue" size="4"><b>Heading1</b></font>

  <font face="Times color="black" size="2"> Paragraph1</font>

  <font face="Arial" color="blue" size="4"><b>Heading2</b></font>

  <font face="Times color="black" size="2">Paragraph2</font>

  ……

  对于每个标题和段落内容,都需要重复编写格式代码,这样下来源码中将会产生很多HTML代码。倘若我们利用CSS来实现格式的切换,则CSS样式表代码只需在<HEAD>区中定义一次,在<BODY>正文中调用即可。形如:

  <head>

  <style type="text/css">

  <!--

  .style1 {

  font-family: Arial, Helvetica, sans-serif;

  font-weight: bold;

  font-size: 24px;

  }

  .style2 {

  font-family: "Times New Roman", Times, serif;

  font-size: 12px;

  }

  -->

  </style>

  </head>

  <body>

  <p class="style1">Heading1</p>

  <p class="style2">Paragraph1</p>

  <p class="style1">Heading2</p>

  <p class="style2">Paragraph2</p>

  <p class="style1">Heading3</p>

  <p class="style2">Paragraph3</p>

  … …

  </body>

  请注意:CSS样式表是在头区中创建,并在网页主体<BODY>中得以应用。倘若想要为网页添加更多格式,则只需在CSS样式表中一次性定义好,就可在正文内容中随意任意设置好的格式。这也就是清除多余的HTML代码的第三大原则――尽可能对字体使用CSS样式表。CSS的优点很多,例如网页布局整齐一致、功能强大而灵活、可单独作为一个文件存放,从而大大降低网页的大小。除此之外,CSS样式表还具备网站格式更新方便,只需更新CSS样式表文件的格式,就可以实现对整个网页的格式更新的优点。

  综上所述,只需简单将HTML代码进行冗余清除和精简,就可以降低网页的大小,加快网页的下载速度,提高网页的效率。

Posted @2007-11-27 17:16:06  阅读(451)  评论(0)  
最新更新
  • 搜索引擎技术大公开:搜索引擎是如何找到你的?
  • 网站内容必知的发布法则
  • 网站优化实战:教你如何优化页面
  • SEO优化中超重要的网页标头大剖析
  • 谷歌3月推出新搜索技术——内搜索

  • 最新评论
    昵称验证码
    <内容请勿超出2000个字,快捷键:Ctrl+Enter>
    公司名片
    广州市时代财富科技公司
    所属行业:互联网
    联系电话:020-85538280
    传真号码:020-85520605
    地址:广东省广州市天河软件园
    公司网址http://www.fortuneage.com
    电子邮件web@fortuneage.com
    经营范围:网络顾问咨询服务和网络应用实施服务,内容涉及企业信息化顾问、政府信息化顾问、网络应用方案咨询策划、网站策划建设、Web2.0平台建设、互联网及电信增值服务等...
    日期控件
    文章搜索
    聚合索引
     copyright@广州市时代财富科技公司