今天拜读了HTML5 设计原理，算是重新认识了html5，这里做下笔记总结。
- 设计原理
设计原理本质上是一种信念、一种想法、一个概念，是你行动的支柱。 - HTML
伯斯塔尔法则（Postel’s Law）：发送时要保守；接收时要开放。 - HTML5
HTML5必将是一个伟大的规范，而W3C与WHATWG已经认可这就是他们的共同行动纲领。 - 避免不必要的复杂性
<!DOCTYPE html>
<meta charset="utf-8">
- 支持已有的内容
在HTML5中，你可以随意使用下列任何语法:
<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>
- 解决现实的问题
<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>
- 求真务实
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">...</div>
<div class="links">...</div>
</div>
可替换为
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
即便是现在，你照样可以使用div和类来描述页面中不同的部分，就像下面这样：
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">...</div>
<div class="links">...</div>
</div>
其中包含可能是有关内容作者的元数据，而下面会给出一些链接，差不多就这样。在HTML5中，我完全可以说这块内容就是一个文档，通过对内容分区，使用section或article或aside，我可以说“这一块完全是可以独立存在的。”因此，我当然可以使用header和footer。
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">...</div>
<nav class="links">...</nav>
</section>
这个变化太厉害了。想一想吧，这个变化对内容管理是革命性的。因为现在，你可以把每个内容分区想象一个独立的、能够从页面中拿出来的部分。此时，根据上下文不同，这个独立部分中的H1，在整个页面中没准会扮演H2或H3的角色——取决于它在文档中出现的位置。面对这个突如其来的变化，也许有人的脑子会暂时转不过弯来。不要紧，但我可以告诉你，我认为这才是HTML5中这些新语义标记的真正价值所在。换句话说，我们现在有了独立的元素了，这些元素中的标题级别可以重新定义。
- 平稳退化
有关HTML5遵循这条原理的例子，就是使用type属性增强表单。
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
现有的浏览器，不是将来的浏览器，现有的浏览器是无法理解这些新type值的。但在它们看到自己不理解的type值时，会将type的值解释为text。
<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，我还给出了下载链接。
- 最终用户优先
一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。
软件，就像所有技术一样，具有天然的政治性。代码必然会反映作者的选择、偏见和期望。
所以，我认为平常多看一看别人推崇的设计原理，有助于做好自己手头的工作。你可以把自己认为有道理的设计原理贴在墙上。当然，你可以维护一个URL，把自己认为有价值的设计原理分享出来，就像Mozilla基金会那样，对不对，以下是Mozilla的设计原理：
Internet作为一种公共资源，其运作效率取决于互通性（协议、数据格式、内容）、变革及全球范围内的协作。
基于透明社区的流程有助于增进协作、义务和信任。
我觉得像这样的设计原理都非常好。而有了设计原理，我认为才更有希望设计出真正有价值的产品。设计原理是Web发展背后的驱动力，也是通过HTML5反映出来的某种思维方式。
网友评论