请注意，这里的 UL/OL 已被省略。另外，很多都选择没有闭合 LI 标签。按照今天的标准，这是个非常糟糕的低级错误，必须 100% 避免。一如既往，始终要闭合您的标记。否则，每次您都会碰到验证及一些故障问题。

　　更好的

 

　　

• Some text here.

 

　　

• Some new text here.

 

　　

• You get the idea.

 

　　

　　2: 什么正确的 DocType

　　当我还很年轻的时候，我加入了很多的 CSS 论坛。每当有用户存在一个问题，我就会查看下他们的环境，并要求他们先执行两件事:

　　验证 CSS 文件。修正任何必要的错误。

　　添加 doctype声明。

　　“DOCTYPE 在打开HTML 页面标签的最开始部位显示，它会告诉浏览器当前包含的是 HTML, XHTML, 还是两者的混合版，以便它能够正确地解释的标记。”

　　通常我们都会选择下面四个不同的 doctypes 中的其中一个来创建我们新的网站。

　　如何选择这个类别，当今存在着很大的争议。有一点是明确的，使用严格的 XHTML 版本被认为是最佳做法。然而，经过研究，人们认识到，大多数的浏览器在诠释的时候依然会恢复到正常 HTML。因为这个原因，大多数都选择严格的HTML 4.01作为替代。所有这些的底线是，它们依然多会对您的代码做些检测。做一些调查，最终得出自己的结论吧!

　　3: 不要使用内置的样式

　　当然非常努力地在作标示的时候，经常会选择一些捷径，偷偷地内置一些样式到标示中。

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 标签内。

　　从技术上来说，您可以将这个样式放置在任何您想放的任何地方。然而，HTML规格推荐您放再文档的 HEAD 标签内。主要的好处是，这样您的网页渲染会加载得更加快。

　　通过研究Yahoo中的表现，我们发现将样式移动到文档的 HEAD 中页面的加载会快很多。这是因为把样式放在头部会逐步粉饰网页。

　　- ySlow 团队

　　5: 考虑将 Javascript 文件放在底部

　　记住 — 主要的目的是为了使页面在客户端的加载越快越好。当脚步在下载的时候，浏览器在文件下载完场之前是不会继续载入的。因此，用户还需要等待更长的时候才会有其它的进展。

　　如果您包含了JS文件，而仅仅是为了定义额外的功能 — 例如，按钮中的点击 — 那么就请将这些文件放在底部，即body标记的闭合之前。这绝对是最佳做法。

　　更好的

And now you know my favorite kinds of corn.

　　6: 不要使用内置的 Javascript。这可不是在1996!

　　几年前的推荐做法都是将JS文件直接内置在标签内。这对于几个简单的图像画廊式的非常常见。实际上，”onclick” 属性是出现在标签内的。这等价于JS的处理程序。毫无疑问，您永远都不应该这么做。相反，这段代码已经转移到一个外部的JS文件中，然后使用“ addEventListener / attachEvent ”为您需要监听的事件中添加这个。或者，如果您使用的是像jQuery 这样的框架，就请使用 “click” 方法。

　　$(‘a#moreCornInfoLink’).click(function() {

　　alert(‘Want to learn more about corn?’);

　　});

　　7: 验证 Continuously

　　我最近提到的关于如何验证的想法，不要曲解理解它的最终目的。正如我在文章中提到的， “确保验证是为您服务，而不是打击。”

　　不过，特别是刚开始的时候。我就强烈推荐您下载 Web Developer Toolbar，并且经常使用 “Validate HTML” 和 “Validate CSS” 选项。虽然CSS是门非常易学的语言，但也会经常令您抓狂。正如您最终发现的那样，劣质的代码才是造成问题的关键。记住验证，验证，加验证。

　　8: 下载 Firebug

　　我不得不推荐这个。Firebug，毫无疑问，这是您在创建网站时不可或缺的插件。它不仅提供了难以置信的JavaScript调试，它还可以帮助您确定该元素继承了哪些样式。下载它!

　　9: 使用 Firebug!

　　据我所知的经验判断，许多用户仅仅利用了20%的Firebug的高级功能。要想对自己正在有帮组，那么就每天多花几个小时在web教程中的学习吧，您会找到不少这些问题的解决方法。

　　资源

　　Overview of Firebug

　　Debug Javascript With Firebug - video tutorial

　　10: 小写标示您的标记

　　技术上将，您完全可以消除这方面的标记写法。

Here’s an interesting fact about corn.

　　更好的

Here’s an interesting fact about corn.

　　11: 使用 H1 - H6 标签

　　诚然，这有时候让我皮预处理。最好的做法是将这六个标记全部都运用起来。老实说，通常我只执行这前面的四个，我就是这么工作的!:)。由于语义及SEO原因，在适当的时候用H6来替代P标签吧。

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

　　特别是在过去的几年中，Yahoo团队一直在作这个领域的真正的伟大的工作。就在不久前，他们发布了Firebug的扩展叫ySlow。激活时，它会分析网站并返回一个“报告单”，记述了您的网站有哪些还需要更近的。要求几乎有点苛刻，但都是为了更好的效果。我高度推荐使用。

　　14: 无序的导航列表

　　几乎每个网站都有导航部分。而您的定义无非即使需要如下的格式:

　　Home

　　About

　　Contact

　　就语言而言，我建议您不要使用这种方法。您的任务是尽您所能写出最好的代码。

　　为什么要给我们的导航连接定义其它而不是无序列表?

　　UL标签的作用就是包含项目清单。

　　更好的

 

　　

• Home

 

　　

• About

 

　　

• Contact

 

　　

　　15: 了解如何配置IE浏览器

　　无疑某天您肯定会为了IE中的某点会其它而尖叫。它实际上已成为社区中讨论的焦点。档我再Twitter上看到我的一个朋友因为IE而苦恼，我总是笑笑，并承认，“我知道你的感受，朋友。 ”

　　首先，一旦您完成CSS主文件的编写，创建一个单独的“ ie.css ”文件。然后在此加入只针对IE浏览器的代码。

　　这段代码表示，“如果用户的浏览器版本是IE6或者更低，就载入这个样式。否则就什么都不做。”如果您想要针对IE7，同样也可以采用这样的方式，用“lte”(小于或等于)来替代“lt”吧

　　16: 选择一个强大的代码编辑器

　　无论是Windows还是Mac，都有许多出色的代码编辑器，使得您的工作变得更加精彩。就我而言，我每天都需要面对这Mac核PC两台电脑。其结果是，经过这么长实践的程序生涯，以下是我的选择/建议：

　　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 压缩服务

　　CSS Optimiser

　　CSS Compressor

　　Clean CSS

　　18: 削减, 削减, 削减

　　回首我的第一个网站，在div处理上我肯定犯了很严重的错误。您的本意自然是为了安全地包含各个段落，然后采取良好的措施包含不止一个的层。 您会快速理解，这是相当没有效率的。

　　一旦您完成了您的标记，浏览两次吧，并设法降低网页中标记的数量。确认UL标示是否真的需要包含DIV?我想不是的。

　　就想关键字所描述的那样 “削减, 削减, 削减,” 同样适用于您的标记。

　　19: 所有的图片都需要加上 “Alt” 属性

　　人们很容易忽略标记ALT属性在图像中的必要性。但是，这的确很重要，就可访问性跟验证而言，您就很有必要花费一些额外的时间来填补这些片段。

　　糟糕的

　　更好的

　　20: 熬夜

　　我高度怀疑，我是唯一的一个。在我还在学习的那刻，却已经是凌晨了。如果您发现自己也是处于类似的情况，请放心，您已经选择了一个正确的领域。

　　令人惊奇的“ AHHA ”的时刻，至少对我来说，总是发生在深夜。这种情况在我懂得什么是JavaScript闭合的时候发生过。这是一个强大的感觉，您需要这种感觉，如果您还有没有过的话。

　　21: 查看源代码

　　有没有比复制您的偶像的代码学习HTML更好的方法呢?最初，我们都是复制者!然后慢慢地，我们开始形成自己的风格/方法。然后开始访问您觉得很好的那些 玩站。他们是如何编写这样及那样的章节的?学习并拷贝他们。我们都是这么过来的，而您也应该如此。(不要偷学设计，学习他们的编码风格吧。)

　　留意到一些非常酷的JavaScript效果，您想掌握它?他看起来是像用一些插件来完成这些效果的。查看源代码，在HEAD标记中寻找脚步的名称。然后通过Google搜索它并插入您自己的网站。就这样。

　　22: 定义所有的元素

　　这一做法对于给客户做设计阶段显得尤其有效。仅因为您不会使用引用并不意味着用户也会同样不会。切勿使用命令列表?这并不意味着别人也不会!一切都 是为了自己服务的，创建一个特殊的页面，目的是为了展示每个元素的样式：ul,ol,p,h1-h6,blockquotes,等等。(译者注：并不是很 明白这段话的含义，您理解了吗?)

　　(This best practice is especially true when designing for clients. Just because you haven’t use a blockquote doesn’t mean that the client won’t. Never use ordered lists? That doesn’t mean he won’t! Do yourself a service and create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.)

　　23: 使用 Twitter

　　最近，每当打开电视的时候不得不听到提及Twitter，这真的是相当讨厌。我从未要求听到Larry King宣传他的Twitter的帐户-我们都知道他从不手动更新。Yay起到了帮助!此外，又有多少个妈妈在注册帐户后得到了奥普拉的批准?我们只能长期等待，我们中的又有多少已经注意到了这项服务和它的“water cooler”潜力呢

　　起初，隐藏在Twitter背后的想法仅仅是“您在干什么。”虽然这个在一个小范围内仍然适用，但它显然已经衍生我们行业中不可或缺的网络工具。如 果我钦佩的一个web开发写手发现了一篇感兴趣的文章，您最好也是相信，我也应该去看看才是，您应该这样!这就是为什么像Digg这样的网站迅速得以成长 的原因吧。

　　如果您刚刚注册了，不要忘记追踪我们: NETTUTS.

　　24: 学习 Photoshop

　　最近有评论者在Nettuts +上抨击我们，声称我们发布的文章不少是Psdtuts +中的建议。他认为，Photoshop教程再web开发博客中是没有商业性质的。我不认同他的观点，但是我电脑上的24 / 7 Photoshop是相当开放的。

　　事实上，Photoshop可能已经成为您最重要的工具之一。一旦您掌握了HTML和CSS，那么我个人建议您应该学下Photoshop的技巧，当然是越多越好了。

　　访问 Psdtuts+ 中的 Videos section

　　花费 $25/月 在 Lynda.com 上注册会员。尽量查看更多的视频。

　　喜欢 “You Suck at Photoshop” 系列文章.

　　花费几个小时尽量记住您所能记住的PS热键。

　　25: 学习 HTML 的每个标记

　　字面上去查看，HTML标记总共也就那么几十个，当然您也不会每天都会用到。然而，这并不意味着您就不应该去了解他们!您对标记“abbr”熟悉吗?“cite”呢?这两个独特的应该加入您的工具箱中。了解他们中的所有吧!

　　顺便说一下，如果您对以上提到的两个还不熟悉:

　　abbr 就如您期盼的那样，非常优雅。它指的是一个缩写(abbreviation)。”Blvd” 可以被标记包裹，因为它是”boulevard”的缩写。

　　cite 是用来引用标题的一些事物。例如，如果您引用了这篇文章到您自己的博客中，那么您可以将“30个写给HTML初学者的最佳实践”放置在标签 内。请注意，这不应该用来引用参考作者来举证。这是一种常见的错误。

　　26: 加入社区

　　就像我们的网站对于普及web知识的传播所作出的贡献一样，您也是可以的!终于发现了，如果才能正确地运用浮动元素?发布一篇博客告诉别人您是怎么 做到的吧。要知道，总有比您经验更少的人出现。这样不仅可以教会您自己，而且还是对社会作出的一种贡献。以往您不知道的并不真正了解的，如此反而会促使您 去学习它?

　　27: 使用 CSS Reset

　　这是另外一个已经被判处死刑了的辩论。CSS resets: 使用好呢，还是不使用;这是个问题。如果要求的仅仅是我的个人意见，那么我是100%推荐您创建一份自己的 reset 文件吧。刚开始的时候下载个流行的吧，例如 Eric Meyer’s 的，然后慢慢地，掌握更多了，学着去修改它并加入您自己的思想。如果您不这样做，那么您就会难以理解，为什么您的清单列表中为什么就多了个填充空白呢，甚至于您根本就没有在CSS文件中的任何地方定义过!控制您的愤怒，重置所有的样式吧!这应该可以让您重新开始使用。

　　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: 排列时间线 (Line ‘em Up)!

　　一般来说，您应该努力地使您的元素排列尽可能地整齐。浏览下您最喜欢的设计。您有没有注意到，每个头部, icon， 段落和logo是不是都是整齐地布置再页面中的?没有做，那么这是判断初学者的一个最大的迹象。想想这个问题：如果我问，您为什么要将这个元素放在这个点 上的，那么您就应该有一个确切的理由。

　　29: 切割 PSD 图

　　好了，如果您已经牢固地掌握了HTML,CSS和Photoshop。下一步就是转换您的PSD图到工作目录网站中。不要紧张，这没有您想象的那么恐怖。 我想不出更好的方法来测试您的技能。如果您需要帮组，就请深度温习下这些视频教程，它会明确的告诉您应该如何完成这项工作。

　　Slice and Dice that PSD

　　30: 不要使用框架…Yet

　　框架，无论是针对JavaScript又或是CSS 都是极好的;但请不要在初学的时候就使用它。虽然都认为在使用jQuery和Javascript的同时可以学到很多，但这个不能针对CSS。我个人曾亲自参与推动960 CSS 跨家的实施，我也经常使用它。话虽如此，如果您始终停留在CSS的学习阶段–意思是学习的第一年–使用之后只会让您自己变得更加迷惑。

　　CSS 框架是针对那些经验丰富的，想要多节省一些开发的时间。他们可不是初学者。