设为首页收藏本站

LUPA开源社区

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

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

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

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

24.掌握Photoshop

 

Photoshop是前端工程师的一个重要工具,如果你已经熟练掌握HTML和CSS,那不妨多学习一下Photshop。

  1. 观看Psdtuts+上的视频课程
  2. 花费每月25$注册成为Lynda.com的会员,海量精品课程。
  3. 推荐“You Suck at Photoshop”系列
  4. 花费几个小时记住尽可能多的PS快捷键。

25.学习每一个HTML标签

虽然有些HTML标签很少用到,但你依然应该了解他们。比如“abbr”、“cite”等,你必须学习它们以备不时之需。

顺便说下,如果你不熟悉上面两个标签,可以看下下面的解释:

  • abbr 和你估计的差不多,它是abbreviation的缩写(英语差的估计不到),“Blvd”能用<abbr>标签包裹,因为他是“boulevard”的缩写。(喜大普奔也可以喽)。
  • cite 被用来作为引用内容的标题(blockquote)。例如,如果你在你的博客中引用本篇文章,你可以将“给HTML初学者的三十条最佳实践”用<cite>包裹,注意它不应该被用来包裹引用的作者,这是常见的误区。

26.参与社区讨论

网络上有许许多多优秀的资源,而社区中也隐藏着许多高手,这里你既可以自学,也能请教经验丰富的开发者。

27.使用reset.css

Css Reset也就Reset Css ,就是重置一些HTML标签样式,或者说默认的样式。

关于是否应该使用CSS Reset,网上也有激烈的争论,笔者是建议使用的。你可以先选用一些成熟的CSS Reset,然后慢慢演变成适合自己的。

复制代码
html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
small, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baselinebaseline;  
    background: transparent;  
}  
body {  
    line-height: 1;  
}  
ol, ul {  
    list-style: none;  
}  
blockquote, q {  
    quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
    content: '';  
    content: none;  
}  
  
table {  
    border-collapse: collapse;  
    border-spacing: 0;  
}
复制代码

28.对齐元素

简单来说,你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站,它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。

29.关于PSD切片

现在你已经掌握了HTML、CSS、Photoshop知识,那么你还需要学习如何把PSD转换为网页上的图片和背景,下面有两个不错的教程:

30.不要随意使用框架

Javascript和CSS都有许多优秀的框架,但如果你是初学者,不要急于使用它们。如果你还没能熟练的驾驭CSS,使用框架会混淆你的知识体系。尽管你可能能会说javascript和jQuery是可以同事学习的,但这对css并不适合。我个人提倡960 CSS 网格框架,并且我经常使用它。还是那句话,如果你是css的初学者,学习框架只会让你更加困惑。

CSS框架是为熟练开发者设计的,这样会节省它们大量的时间。

译者注

这篇文章发表于2009年,弹指一挥间,4年时间已悄然溜走,文中有些知识已显得陈旧过时,但很多规则同样适用,下面是译者补充的关于已经过时的建议,如果你觉得哪里需要改进可以参与讨论。

#1

html5标准放宽了要求,允许标签不闭合,而且浏览器也能很好的修正这个问题,但这并不是你不闭合标签的理由,有时不闭合标签可能带来无法预知的错误。放宽标准其实是降低了开发的门槛,这本是web的真谛,人人可参与,其实xhtml规范要求页面有错误就停止渲染,这本身并不现实,而且浏览器也从来没有这么做过,毕竟用户宁愿看到有些错误的页面,也不愿看到白板一张。

#8

跨浏览器的firebug正在开发当中,然而发布之日却遥遥无期,chrome,safari,ie和opera都有自己的开发者工具,而且功能也不错,这里推荐chrome的开发者工具,大有后来者居上之风,其发展可谓一日千里,相信超越firebug指日可待。

#9

#16

#20

我以前也曾这样,确实学到不少知识,但自从看了曲黎敏副教授讲解的《黄帝内经》后,就不这样了,我也不建议你这样,11点是睡觉的最晚时间了

#23

英文原文标题为“使用twitter ”,这个在中国应该是微博么!!!

#25

address标签也容易被误用,你不见得知道哦!

#27

上面给出的代码可能已经更新,下面有地址,建议用normalize.css而非rerset.css

#30

现在bootstrap或来着居上,本人提倡这个框架,发展很猛,当然还有好多框架都很不错哦。

#31

本文为翻译文章原吻文 "30 html best practices for beginner",本文为本人整理,原译文在此 译文,在原译文基础上有所改动。

本系列文章有三篇,令两篇如下:


酷毙

雷人

鲜花

鸡蛋

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

最新评论

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

返回顶部