HTML5设计原理

时间：2025-03-25 08:48:05

总结自Jeremy Keith在 Fronteers 2010 上的主题演讲。

这里要讲的只是HTML5，并不包含CSS3，而且讲的不是HTML5包含什么，而是讲为什么会包含它们。即HTML5的设计原理。

设计原理 本质上是一种信念、一种想法、一个概念，是你行动的支柱。不管你是制定规范，还是制造一种有形的物品，或者编写软件，甚至发明编程语言。你都能找到背后的一个或者多个设计原理，多人协作的任何成果都是例证。

伯斯塔尔法则（Postel’s Law）：发送时要保守；接收时要开放。什么意思呢？意思就是，作为专业人士，在发送文档的时候，我们会尽量保守一些，尽量采用最佳实践，尽量确保文档格式良好。但从浏览器的角度说，它们必须以开放的姿态去接收任何文档。

好了，下面说一下设计原理吧。

设计原理

1、避免不必要的复杂性

这个很简单，举个例子来说

<!DOCTYPE html >
  • 1

HTML5只要这样写doctype就可以了，那么之前呢，拿之前的HTML4.01来说，

1 <!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http:///TR/html4/">
  • 1

这么一长串根本记不住！

那么，doctype是用来干什么的呢，为什么在文档开始就要写doctype呢？

回答一下上面的问题：
        它不是写给浏览器看的。Doctype 是写给验证器看的。也就是说，我之所以要在文档一开头写那行 doctype，是为了告诉验证器，让验证器按照该 doctype来验证我的文档。浏览器在接收的时候必须要开放。因此，它不会检查任何格式类型，而验证器会，验证器才关心格式类型。这才是存在 doctype> 的真正原因。
        而按照 HTML5 的另一个设计原理， 它必须向前向后兼容， 兼容未来的 HTML 版本——不管是 HTML6、HTML7，还是其他什么——都要与当前的 HTML 版本，HTML5，兼容。因此，把一个版本号放在 doctype 里面没有多大的意义，即使对验器证也一样。

在页面上加入了doctype，就相当于声明了“我想使用标准模式”

2、支持已有内容

        我们都会考虑让 Web 的未来发展得更好，但他们则必须考虑过去。别忘了 W3C 这个工作组中有很多人代表的是浏览器厂商， 他们肯定是要考虑支持已有内容的。 只要你想构建一款浏览器，就必须记住这个原则：必须支持已有的内容。
举个例子：

<img src="foo" alt="bar" />
<p class="foo">Hello world</p>

<img src="foo" alt="bar">
<p class="foo">Hello world

<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>

<img src=foo alt=bar>
<p class=foo>Hello world</p>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这个例子展示了编写同样内容的四种不同方式。上面是一个 img 元素，下面是带一个属性的段落元素。四种写法唯一的不同点就是语法。把其中任何一段代码交给浏览器，浏览器都会生成相同的 DOM 树，没有任何问题。从浏览器的角度看，这四种写法没有区别。因而在HTML5 中，你可以随意使用上述任何语法，但是，
这不意味着拒绝粗心大意的标记，做不做清理完全取决于你自己。

3、解决现实问题

举个例子：
假设我使用 HTML 4 或 XHTML 1，页面中已经有了一块内容， 我想给整块内容加个链接， 怎么办？问题是这块内容里包含一个标题，一个段落，也许还有一张图片。如果我想给它们全部都可以点击，必须使用 3 个链接元素。于是，我得先把光标放在标题（比如说 h2 元素）中，写一个链接标签，然后再选中所有要包含到链接里面来的文本。接着，再把光标放在段落里，写一个链接标签，然后把段落中的文本放在链接里……

<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
  • 1
  • 2

在 HTML5 中，我只要简单地把所有内容都包装在一个链接元素中就行了。

<a href="/path/to/resource">
    <h2>Headline text</h2>
    <p>Paragraph text.</p>
</a>
  • 1
  • 2
  • 3
  • 4

它解决了一个现实的问题,那这到底解决的是什么问题呢？浏览器不必因此重新写代码来支持这种写法。 这种写法其实早就已经存在于浏览器中了，因为早就有人这样写了，当然以前这样写是不合乎规范的。所以，说 HTML5 解决现实的问题，其本质还是“你都这样写了很多年了吧？现在我们把标准改了，允许你这样写了.

4、求真务实

HTML5 中新的语义元素就是遵循求真务实原理的反映。新增的元素不算多，谈不上无限的扩展性，但却不失为一件好事。尽管数量屈指可数，但意义却非同一般。这些新元素涉及头部（header）、脚部（footer）、分区（section）、文章（article）……，相信大家都不会觉得陌生。
举个例子，我们之前写文档，可能是这样来写：

<body>
    <div id="header">...</div>
    <div id="navigation">...</div>
    <div id="main">...</div>
    <div id="sidebar">...</div>
    <div id="footer">...</div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

但现在，HTML5让我们可以这样写：

<body>
    <header>...</header>
    <nav>...</nav>
    <div>...</div>
    <aside>...</aside>
    <footer>...</footer>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这些新标记可以看作是类的替代品。 为什么这么说呢？因为这些元素在一个页面中不止可以使用一次， 而是可以使用多次。没错，你可以为文档添加一个头部（header），再添加一个脚部（footer）；但文档中的每个分区（section）照样也都可以有一个头部和一个脚部。而每个分区里还可以嵌套另一个分区，被嵌套的分区仍然可以有自己的头部和脚部。

section article aside nav 很强大的标记，那么它们强大的原因是什么？

之所以说它们强大，原因在于它们代表了一种新的内容模型，一种 HTML 中前所未有的内容模型——给内容分区。
迄今为止，我们一直都在用 div 来组织页面中的内容，但与其他类似的元素一样，div 本身并没有语义。但section、article、aside 和 nav 实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容，都可以拥有自己的概要、标题，自己的脚部。其中最为通用的 section， 可以说是与内容最相关的一个。 而 article 则是一种特殊的 section。Aside 呢，是一种特殊的 section。最后，Nav 也是一种特殊的 section。

每个分区都是独立的，并且可以嵌套

5、平稳退化

有关 HTML5 遵循这条原理的例子，就是使用 type 属性增强表单。HTML5可以为 type属性指定的新值，有 number、search、range，等等，最关键的问题在于浏览器在看到这些新 type 值时会如何处理。有的浏览器是无法理解这些新 type 值的。 但在它们看到自己不理解的 type 值时，会将 type 的值解释为 text。这就是平稳退化。

还有就是video元素。video是非常贴心的元素，而且设计又简单，又实用。一个开始的 video 元素，加一个结束的 video 元素，中间可以放后备内容。

<video>
    <source src="movie.mp4">
    <source src="">
    <object data="">
        <a href="movie.mp4">download</a>
    </object>
</video>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

上面的代码中包含了 4 个不同的层次。
1、如果浏览器支持 video 元素，也支持 H264，没什么好说的，用第一个视频。
2、如果浏览器支持 video 元素，支持 Ogg，那么用第二个视频。
3、如果浏览器不支持 video 元素，那么就要试试 Flash 影片了。
4、如果浏览器不支持 video 元素，也不支持 Flash，我还给出了下载链接。

6、最终用户优先

一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

最终用户就是用户，作者是指开发者，实现者是指浏览器，标准制定者就是W3C等工作组。代码必然会反映作者的选择、偏见和期望。

以上就是看主题演讲的时候，总结出来的设计原理，看起来挺简单，但是需要认真去理解吧。毕竟这是设计HTML5的人在遵循的，虽然我只是个小小的前端程序媛，只要遵守就可以，但是了解清楚为什么，总比只知道怎么做要更上一层。

相关文章