2024年4月30日发(作者:)

如果您打算着手学习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.

      2.

    • Some text here.
    • 3.

    • Some new text here.
    • 4.

    • You get the idea.
    • 5.

    2: 什么正确的 DocType

    当我还很年轻的时候,我加入了很多的 CSS 论坛。每当有用户存在一个问题,我就会查看下

    他们的环境,并要求他们先执行两件事:

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

    2. 添加 doctype声明。

    “DOCTYPE 在打开HTML 页面标签的最开始部位显示,它会告诉浏览器当前包含的是 HTML,

    XHTML, 还是两者的混合版,以便它能够正确地解释的标记。”

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

    1.

    “/TR/html4/”>

    2.

    “/TR/html4/”>

    3.

    “/TR/xhtml1/DTD/”>

    4.

    “/TR/xhtml1/DTD/”>

    如何选择这个类别,当今存在着很大的争议。有一点是明确的,使用严格的 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.

    “path/to/” />

    5.

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

    记住 — 主要的目的是为了使页面在客户端的加载越快越好。当脚步在下载的时候,浏览器

    在文件下载完场之前是不会继续载入的。因此,用户还需要等待更长的时候才会有其它的进

    展。

    如果您包含了JS文件,而仅仅是为了定义额外的功能 — 例如,按钮中的点击 — 那么就请

    将这些文件放在底部,即body标记的闭合之前。这绝对是最佳做法。

    更好的

    1.

    And now you know my favorite kinds of corn.

    2.

    3.

    4.

    5.

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