垃圾代码的清理

垃圾代码的清理
从上面的几个例子中，我们可以看到网页制作软件产生的常见垃圾代码包括：空格、默认属性、注释语句及空语句等。
（1）空格
空格字符是网页中最常见的垃圾代码。但此处讨论的空格字符并非HTML语言中的“ ”标签，而是指在代码编缉环境下敲击键盘上的空格键所产生的符号。网页中每个空格都相当于一个字符，因此，空格字符也会占用巨大的空间。初步统计，空格字符约占页面总体积的1.5%。也就是说，一个100K的页面中，其中1.5K是空格字符。
空格字符通常会出现在每行代码的开始、结束处，还有就是空行中，如下图 5-1所示。
1. 每行代码开始前的空格字符：是网页制作软件生成代码时，默认产生的缩进字符，如下图 5-1的（A）部分所示。
2. 每行代码结束处的空格字符：是我们在编缉HTML代码时，不小心加上的。只要我们在每行代码的结束位置向右移动光标，如果光标不换行，则说明该行后面还存在空格字符，如下图 5-1中（C）部分所示。
3. 空白行：我们在编写代码时，常利用空行或者注释对不同功能模块进行分隔，这样就产生了空白行。
清理空格字符
对于页面中不同位置上的空格字符，清理的方式也有所不同，下面向大家介绍几种常用的空格字符清理方法：
1） 每行代码开始前的空格字符
对于每行代码开始前的空格字符，我们可以使用Dreamweaver 或者EditPlus等软件进行清理。具体操作步骤如下：
1． 转至HTML代码编缉模式（如果是Dreamweaver）；
2． “Ctrl + A” 选择全部代码；
3． 使用组合键“Shift + Tab”，直至删除所有空格为止。
如下“代码1”是清理空格字符前的效果，而“代码2”中则是清理空格字符后的效果。
代码1：
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
代码2：
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
2） 空行
对于空行中空格字符的清理，我们只能手工逐行去掉示。
1． 首先，使用鼠标选择空行；
2． 再按“Delete”键，即可删除空行。
3）每行代码结尾处的空格字符
对于每行代码结束处的空格字符，我们可以使用Editplus或者其他文本编缉软件的替换功能进行清理：
1． 用鼠标选择“>”+“一个空格字符”，即“> ”；
2． 再按“Ctrl + F”，就会弹出窗口；
3． “替换”处填上“>”，再点击“替换全部”即可。
页面经过清理空格字符后，大概可以删除70%左右的垃圾代码。也就是说，空格字符的代码量大概占总垃圾代码的70%，还有30%左右的垃圾代码分布在默认属性值、注释语句及空语句中。
（2）默认属性
在利用网页制作软件制作网页时，通常会产生一些默认属性的代码。例如：我们在HTML代码中不添加左对齐属性，页面中的内容也是以左对齐的方式显示。所以，代码中的左对齐属性是可以删除的。
在页面中，还有很多其他属性都是默认属性。常见的包括：
1. align=“left”：横向居左对齐属性值，默认情况下文字或者图片都是横向居左对齐的。
2. valign=“middle”：竖向居中对齐属性值，默认情况下文字或者图片都是竖向居中对齐的。
3. size=“3”：文字大小属性值，默认情况下是3号字体。
4. target=“_self”：新页面打开属性值，默认情况下是在当前窗口中打开。
5. Font=“#000000”：文字颜色属性值，默认情况下网页中文本的字体颜色是黑色。
6. Bgcolor=“#FFFFFF”：背景颜色属性值，默认情况下网页的背景颜色是白色。


利用Dreamweaver的替换功能，可以完成对默认属性代码的替换。在“查找”中填上要替换的默认属性代码，“替换”处留空白，还可以在“查找范围”上选择替换范围；然后，点击“替换全部”就可以删除“查找范围”内所有指定的默认属性代码，如下图 5-4所示。
 
图 5-4 Dreamweaver替换功能
（3）注释语句
注释语句是用于对代码功能或作用进行说明的语句，注释语句里的内容对于普通用户来说是不可见的。即普通用户在页面中是看不到HTML代码中注释标签里的内容。
在制作网页的时候，我们或多或少会添加注释语句以增强代码的可读性。但是，过多的注释语句会占用大量的存储空间。不仅如此，如果在注释标签里添加大量的关键字，还会被搜索引擎认为是堆砌关键字，从而对网站进行惩罚（详细请参考11.2一节）。
所以，在添加注释语句时，我们要坚守一个原则：“绝不添加那些即使删除后也不会影响网页源代码可读性的注释语句。”例如：以下代码中的注释内容就是完全可以省略的：
<table width="100%"  border="0" cellspacing="0" cellpadding="0"><!--表格开始标签-->
  <tr><!--行开始标签-->
    <td>&nbsp;</td>
  </tr><!--行结束标签-->
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table><!--表格结束标签-->
（4）空语句
垃圾代码清理的最后一步就是删除代码中的空语句。简单地说，空语句就是指标签间不存在任何内容的语句。例如：“<b></b>”就是一个典型的空语句。
空语句的清理主要是针对那部分即使删除后也不会影响页面正常显示的标签，如：<b></b>，<font></font>，<h1></h1>等。但有一部标签是不能删除的（如：<tr>、<td>或者<p>），否则页面将会出现错乱。
我们可以使用网页制作软件提供的特定功能对代码中的空语句进行清理，例如：Dreamweaver的“清理HTML/XHTML”功能就可以快速清理页面中的空语句，。
1． 点击菜单栏中的“命令”；
2． 选择“清理HTML”；
3． 根据需要选择相应的选项，然后按“确定”即可。

手工编写HTML代码是搜索引擎优化从业者必须具备的基本技能。如果读者已经具备手工编写HTML代码的能力，就应该优先采用手工编写代码的方式制作网页。
而对于HTML语言不熟悉的读者，也可以在网页制作完成后再对垃圾代码进行清理。随着网页制作工具不断的改进，以前很多需要手工清理的工作，现在都可以用特定的软件代替。例如：Dreamweaver或者 Advanced HTML Optimizer。

Advanced HTML Optimizer 是常用的垃圾代码清理工具，使用这款工具不但可以删除代码里多余的标签，还能把长标签转换为短标签。但是，这个工具会把所有的换行删除，严重影响代码的可读性。