[教程]学习HTML的30个最佳实践案例.doc
如果您打算着手学习HTML语言，在学习了相关教程以后，不妨看看本文介绍的30个HTML最佳实践案例练练手。在运营Nettuts+过程中，最困难的莫过于需要满足各种不同技能水平的人群了。如果我们发布了过多的高级教程，那么对于初学者来说无疑就会失去平衡感。相反也是同样的道理。我们尽全力，希望顾及到的是所有人的利益。 这个网站是为您服务的，有需要的那么就请说出来吧！像所说的那样，今天的这篇教程 是为那些刚刚步入web开发的初学者提供的。如果您只有一年或者更少，那么希望这里列出来的条目会对您有所帮助，并且能够学习得更好，更便捷! 排除任何的干扰，当您在创建标示的时候，就来回顾下这30个最佳实践吧。 大家好，是叫Jeff。我是 Nettuts+ 的一名编辑，同时，我也是 Theme Forest网站的管理者。我在电脑前待得太多了，以至于我经常会对我的未婚妻说，”我们将会在5分钟之后走!”。我不能做到，当然依然在用 Firebug调试错误的时候就跟我的未婚妻出去吃饭这使得我很疯狂。我热爱 jQuery, PHP, MYSQL, CSS, AJAX - 几乎所有。如果这些对你也备受青睐，请在 Twitter 上 追踪我们 。 1: 始终闭合您的标签 回顾过去，这样的代码并不少见: 1. <li>Some text here. 2. <li>Some new text here. 3. <li>You get the idea. 请注意，这里的 UL/OL 已被省略。另外，很多都选择没有闭合 LI 标签。按照今天的标准，这是个非常糟糕的低级错误，必须 100% 避免。一如既往，始终要闭合您的标记。否则，每次您都会碰到验证及一些故障问题。 更好的 1. <ul> 2. <li>Some text here. </li> 3. <li>Some new text here. </li> 4. <li>You get the idea. </li> 5. </ul> 2: 什么正确的 DocType 当我还很年轻的时候，我加入了很多的 CSS 论坛。每当有用户存在一个问题，我就会查看下他们的环境，并要求他们先执行两件事: 1. 验证 CSS 文件。修正任何必要的错误。 2. 添加 doctype声明。 “DOCTYPE 在打开HTML 页面标签的最开始部位显示，它会告诉浏览器当前包含的是 HTML, XHTML, 还是两者的混合版，以便它能够正确地解释的标记。” 通常我们都会选择下面四个不同的 doctypes 中的其中一个来创建我们新的网站。 1. <!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01/EN” “http:/www.w3.org/TR/html4/strict.dtd”> 2. <!DOCTYPE HTML PUBLIC “-/W3C/DTD HTML 4.01 Transitional/EN” “http:/www.w3.org/TR/html4/loose.dtd”> 3. <!DOCTYPE html PUBLIC “-/W3C/DTD XHTML 1.0 Transitional/EN” “http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 4. <!DOCTYPE html PUBLIC “-/W3C/DTD XHTML 1.0 Strict/EN” “http:/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 如何选择这个类别，当今存在着很大的争议。有一点是明确的，使用严格的 XHTML 版本被认为是最佳做法。然而，经过研究，人们认识到，大多数的浏览器在诠释的时候依然会恢复到正常 HTML。因为这个原因，大多数都选择严格的HTML 4.01作为替代。所有这些的底线是，它们依然多会对您的代码做些检测。做一些调查，最终得出自己的结论吧！ 3: 不要使用内置的样式 当然非常努力地在作标示的时候，经常会选择一些捷径，偷偷地内置一些样式到标示中。 1. <p style=“color: red;”>Im going to make this text red so that it really stands out and makes people take notice! </p> 当然 这些看起来并不会带来坏处。然而，这种方式的编码是错误的。 当您再创建标示的时候，不要总想着内置样式。您应该再页面中的标示代码都已经做好的时候再来定义样式。 这就像穿越溪流的捉过敢死队。这可不是什么好主意。-Chris Coyier (与提到的东西完全无关。) 替代的是，完成您的标示之后，引入一份外部的文件来定义 P 标签的样式。 更好的 1. #someElement > p 2. color: red; 3. 4: 将所有的外部 CSS 文件置于Head 标签内。 从技术上来说，您可以将这个样式放置在任何您想放的任何地方。然而，HTML规格推荐您放再文档的 HEAD 标签内。主要的好处是，这样您的网页渲染会加载得更加快。 通过研究Yahoo中的表现，我们发现将样式移动到文档的 HEAD 中页面的加载会快很多。这是因为把样式放在头部会逐步粉饰网页。- ySlow 团队 1. <head> 2. <title>My Favorites Kinds of Corn</title> 3. <link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/file.css” /> 4. <link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/anotherFile.css” /> 5. </head> 5: 考虑将 Javascript 文件放在底部 记住 主要的目的是为了使页面在客户端的加载越快越好。当脚步在下载的时候，浏览器在文件下载完场之前是不会继续载入的。因此，用户还需要等待更长的时候才会有其它的进展。 如果您包含了JS文件，而仅仅是为了定义额外的功能 例如，按钮中的点击 那么就请将这些文件放在底部，即body标记的闭合之前。这绝对是最佳做法。 更好的 1. <p>And now you know my favorite kinds of corn. </p> 2. <script type=“text/javascript” src=“path/to/file.js”></script> 3. <script type=“text/javascript” src=“path/to/anotherFile.js”></script> 4. </body> 5. </html> 6: 不要使用内置的 Javascript。这可不是在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. <DIV> 2. <P>Heres an interesting fact about corn. </P> 3. </DIV> 更好的 1. <div> 2. <p>Heres an interesting fact about corn. </p> 3. </div> 11: 使用 H1 - H6 标签 诚然，这有时候让我皮预处理。最好的做法是将这六个标记全部都运用起来。老实说，通常我只执行这前面的四个，我就是这么工作的!:)。由于语义及SEO原因，在适当的时候用H6来替代P标签吧。 1. <h1>This is a really important corn fact! </h1> 2. <h6>Small, but still significant corn fact goes here. </h6> 12: 如果创建了博客，那么就用H1来标示您的文章标题吧 就在今天早上，在Twitter上，我问我的追踪者们，H1标记是应该作为LOGO的标志呢，还是作为文章的标题。约80%的人是赞成后一种方法。 不管如何，确定一个时候您自己的网站的吧。但是，如果是建立博客，我的建议是用H1标记来作为标示您的文章标题。对于SEO而言，这无疑是更好的做法。 13: 下载 ySlow 特别是在过去的几年中，Yahoo团队一直在作这个领域的真正的伟大的工作。就在不久前，他们发布了Firebug的扩展叫ySlow。激活时，它会分析网站并返回一个“报告单”，记述了您的网站有哪些还需要更近的。要求几乎有点苛刻，但都是为了更好的效果。我高度推荐使用。 14: 无序的导航列表 几乎每个网站都有导航部分。而您的定义无非即使需要如下的格式: 1. <div id=“nav”> 2. <a href=“#”>Home </a> 3. <a href=“#”>About </a> 4. <a href=“#”>Contact </a> 5. </div> 就语言而言，我建议您不要使用这种方法。您的任务是尽您所能写出最好的代码。 为什么要给我们的导航连接定义其它而不是无序列表？ UL标签的作用就是包含项目清单。 更好的 1. <ul id=“nav”> 2. <li><a href=“#”>Home</a></li> 3. <li><a href=“#”>About</a></li> 4. <li><a href=“#”>Contact</a></li> 5. </ul> 15: 了解如何配置IE浏览器 无疑某天您肯定会为了IE中的某点会其它而尖叫。它实际上已成为社区中讨论的焦点。档我再Twitter上看到我的一个朋友因为IE而苦恼，我总是笑笑，并承认，“我知道你的感受，朋友。 ” 首先，一旦您完成CSS主文件的编写，创建一个单独的“ ie.css ”文件。然后在此加入只针对IE浏览器的代码。 1. <!if lt IE 7> 2. <link rel=“stylesheet” type=“text/css” media=“screen” href=“path/to/ie.css” /> 3. <!endif> 这段代码表示，“如果用户的浏览器版本是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. <IMG SRC=“cornImage.jpg” /> <IMG SRC="cornImage.jpg" />更好的 1. <img src=“cornImage.jpg” alt=“A corn field I visited.” /> <img src="cornImage.jpg" alt="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 havent use a blockquote doesnt mean that the client wont. Never use ordered lists? That doesnt mean he wont! 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/月 在 L 上注册会员。尽量查看更多的视频。 3. 喜欢 “You Suck at Photoshop” 系列文章. 4. 花费几个小时尽量记住您所能记住的PS热键。 25: 学习 HTML 的每个标记 字面上去查看，HTML标记总共也就那么几十个，当然您也不会每天都会用到。然而，这并不意味着您就不应该去了解他们！您对标记“abbr”熟悉吗？“cite”呢？这两个独特的应该加入您的工具箱中。了解他们中的所有吧！ 顺便说一下，如果您对以上提到的两个还不熟悉: * abbr 就如您期盼的那样，非常优雅。它指的是一个缩写（abbreviation）。”Blvd” 可以被标记包裹，因为它是”boulevard”的缩写。 * cite 是用来引用标题的一些事物。例如，如果您引用了这篇文章到您自己的博客中，那么您可以将“30个写给HTML初学者的最佳实践”放置在标签 <cite> 内。请注意，这不应该用来引用参考作者来举证。这是一种常见的错误。 26: 加入社区 就像我们的网站对于普及web知识的传播所作出的贡献一样，您也是可以的！终于发现了，如果才能正确地运用浮动元素？发布一篇博客告诉别人您是怎么 做到的吧。要知道，总有比您经验更少的人出现。这样不仅可以教会您自己，而且还是对社会作出的一种贡献。以往您不知道的并不真正了解的，如此反而会促使您 去学习它？ 27: 使用 CSS Reset 这是另外一个已经被判处死刑了的辩论。CSS resets: 使用好呢，还是不使用；这是个问题。如果要求的仅仅是我的个人意见，那么我是100%推荐您创建一份自己的 reset 文件吧。刚开始的时候下载个流行的吧，例如 Eric Meyers 的，然后慢慢地，掌握更多了，学着去修改它并加入您自己的思想。如果您不这样做，那么您就会难以理解，为什么您的清单列表中为什么就多了个填充空白呢，甚至于您根本就没有在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 框架是针对那些经验丰富的，想要多节省一些开发的时间。他们可不是初学者。
