HTML5设计原理
来源:互联网 发布:北京尚学堂java学费 编辑:程序博客网 时间:2024/06/16 11:00
总结自Jeremy Keith在 Fronteers 2010 上的主题演讲。
这里要讲的只是HTML5,并不包含CSS3,而且讲的不是HTML5包含什么,而是讲为什么会包含它们。即HTML5的设计原理。
设计原理 本质上是一种信念、一种想法、一个概念,是你行动的支柱。不管你是制定规范,还是制造一种有形的物品,或者编写软件,甚至发明编程语言。你都能找到背后的一个或者多个设计原理,多人协作的任何成果都是例证。
伯斯塔尔法则(Postel’s Law):发送时要保守;接收时要开放。什么意思呢?意思就是,作为专业人士,在发送文档的时候,我们会尽量保守一些,尽量采用最佳实践,尽量确保文档格式良好。但从浏览器的角度说,它们必须以开放的姿态去接收任何文档。
好了,下面说一下设计原理吧。
设计原理
1、避免不必要的复杂性
这个很简单,举个例子来说
<!DOCTYPE html >
HTML5只要这样写doctype就可以了,那么之前呢,拿之前的HTML4.01来说,
1 <!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
这么一长串根本记不住!
那么,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>
这个例子展示了编写同样内容的四种不同方式。上面是一个 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>
在 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等工作组。代码必然会反映作者的选择、偏见和期望。
以上就是看主题演讲的时候,总结出来的设计原理,看起来挺简单,但是需要认真去理解吧。毕竟这是设计HTML5的人在遵循的,虽然我只是个小小的前端程序媛,只要遵守就可以,但是了解清楚为什么,总比只知道怎么做要更上一层。
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理(转)
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- html5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- HTML5设计原理
- html5设计原理
- HTML5设计原理
- 删除atom在windows文件夹右键快捷菜单中的选项
- HDU 4811 Ball(超直白解释)
- java学习笔记六:构造函数(方法)
- linux 北编译调试
- 计算机视觉和模式识别 CVPR2016的代码合集
- HTML5设计原理
- mips虚拟内存映射
- 深入浅出 RPC - 深入篇
- 【Proto文件】Google开源技术 Protobuf 简介与使用
- List接口源码解析
- 这些输入格式是ChemDraw 15可以支持吗
- java中添加按钮并添加响应事件
- Errors running builder 'DeploymentBuilder' on project 'webdemo'.java.lang.NullPointerException
- Nginx开发从入门到精通