当前位置：文档库 › [教程]学习HTML的30个最佳实践案例

[教程]学习HTML的30个最佳实践案例

[教程]学习HTML的30个最佳实践案例.txt世上有三种人：一是良心被狗吃了的人，二是良心没被狗吃的人，三是良心连狗都不吃的人。︶﹋丶爱情是个梦，而我却睡过了头﹌如果您打算着手学习HTML语言，在学习了相关教程以后，不妨看看本文介绍的30个HTML最佳实践案例练练手。在运营Nettuts+过程中，最困难的莫过于需要满足各种不同技能水平的人群了。如果我们发布了过多的高级教程，那么对于初学者来说无疑就会失去平衡感。相反也是同样的道理。我们尽全力，希望顾及到的是所有人的利益。
这个网站是为您服务的，有需要的那么就请说出来吧！像所说的那样，今天的这篇教程是为那些刚刚步入web开发的初学者提供的。如果您只有一年或者更少，那么希望这里列出来的条目会对您有所帮助，并且能够学习得更好，更便捷!
排除任何的干扰，当您在创建标示的时候，就来回顾下这30个最佳实践吧。
大家好，是叫Jeff。我是 Nettuts+ 的一名编辑，同时，我也是 Theme Forest网站的管理者。我在电脑前待得太多了，以至于我经常会对我的未婚妻说，”我们将会在5分钟之后走!”。我不能做到，当然依然在用 Firebug调试错误的时候就跟我的未婚妻出去吃饭…这使得我很疯狂。我热爱 jQuery, PHP, MYSQL, CSS, AJAX - 几乎所有。如果这些对你也备受青睐，请在 Twitter 上追踪我们。
1: 始终闭合您的标签
回顾过去，这样的代码并不少见:
1.

Some text here.
2.

Some new text here.
3.

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

Some text here.

Some new text here.

You get the idea.

2: 什么正确的 DocType
当我还很年轻的时候，我加入了很多的 CSS 论坛。每当有用户存在一个问题，我就会查看下他们的环境，并要求他们先执行两件事:
1. 验证 CSS 文件。修正任何必要的错误。
2. 添加 doctype声明。
“DOCTYPE 在打开HTML 页面标签的最开始部位显示，它会告诉浏览器当前包含的是 HTML, XHTML, 还是两者的混合版，以便它能够正确地解释的标记。”
通常我们都会选择下面四个不同的 doctypes 中的其中一个来创建我们新的网站。
1.
2.
3.

ional//EN” “https://www.wendangku.net/doc/fb7235854.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
4.
如何选择这个类别，当今存在着很大的争议。有一点是明确的，使用严格的 XHTML 版本被认为是最佳做法。然而，经过研究，人们认识到，大多数的浏览器在诠释的时候依然会恢复到正常 HTML。因为这个原因，大多数都选择严格的HTML 4.01作为替代。所有这些的底线是，它们依然多会对您的代码做些检测。做一些调查，最终得出自己的结论吧！
3: 不要使用内置的样式
当然非常努力地在作标示的时候，经常会选择一些捷径，偷偷地内置一些样式到标示中。
1.

I’m going to make this text red so that it really stands out and makes people take notice!

当然 — 这些看起来并不会带来坏处。然而，这种方式的编码是错误的。
当您再创建标示的时候，不要总想着内置样式。您应该再页面中的标示代码都已经做好的时候再来定义样式。
这就像穿越溪流的捉过敢死队。这可不是什么好主意。
-Chris Coyier (与提到的东西完全无关。)
替代的是，完成您的标示之后，引入一份外部的文件来定义 P 标签的样式。
更好的
1. #someElement > p {
2. color: red;
3. }
4: 将所有的外部 CSS 文件置于Head 标签内。
从技术上来说，您可以将这个样式放置在任何您想放的任何地方。然而，HTML规格推荐您放再文档的 HEAD 标签内。主要的好处是，这样您的网页渲染会加载得更加快。
通过研究Yahoo中的表现，我们发现将样式移动到文档的 HEAD 中页面的加载会快很多。这是因为把样式放在头部会逐步粉饰网页。
- ySlow 团队
1.
2. My Favorites Kinds of Corn
3.
4.
5.
5: 考虑将 Javascript 文件放在底部

记住 — 主要的目的是为了使页面在客户端的加载越快越好。当脚步在下载的时候，浏览器在文件下载完场之前是不会继续载入的。因此，用户还需要等待更长的时候才会有其它的进展。
如果您包含了JS文件，而仅仅是为了定义额外的功能 — 例如，按钮中的点击 — 那么就请将这些文件放在底部，即body标记的闭合之前。这绝对是最佳做法。
更好的
1.

And now you know my favorite kinds of corn.

2.
3.
4.
5.
6: 不要使用内置的 J

avascript。这可不是在1996!
几年前的推荐做法都是将JS文件直接内置在标签内。这对于几个简单的图像画廊式的非常常见。实际上，”onclick” 属性是出现在标签内的。这等价于JS的处理程序。毫无疑问，您永远都不应该这么做。相反，这段代码已经转移到一个外部的JS文件中，然后使用“ addEventListener / attachEvent ”为您需要监听的事件中添加这个。或者，如果您使用的是像 jQuery 这样的框架，就请使用 “click” 方法。
1. $(‘a#moreCornInfoLink’).click(function() {
2. alert(‘Want to learn more about corn?’);
3. });
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: 小写标示您的标记
技术上将，您完全可以消除这方面的标记写法。
1.

Here’s an interesting fact about corn.

更好的
1.

Here’s an interesting fact about corn.

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

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: 无序的导航列表

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

2. Home
3. About
4. Contact
5.

就语言而言，我建议您不要使用这种方法。您的任务是尽您所能写出最好的代码。
为什么要给我们的导航连接定义其它而不是无序列表？
UL标签的作用就是包含项目清单。
更好的
1.

Home

About

Contact

15: 了解如何配置IE浏览器
无疑某天您肯定会为了IE中的某点会其它而尖叫。它实际上已成为社区中讨论的焦点。档我再Twitter上看到我的一个朋友因为IE而苦恼，我总是笑笑，并承认，“我知道你的感受，朋友。 ”
首先，一旦您完成CSS主文件的编写，创建一个单独的“ ie.css ”文件。然后在此加入只针对IE浏览器的代码。
1.
2.
3.
这段代码表示，“如果用户的浏览器版本是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属性在图像中的必要性。但是，这的确很重要，就可访问性跟验证而言，您就很有必要花费一些额外的时间来填补这些片段。
糟糕的
1.

更好的
1.
A corn field I visited.
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的技巧，当然是越多越好了。
1. 访问 Psdtuts+ 中的 Videos section
2. 花费 $25/月在 https://www.wendangku.net/doc/fb7235854.html, 上注册会员。尽量查看更多的视频。
3. 喜欢 “You Suck at Photoshop” 系列文章.
4. 花费几个小时尽量记住您所能记住的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文件中的任何地方定义过！控制您的愤怒，重置所有的样式吧！这应该可以让您重新开始使用。
?
1. html, body, div, span,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. img, ins, kbd, q, s, samp,
5. small, strike, strong,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-size: 100%;
14. vertical-align: baselinebaseline;
15. background: transparent;
16. }
17. body {
18. line-height: 1;
19. }
20. ol, ul {
21. list-style: none;
22. }
23. blockquote, q {
24. quotes: none;
25. }
26. blockquote:before, blockquote:after,
27. q:before, q:after {
28. content: ”;
29. content: none;
30. }
31. table {
32. border-collapse: collapse;
33. border-spacing: 0;
34. }
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: baseline;
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 框架是针对那些经验丰富的，想要多节省一些开发的时间。他们可不是初学者。