Nettuts +运营最困难的方面是为很多技能水平不同的用户提供服务。如果我们发布太多高级教程,我的新手用户将无法从中受益。相反也是如此。我们尽我们最大的努力,但如果你觉得你被忽略了请联系我们。这个网站是为你服务的,所以说出来!如此说来,今天的教程是专为那些刚刚进入web开发领域的人准备的。如果你的经验是一年或更少,希望在这里列出的一些技巧将帮助你成为更好、更高效的开发者!
闲话少说,让我们回顾三十个创建标记的最佳实践。
1.保持标签闭合
以前,经常见到类似下面的代码(译注:这是多久以前啊……):
Some text here. Some new text here. You get the idea.
注意外面包裹的UL/OL标签被遗漏了(谁知是故意还是无意的),而且还忘记了关闭LI标签。按今天的标准来看,这是很明显的糟糕做法,应该100%避免。总之,保持闭合标签。否则,你验证html标签的时候可能遇到问题。
更好的方式
- Some text here.
- Some new text here.
- You get the idea.
2.声明正确的文档类型
笔者早先曾加入过许多CSS论坛,每当用户遇到问题,我们会建议他首先做两件事:
1.验证CSS文件,保证没有错误。
2.确认添加了正确的doctype
DOCTYPE 出现在HTML标签之前,它告诉浏览器这个页面包含的是HTML,XHTML,还是两者混合,这样浏览器才能正确解析。
通常有四种文档类型可供选择:
关于该使用什么样的文档类型声明,一直有不同的说法。通常认为使用最严格的声明是最佳选择,但研究表明,大部分浏览器会使用普通的方式解析这种声明,所以很多人选择使用HTML4.01标准。选择声明的底线是,它是不是真的适合你,所以你要综合考虑来选择适合你得项目的声明。
3.永远不要使用内联样式
当你在埋头写代码时,可能会经常顺手或偷懒的加上一点行内css代码,就像这样:
I'm going to make this text red so that it really stands out and makes people take notice!
这样看起来即方便又没有问题。然而,这在你的编码实践中是个错误。
在你写代码时,在内容结构完成之前最好不要加入样式代码。
这样的编码方式就像打游击,是一种很山寨的做法。——Chris Coyier
更好的做法是,完成标签部分后,再把这个P的样式定义在外部样式表文件里。
建议
#someElement > p { color: red; }
4.将所有外部css文件放入head标签内
理论上讲,你可以在任何位置引入CSS样式表,但HTML规范建议在网页的head标记中引入,这样可以加快页面的渲染速度。
雅虎的开发过程中,我们发现,在head标签中引入样式表,会加快网页加载速度,因为这样可以使页面逐步渲染。 —— ySlow团队
My Favorites Kinds of Corn
5.javascript文件放在底部
要记住一个原则,就是让页面以最快的速度呈现在用户面前。当加载一个脚本时,页面会暂停加载,直到脚本完全载入并执行完成。因此会浪费用户更多的时间。
如果你的JS文件只是要实现某些功能,(比如点击按钮事件),那就放心的在body底部引入它,这绝对是最佳的方法。
建议
And now you know my favorite kinds of corn.
6.永远不要使用内联javascript。现在不是1996年了!
许多年以前,还存在一种这样的方式,就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲,一个“onclick”事件是附加在 标签上的,其效果等同于一些JS代码。不需要讨论太多,非常不应该使用这样的方式,应该把代码转移到一个外部JS文件中,然后使用“ addEventListener / attachEvent ”加入事件监听器。或者使用jquery等框架,只需要使用“click”方法。
$('a#moreCornInfoLink').click(function() { alert('Want to learn more about corn?'); });
7.边开发,边验证
很多人并不真正理解标准验证的意义和价值,笔者在一篇博客中详细分析了这个问题。一句话,验证是为你服务的,不是给你找麻烦的。
如果你刚开始从事网页制作,那强烈建议你下载Web Developer Toolbar(chrome用户请自行在应用商店搜索,ie用户可能就杯具了) ,并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言,那么它会把你整的死去活来。你不严谨的代码会让你的页面漏洞百出,问题不断,一个好的方法就是—— 验证,验证,再验证。
8.下载firebug
Firebug是当之无愧的网页开发最佳插件,它不但可以调试JavaScript,还可以直观的让你了解页面标记的属性和位置。不用多说, 下载!
据笔者观察,大部分的使用者仅仅使用了Firebug 20%的功能,那真是太浪费了,你不妨花几个小时的时间来系统学习这个工具,相信会让你事半功倍。
资源
●Overview of Firebug
●Debug Javascript With Firebug – video tutorial
10.保持标签名小写
理论上讲,html不区分大小写,你可以随意书写,例如:
Here's an interesting fact about corn.
但最好不要这样写,费力气输入大些字母没有任何用处,并且会让代码很难看.
建议
Here's an interesting fact about corn.
11.使用H1-H6标签
笔者建议你在网页中使用其中全部六种标记,虽然大部分人只会用到前四个,但使用最多的H会有很多好处,比如设备友好、搜索引擎友好等,不妨把你的P标签都替换成H6。
This is a really important corn fact!
Small, but still significant corn fact goes here.
12.写博客时,请将H1留给文章标题
今天笔者在Twitter上发起一次讨论:是该把H1定义到LOGO上还是定义到文章标题上,有80%的人选择了后者。
当然具体如何使用要看你的需求,但我建议你在建立博客的时候,将文章题目定为H1,这对搜索引擎优化(seo)是非常有好处的。
13.下载ySlow
在过去几年里,雅虎的团队在前端开发领域做了许多伟大的工作。前不久,它们发布了一个叫ySlow的Firebug扩展,它会分析你的网页,并返回 一个“成绩单”,上面细致分析了这个网页的方方面面,提出需要改进的地方,虽然它有点苛刻,但它绝对会对你有所帮助,强烈推荐—— ySlow!
14.使用无序列表(UL)包裹导航菜单
通常网站都会有导航菜单,你可以用这样的方式定义:
如果你想书写优美的代码,那最好不要用这种方式。
为什么要用UL布局导航菜单? ——因为UL生来就是为定义列表准备的
最好这样定义:
15.学习如何应对IE
IE一直以来都是前端开发人员的噩梦!
如果你的CSS样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效:
这些代码的意思是:如果用户浏览器是IE6及以下,那这段代码才会生效。如果你想把IE7也包含进来,那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
16.选择合适的IDE
不论你是Windows还是Mac用户,这里都有很多优秀的编辑器供你选择:
Mac 用户
●Coda
●Espresso
●TextMate
●Aptana
●DreamWeaver CS4 PC 用户
●InType
●E-Text Editor
●Notepad++
●Aptana
●Dreamweaver CS4
17.上线前,压缩代码
通过压缩您的CSS和Javascript文件,您可以减少总大小的25%左右,但在开发过程中不必压缩,然而,一旦网站完成后,利用一些网络压缩程序或多或少节省一些带宽。下面列出一些工具。
Javascript 压缩服务
●Javascript Compressor
●JS Compressor
CSS Compression Services
●CSS Optimiser
●CSS Compressor
●Clean CSS
18.精简,精简,在精简
回望我们大多数人写的第一个页面,一定会发现严重的 “DIV癖”( divitis ),通常初学者的本能就是把一个段落用DIV包起来,然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。
网页写完后,一定要多次回头检查,尽量的减少元素的数量。 能用UL布局的列表就不要用一个个的DIV去布局。
正如写文章的关键是“缩减,缩减,缩减”一样,写页面也要遵循这个标准。
19.给所有图片加上“alt”属性
为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息,并且对图像搜索引擎友好。
糟糕的做法
更好的做法
20.通宵达旦
我经常不知不觉的学习工作到凌晨,我认为这是个很好的状况。
我的“啊~哈!”时间( “AH-HA” moments,指柳暗花明或豁然开朗的时刻)通常都发生在深夜,比如我彻底理解JavaScript的“闭包”概念,就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻,那就马上试试吧!
21.查看源代码
没有什么比模仿你的偶像能让你更快的学习HTML。起初,我们都要甘做复印机,然后慢慢得发展自己的风格。研究你喜欢的网站页面代码,看看他们是怎么实现的。这是高手的必经之路,你一定要试一下。注意:只是学习和模仿他们的编码风格,而不是抄袭和照搬!
留意网络上各种炫酷的JavaScript效果,如果看上去是使用了插件,那根据它源码中head标签内的文件名,就可以找到这个插件名称,然后就可以学习它据为己用。
22.为所有的元素定义样式
这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记?那用户可能会用,你自己不使用OL?用户也可能会。花时间做一个页面,显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式,检查一下是否有遗漏。
23.使用第三方服务
现在互联网上流行着许多可以免费加在网页中的API,这些工具非常强大。它可以帮你实现许多巧妙的功能,更重要的是可以帮你宣传网站。
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”能用标签包裹,因为他是“boulevard”的缩写。(喜大普奔也可以喽)。
●cite 被用来作为引用内容的标题(blockquote)。例如,如果你在你的博客中引用本篇文章,你可以将“给HTML初学者的三十条最佳实践”用包裹,注意它不应该被用来包裹引用的作者,这是常见的误区。
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.对齐元素
数据分析咨询请扫描二维码
若不方便扫码,搜微信号:CDAshujufenxi
在当今这个数据驱动的时代,几乎每一个业务决策都离不开对数据的深入分析。而其中,指标波动归因分析更是至关重要的一环。无论是 ...
2025-02-18当数据开始说谎:那些年我们交过的学费 你有没有经历过这样的场景?熬了三个通宵做的数据分析报告,在会议上被老板一句"这数据靠 ...
2025-02-17数据分析作为一门跨学科领域,融合了统计学、编程、业务理解和可视化技术。无论是初学者还是有一定经验的从业者,系统化的学习路 ...
2025-02-17挖掘用户价值本质是让企业从‘赚今天的钱’升级为‘赚未来的钱’,同时让用户从‘被推销’变为‘被满足’。询问deepseek关于挖 ...
2025-02-17近来deepseek爆火,看看deepseek能否帮我们快速实现数据看板实时更新。 可以看出这对不知道怎么动手的小白来说是相当友好的, ...
2025-02-14一秒精通 Deepseek,不用找教程,不用买资料,更不用报一堆垃圾课程,所有这么去做的,都是舍近求远,因为你忽略了 deepseek 的 ...
2025-02-12自学 Python 的关键在于高效规划 + 实践驱动。以下是一份适合零基础快速入门的自学路径,结合资源推荐和实用技巧: 一、快速入 ...
2025-02-12“我们的利润率上升了,但销售额却没变,这是为什么?” “某个业务的市场份额在下滑,到底是什么原因?” “公司整体业绩 ...
2025-02-08活动介绍 为了助力大家在数据分析领域不断精进技能,我们特别举办本期打卡活动。在这里,你可以充分利用碎片化时间在线学习,让 ...
2025-02-071、闺女,醒醒,媒人把相亲的带来了。 我。。。。。。。 2、前年春节相亲相了40个, 去年春节相亲50个, 祖宗,今年你想相多少个 ...
2025-02-06在数据科学的广阔领域中,统计分析与数据挖掘占据了重要位置。尽管它们常常被视为有关联的领域,但两者在理论基础、目标、方法及 ...
2025-02-05在数据分析的世界里,“对比”是一种简单且有效的方法。这就像两个女孩子穿同一款式的衣服,效果不一样。 很多人都听过“货比三 ...
2025-02-05当我们只有非常少量的已标记数据,同时有大量未标记数据点时,可以使用半监督学习算法来处理。在sklearn中,基于图算法的半监督 ...
2025-02-05考虑一种棘手的情况:训练数据中大部分样本没有标签。此时,我们可以考虑使用半监督学习方法来处理。半监督学习能够利用这些额 ...
2025-02-04一、数学函数 1、取整 =INT(数字) 2、求余数 =MOD(除数,被除数) 3、四舍五入 =ROUND(数字,保留小数位数) 4、取绝对值 =AB ...
2025-02-03作者:CDA持证人 余治国 一般各平台出薪资报告,都会哀嚎遍野。举个例子,去年某招聘平台发布《中国女性职场现状调查报告》, ...
2025-02-02真正的数据分析大神是什么样的呢?有人认为他们能轻松驾驭各种分析工具,能够从海量数据中找到潜在关联,或者一眼识别报告中的数 ...
2025-02-01现今社会,“转行”似乎成无数职场人无法回避的话题。但行业就像座围城:外行人看光鲜,内行人看心酸。数据分析这个行业,近几年 ...
2025-01-31本人基本情况: 学校及专业:厦门大学经济学院应用统计 实习经历:快手数据分析、字节数据分析、百度数据分析 Offer情况:北京 ...
2025-01-3001专家简介 徐杨老师,CDA数据科学研究院教研副总监,主要负责CDA认证项目以及机器学习/人工智能类课程的研发与授课,负责过中 ...
2025-01-29