设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客

给HTML初学者的三十条最佳实践

2013-12-25 16:00| 发布者: 红黑魂| 查看: 7055| 评论: 0|原作者: 颜海镜|来自: 博客园

摘要: Nettuts +运营最困难的方面是为很多技能水平不同的用户提供服务。如果我们发布太多高级教程,我的新手用户将无法从中受益。相反也是如此。我们尽我们最大的努力,但如果你觉得你被忽略了请联系我们。这个网站是为你 ...

13.下载ySlow

 

在过去几年里,雅虎的团队在前端开发领域做了许多伟大的工作。前不久,它们发布了一个叫ySlow的Firebug扩展,它会分析你的网页,并返回 一个“成绩单”,上面细致分析了这个网页的方方面面,提出需要改进的地方,虽然它有点苛刻,但它绝对会对你有所帮助,强烈推荐—— ySlow!

 

14.使用无序列表(UL)包裹导航菜单

 

通常网站都会有导航菜单,你可以用这样的方式定义:

<div id="nav">  
 <a href="#">Home </a>  
  <a href="#">About </a>  
  <a href="#">Contact </a>  
</div>

如果你想书写优美的代码,那最好不要用这种方式。

为什么要用UL布局导航菜单? ——因为UL生来就是为定义列表准备的

最好这样定义:

<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样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效:

<!--[if lt IE 7]>  
   <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />  
<![endif]-->  

这些代码的意思是:如果用户浏览器是IE6及以下,那这段代码才会生效。如果你想把IE7也包含进来,那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16.选择合适的IDE

 

不论你是Windows还是Mac用户,这里都有很多优秀的编辑器供你选择:

Mac 用户

PC 用户

17.上线前,压缩代码

 

通过压缩您的CSS和Javascript文件,您可以减少总大小的25%左右,但在开发过程中不必压缩,然而,一旦网站完成后,利用一些网络压缩程序或多或少节省一些带宽。下面列出一些工具。

Javascript 压缩服务

CSS Compression Services

18.精简,精简,在精简

回望我们大多数人写的第一个页面,一定会发现严重的 “DIV癖”( divitis ),通常初学者的本能就是把一个段落用DIV包起来,然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

网页写完后,一定要多次回头检查,尽量的减少元素的数量。 能用UL布局的列表就不要用一个个的DIV去布局。

正如写文章的关键是“缩减,缩减,缩减”一样,写页面也要遵循这个标准。

19.给所有图片加上“alt”属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息,并且对图像搜索引擎友好。

糟糕的做法

<IMG SRC="cornImage.jpg" />  

更好的做法

<img src="cornImage.jpg" alt="A corn field I visited." />  

20.通宵达旦

我经常不知不觉的学习工作到凌晨,我认为这是个很好的状况。

我的“啊~哈!”时间( “AH-HA” moments,指柳暗花明或豁然开朗的时刻)通常都发生在深夜,比如我彻底理解JavaScript的“闭包”概念,就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻,那就马上试试吧!

21.查看源代码

 

没有什么比模仿你的偶像能让你更快的学习HTML。起初,我们都要甘做复印机,然后慢慢得发展自己的风格。研究你喜欢的网站页面代码,看看他们是怎么实现的。这是高手的必经之路,你一定要试一下。注意:只是学习和模仿他们的编码风格,而不是抄袭和照搬!

留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中head标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。

22.为所有的元素定义样式

这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记?那用户可能会用,你自己不使用OL?用户也可能会。花时间做一个页面,显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式,检查一下是否有遗漏。

23.使用第三方服务

现在互联网上流行着许多可以免费加在网页中的API,这些工具非常强大。它可以帮你实现许多巧妙的功能,更重要的是可以帮你宣传网站。




酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部