01-HTML5的设计原理

最新推荐文章于 2024-04-26 22:29:03 发布

WinSolstice

最新推荐文章于 2024-04-26 22:29:03 发布

阅读量392

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/WinSolstice/article/details/77983568

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

设计原理

1、避免不必要的复杂性

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

<!DOCTYPE html >

HTML5只要这样写doctype就可以了，之前的HTML4.01

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

之所以要在文档一开头写 Doctype 是写给验证器看的。
是为了告诉验证器，让验证器按照该 doctype 来验证我的文档。浏览器在接收的时候必须要开放。因此，它不会检查任何格式类型，而验证器会，验证器才关心格式类型。这才是存在 doctype 的真正原因。

而按照 HTML5 的另一个设计原理，它必须向前向后兼容，未来的 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>

这个例子展示了编写同样内容的四种不同方式。上面是一个 img 元素，下面是带一个属性的段落元素。四种写法唯一的不同点就是语法。把其中任何一段代码交给浏览器，浏览器都会生成相同的 DOM 树，没有任何问题。从浏览器的角度看，这四种写法没有区别。因而在HTML5 中，你可以随意使用上述任何语法，但是，请尽量按标准模式来书写代码

3、解决现实问题

举个例子：
假设使用 HTML 4 或 XHTML 1，要给页面中的一个标题，一个段落，也许还有一张图片加上链接

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

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

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

浏览器不必因此重新写代码来支持这种写法。 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>

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

<body>
    <header>...</header>
    <nav>...</nav>
    <div>...</div>
    <aside>...</aside>
    <footer>...</footer>
</body>

这些新标记可以看作是类的替代品。为什么这么说呢？因为这些元素在一个页面中不止可以使用一次，而是可以使用多次。没错，你可以为文档添加一个头部（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="movie.ogv">
    <object data="movie.swf">
        <a href="movie.mp4">download</a>
    </object>
</video>

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

6、最终用户优先

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

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

WinSolstice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-HTML5的设计原理

伯斯塔尔法则（Postel’s Law）：发送时要保守；接收时要开放。意思:在发送文档的时候，我们会尽量保守一些，尽量采用最佳实践，尽量确保文档格式良好。但从浏览器的角度说，它们必须以开放的姿态去接收任何文档。设计原理1、避免不必要的复杂性这个很简单，举个例子来说<!DOCTYPE html >HTML5只要这样写doctype就可以了，之前的HTML4.01<!DOCTYPE html PUB
复制链接

扫一扫