HTML 代码优化技巧

<-- 说明: 这里所提的技巧主要是减少文件的大小,一定程度上也确实会提高
          浏览器处理页面的速度,  有些不符合标准的写法,比如option的简写
         过于取巧,因此没有收录 -->

1.  尽量不使用Word编写HTML页面

2.  Dreamweaver可以自动优化HTML代码,当然效果不会是尽善尽美的

3.  去除可有可无的内容,这包括:
    .a  删除多余空格
    .b  删除空语句(比如<b></b>
    .c  删除对默认属性的赋值(align=left,valign=middle,size=3,target=_self)
    .d  不过分使用缩进

4.  使用自建的属性作为注释:
    浏览器不会处理非标准的属性,因此可以利用这一点加上注释
    比如<td><!-- this is comment -->可以被替换成:
        <td tip=this is comment>  不会有任何问题

5.  用一个<basefont>代替<font>语句  

6.  用<ul>代替<li>比如:
    <ul type=square>
    <li>目录1
    <li>目录2
    ...
    </ul>

7.  用<br>语句使小字号文字的行距恢复正常
    在一段文字的后面,添加一个<br>语句,即可使最后两行之间的行距恢复正常

8.  用短语句替换网页效果相同的长语句
    <b> -->  <strong>
    <i> -->  <cite>
    <s> -->  <strike>
    <ul>-->  <blockquote>

9.  color属性建议使用英文单词,特殊字符建议采用英文单词编码 

10. 同时使用高,低分辨率图像:
    <img src=highres.gif lowsrc=lowres.gif> (netscape)
    使用分割图像技术,使得浏览器逐块显式图像

11. 保存GIF图像时使用Interlaced模式,使得图像一条一条显式

12. 将一个大表格拆分成多个小表格,可以依次显式大表格的一部分,避免浏览器
    要等待所有表格数据下载完才显式

13. 有时可以使用<p>和<pre>代替表格对齐   
    如:
    <pre>
    Name:    <input type=text size=20>
    Email:   <input type=text size=20>
    ...
    </pre>

14. 优先使用100%宽度的表格,加速浏览器显式

15. 将align=center/right属性,valign=bottom/top属性放入<tr>语句中

16. 几个有用的header属性:
    <meta name=description content="blah,blah">
    <meta name=keywords content="XX,YY,ZZ">
    <meta name=robots content"index,follow">

17. 用<base>将绝对网址转换为相对网址,可以放在header中,对所有链接有效

18. 用history.back()加快网页后退速度

19. 不要让访问者知道js代码发生错误
    <script>
    window.onError=hide_error_message;
    function hide_error_message(){return ture;}
    </script>

20. 用css将汉字的大小固定:
    <font face=宋体 color=red style=font-size:12pt>...</font>
    或者:
    <style type=text/css>
    font{font-size:12pt}
    </style>
    <font face=宋体 color=red>...</font>
    较大的汉字建议使用12pt,较小的使用9pt

21. 将一组相同属性的css语句合并成一条,如：
    <style type=text/css>
    a {font-size:12pt}
    body {font-size:12pt}
    ...
    td {font-size:12pt}
    textarea{font-size:12pt}
    </style>
    可以替换成:
    <style type=text/css>
    a,body,...,td,textarea {font-size:12pt}
    </style>

22. 尽量采用css语句的简化写法
    根据css的语言规则，可以使用一概新的font属性，将原来多个属性的内容作为
    新的font属性的内容。每项之间用一概和多个空格分开，比如：
    <style type=text/css>
    p {font-syle:italic;
       font-weight:bold;
       font-size:100pt;
       font-family:arial}
    </style>
    可以用以下写法代替:
    <style type=text/css>
    p {font:italic bold 100pt arial}
    </style>
    关键是属性的顺序不能搞错。
    还有8个支持这种写法的属性是:
    background,border,border-bottom,border-left,border-right,border-top,list-style,outline
   
23. 将email地址转换成16进制编码，防止某些程序的恶意检索
    .a 将<a href=mailto:XXX@YYY>ZZZ</a>加入document.write("<a href=mailto:XXX.....");
    .b 将这条语句转换成16进制编码
    .c 把这组编码放入unescape和eval函数中,即:
       <script language=javascript>
       eval(unescape("MY ENCODED STRING"))
       </script>

<ChangLog>

2004.9.18        Initial Version Released