热门关键字:
jquery > jquery教程 > jquery教程 > HTML初学者的30个最佳实践

HTML初学者的30个最佳实践

282
作者:管理员
发布时间:2021/2/3 18:13:23
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3807
  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
友荐云推荐