<-- 说明: 这里所提的技巧主要是减少文件的大小,一定程度上也确实会提高
浏览器处理页面的速度, 有些不符合标准的写法,比如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