1.总是使用结束标签
以前，经常见到类似下面的代码
<li>Some text here.
<li>Some new text here.
<li>You get the idea. LI的结束标签被忽略掉了，按照今天的标准，这是一种很不好的实践，所以应该总是避免这样做。应该总是使用结束标签，否则你可能会遇到验证问题。
更好的方式
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
2.声明正确的文档类型(DOC type)
DOCTYPE出现在html标签之前，文档的顶部，它告诉浏览器该页面包含HTML、XHTML或者两者的混合，以便浏览器能够正确的解释标签。
在创建新的网站时我们从4个不同的doctype中选择一个
<!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">
关于选择哪一个是正确的存在很大的争论，一种观点是使用XHML strict是最佳实践。但是，通过一些研究发现，大多浏览器在解释时把它们恢复成HTML，所以，你可能会选择HTML 4.01 Strict。
3.永远不要使用内嵌样式（inline styles）
在编写页面时，有时你可能写出如下的代码
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take
notice! </p>当然，这样做看起来没任何问题，但是他违反了下面的编码实践：
“当创建标签时，甚至不用考虑样式，当页面编码完成时再添加样式。”
所以，先写完标签，然后再从外部样式表中引用标签
#someElement > p {
color: red;
}
4.把所有的外部样式表文件放置在Head标签内
从技术上来说，你可以把外部样式表放置在任何你想放置的位置上，但是HTML规范推荐把他们放置在Head标签内，主要的好处是你的页面看起来加载的更快。
5.考虑把JavaScript文件放置在页面底部
请记住 --- 主要目标是让页面的加载尽可能的快，当加载脚本时，直到脚本加载完成浏览器才能继续做其他的事情，因此，用户将需要更长时间的等待。
如果你的JS文件的目的只是为了增加功能 --- 例如，为按钮的点击增加事件处理，请把这些文件放在页面底部，body的结束标签之前，这显然是一个最佳实践。
好的做法
<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html> 6.永远不要使用内嵌的Javascript
直接把JS代码嵌入到标签中在以前是很常见的，例如把onclick事件直接嵌入到标签中，事件的处理函数在外部JS文件中。但是，这是一种很不好的实践，永远不要把JS嵌入到标签中，而是放到外部JS文件中，使用addEventListener/attachEvent添加事件处理函数。如果使用jQuery的话，直接使用click方法。
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
}); 7.持续验证
经常验证你的HTML和CSS是否符合规范，可以使用W3C的验证工具。
8.下载firebug
如果你使用firefox浏览器，一定要下载firebug插件，该插件可以使你方便的调试JS代码，而且它还提供了很多其他有用的东西。
9.使用firebug
很多人只用到了firebug20%左右的功能，花一些时间学习firebug的使用可以使你事半功倍，可以参考firebug官方网站。
10.标签名称使用小写形式
从技术上来说，你可以使用使用标签名称的大写形式
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV> 但是请不要这样做，因为这样会使代码看起来不舒服，坚持使用小写形式。
更好的方式：
<div>
<p>Here's an interesting fact about corn. </p>
</div> 11.使用H1 - H6标签
为了提高搜索引擎查找你的网站的几率，请在页面中使用H1-H6标签
12.如果创建Blog网站，在文章标题中使用H1标签
同样是搜索引擎的缘故。
13.下载ySlow
雅虎的ySlow可以分析你的网站运行缓慢的原因并给出合适的建议，尽管有时候它的规则过于严格，但是对于优化网站还是很有用处的。
14.用Unordered List包裹导航菜单
每个网站都有某种类型的导航，你当然可以以下面的方式定义它
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div> 但是不鼓励采用这种方法，而应该采用更好的方式，如下
view plaincopy to clipboardprint?
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul> 15.学习怎样处理IE浏览器
IE浏览器在CSS、JS兼容性方面确实存在很多问题，那么对于CSS文件怎么处理IE的问题呢？
首先，在你完成了主要的CSS编码后，建立一个独立的CSS文件ie.css，如果用户使用的是IE浏览器，就在其中引用该文件。
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
16.选择一个好用的代码编辑器
选择一个好的代码编辑器可以极大的提高你的编码效率，并且能够减少出错的几率，一下是一些比较好的代码编辑器
- InType
- E-Text Editor
- Notepad++
- Aptana
- Dreamweaver CS4
17.网站开发完成后，压缩它
通过压缩CSS和JavaScript文件，你可以显著的减小每个文件的大小，从而可以节约一部分带宽，并能加快网站的加载速度。你可以使用在线压缩工具，下面是其中的一些：
JavaScript压缩服务
CSS压缩服务
18.裁剪、裁剪、裁剪
当你写完标签后，请检查是否可以减少页面中的元素个数，把没必要使用的元素删除掉。
19.所有的图片标签img都需要alt属性
很容易忽略掉img标签的alt属性，但是为了可访问性和验证的缘故，请在你的img标签中加上alt属性。
不好的例子
<IMG SRC="cornImage.jpg" /> 好的例子
<img src="cornImage.jpg" alt="A corn field I visited." /> 20.熬到很晚
作为程序员，熬夜是经常的事，很多时候一些灵感正是从熬夜中得到的，如果你还没有体验过熬到很晚的滋味，just do it。
21.查看源文件
怎么样学习别人好的网站编码和设计，查看页面源代码吧。
22.给所有的元素增加样式
设计客户端应用程序时，给所有的元素增加样式很重要，否则的话你的程序在浏览器端的表现可能不一致。
23.使用Twitter
24.学习Photoshop
对于搞网站设计的人来说，Photoshop的重要性不言而喻，如果你学会了HTML和CSS，那么多学习PS吧。
25.学习每一个HTML标签
有很多HTML标签你在平时没有遇到，但这并不意味着你不需要学习他们，每个标签都有它适合的场合，通过HTML规范手册学习每个标签的用法。
26.参与社区
交流是很好的学习方式。
27.使用CSS重新设置样式
为页面中的每个元素重新设置样式。
28.安排页面元素的位置
把页面中的元素安排到合适的位置，采用很好的对齐方式等。
29.把PS文件转化成网站设计
30.不要使用框架
对于初学者，最好不要使用框架。
扫一扫
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
