1.总是使用结束标签
以前,经常见到类似下面的代码
LI的结束标签被忽略掉了,按照今天的标准,这是一种很不好的实践,所以应该总是避免这样做。应该总是使用结束标签,否则你可能会遇到验证问题。
更好的方式
2.声明正确的文档类型(DOC type)
DOCTYPE出现在html标签之前,文档的顶部,它告诉浏览器该页面包含HTML、XHTML或者两者的混合,以便浏览器能够正确的解释标签。
在创建新的网站时我们从4个不同的doctype中选择一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
关于选择哪一个是正确的存在很大的争论,一种观点是使用XHML strict是最佳实践。但是,通过一些研究发现,大多浏览器在解释时把它们恢复成HTML,所以,你可能会选择HTML 4.01 Strict。
3.永远不要使用内嵌样式(inline styles)
在编写页面时,有时你可能写出如下的代码
当然,这样做看起来没任何问题,但是他违反了下面的编码实践:
“当创建标签时,甚至不用考虑样式,当页面编码完成时再添加样式。”
所以,先写完标签,然后再从外部样式表中引用标签
4.把所有的外部样式表文件放置在Head标签内
从技术上来说,你可以把外部样式表放置在任何你想放置的位置上,但是HTML规范推荐把他们放置在Head标签内,主要的好处是你的页面看起来加载的更快。
5.考虑把JavaScript文件放置在页面底部
请记住 --- 主要目标是让页面的加载尽可能的快,当加载脚本时,直到脚本加载完成浏览器才能继续做其他的事情,因此,用户将需要更长时间的等待。
如果你的JS文件的目的只是为了增加功能 --- 例如,为按钮的点击增加事件处理,请把这些文件放在页面底部,body的结束标签之前,这显然是一个最佳实践。
好的做法
6.永远不要使用内嵌的Javascript
直接把JS代码嵌入到标签中在以前是很常见的,例如把onclick事件直接嵌入到标签中,事件的处理函数在外部JS文件中。但是,这是一种很不好的实践,永远不要把JS嵌入到标签中,而是放到外部JS文件中,使用addEventListener/attachEvent添加事件处理函数。如果使用jQuery的话,直接使用click方法。
7.持续验证
经常验证你的HTML和CSS是否符合规范,可以使用W3C的验证工具。
8.下载firebug
如果你使用firefox浏览器,一定要下载firebug插件,该插件可以使你方便的调试JS代码,而且它还提供了很多其他有用的东西。
9.使用firebug
很多人只用到了firebug20%左右的功能,花一些时间学习firebug的使用可以使你事半功倍,可以参考firebug官方网站。
10.标签名称使用小写形式
从技术上来说,你可以使用使用标签名称的大写形式
但是请不要这样做,因为这样会使代码看起来不舒服,坚持使用小写形式。
更好的方式:
11.使用H1 - H6标签
为了提高搜索引擎查找你的网站的几率,请在页面中使用H1-H6标签
12.如果创建Blog网站,在文章标题中使用H1标签
同样是搜索引擎的缘故。
13.下载ySlow
雅虎的ySlow可以分析你的网站运行缓慢的原因并给出合适的建议,尽管有时候它的规则过于严格,但是对于优化网站还是很有用处的。
14.用Unordered List包裹导航菜单
每个网站都有某种类型的导航,你当然可以以下面的方式定义它
但是不鼓励采用这种方法,而应该采用更好的方式,如下
15.学习怎样处理IE浏览器
IE浏览器在CSS、JS兼容性方面确实存在很多问题,那么对于CSS文件怎么处理IE的问题呢?
首先,在你完成了主要的CSS编码后,建立一个独立的CSS文件ie.css,如果用户使用的是IE浏览器,就在其中引用该文件。
16.选择一个好用的代码编辑器
选择一个好的代码编辑器可以极大的提高你的编码效率,并且能够减少出错的几率,一下是一些比较好的代码编辑器
InTypeE-Text EditorNotepad++AptanaDreamweaver CS4
17.网站开发完成后,压缩它
通过压缩CSS和JavaScript文件,你可以显著的减小每个文件的大小,从而可以节约一部分带宽,并能加快网站的加载速度。你可以使用在线压缩工具,下面是其中的一些:
JavaScript压缩服务
JavaScript Compressor JS Compressor
CSS压缩服务
CSS Optimiser CSS Compressor
18.裁剪、裁剪、裁剪
当你写完标签后,请检查是否可以减少页面中的元素个数,把没必要使用的元素删除掉。
19.所有的图片标签img都需要alt属性
很容易忽略掉img标签的alt属性,但是为了可访问性和验证的缘故,请在你的img标签中加上alt属性。
不好的例子
好的例子
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.不要使用框架
对于初学者,最好不要使用框架。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery