一直以来,我都不太愿意写这样的话题。总觉得这样的文章有点不实际。今天看到NetPlus+写的这篇Blog觉得很以为然，所以还是翻译一下吧。当然，这个所谓翻译，不是原封不动的，原文可以猛击这个链接去参观。
1. 记得闭合你的html标签
在早些时候,常可以看到这样的代码：
[code lang=”html”]<li>这是一行文字
<li>这还是一行文字
<li>好吧，这难道不是一行文字吗?[/code]
不瞒您说，当时我也是这么写的，总觉得这样的代码写出来不影响实际显示效果，而且可以少些几个字…
现在html代码的检验越来越严格了，如果你不想遇到检验或者其他的小问题的话，还是采用标准的写法吧。标准的写法，当然要包括UL和LI并且闭合才行：
[html]
<ul>
<li>这是一行文字</li>
<li>这还是一行文字</li>
<li>好吧，这难道不是一行文字吗?</li>
</ul>
[/html]
2.正确地声明你的文件种类(DocType)
一般来说。Doctype出现在html标签开始之前，也就是一个页面的最顶端。浏览器最开始读到这段代码，正确的doctype可以告诉浏览器这个页面中到底包含了什么样子格式的代码。
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[/html]
上面标出的是最常见的4种声明。一直有争论说到底用哪种声明比较好，有一种观点说用xhtml-strict的，可是我发现大多数人用的或许还是html 4.01 strict, 也就是上面第一条。不管怎么样，最重要的是要记得声明 :-)
3.不要使用内联样式
[html]<p style="color: red;">这是红色的字</p>[/html]
我也不清楚为什么，这点看上去似乎没什么问题。不过，大牛们说，人应该在同一个时候专心地处理一个问题，不要在编写页面代码的同时去考虑页面样式的问题。一切样式的问题等到页面代码结束了之后再说吧。
看来，这是代码习惯的问题?
建议是把这些东西放到专门的css文件中去
[css]
#element > p{
color: red;
}
[/css]
4.将所有的外部css文件放在head标签以内
虽然CSS文件可以放在页面的任何地方，这条建议的出发点是为了可以让页面载入速度变快些。
[html]
<head>
<title>页面标题</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>
[/html]
5.把Javascript脚本放在页面的底部
这个还是出于加快页面载入速度的考虑。当浏览器读到脚本的时候，它没法再继续加载页面，所以把脚本放在底部可以保证整个页面的主要内容首先被显示出来。
[html] <p>页面内容在这里. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html> [/html]
6.不要用内联的Javascript脚本，现在不是1996年了！
想当年（用上这个词的感觉真好）似乎大家尤其喜欢用内联的Javascript脚本。不过现在我们不这么做了，我们把Javascript脚本放在单独的文件里，然后用addEventListener/attachEvent来监听事件。
或者，还可以用jQuery这样的框架来实现
[js]
$(‘a#moreCornInfoLink’).click(function() {
alert(‘Want to learn more about corn?’);
});
[/js]
7.经常性地检验
如果你用的是Firefox，那么建议你使用Web Developer Toolbar这个插件。它可以帮你做检验HTML的工作，当然还有CSS和Javascript.
8.下载Firebug
用Firefox的很多html开发者都是冲着这个插件的吧。如果你还没有用过这个插件，那么建议你赶快下载一个吧。
9.使用Firebug！
这条有点凑数哦！不过，作者说很多人只发挥了Firebug 20%的优势。哈，那么还等什么，赶快用一下吧，20%就这么厉害了。
资料：
10.记得小些你的html tag
这一点，我有时没法很好的遵守，原因竟然还是懒。。。
因为在中文和英文切换时，有时按一下大写键比较顺手 :-)
于是就有这么难看的代码了
[html]
<DIV>
<P>这是内容</P>
</DIV>
[/html]
这其实也是一种变成习惯问题 :-) 英语人士在阅读这些代码的时候估计会很累? 所以一下的代码是值得推荐的
[html]
<div>
<p>这是内容</p>
</div>
[/html]
实在素受不鸟你写这样的东西啊~~~
=.= 错别字啊…不过firebug 我也没怎么用好它
对我来说 可惜这款插件了.
不错，不错….
[…] 双陳兩曲—-书键录恩仇 « HTML初学者30条必掌握内容(1) […]