HTML5 设计原理 - 开源中国社区
HTML5 设计原理
oschina 2012年05月18日

HTML5 设计原理

oschina oschina 发布于2012年05月18日 收藏 24 评论 8

有免费的MySQL,为什么还要买? >>>  

注:本文中的例子应该用代码展示的,但是因为现在用的DOCTYPE为XHTML1.0,浏览器读不出来HTML5代码,pre也没法
代码阅读,所以只能通过文字来说明了。

 

 

 

避免不必要的复杂性
如果可能,简明的解决方案总是比复杂的解决方案更受欢迎。

HTML 4.01的文档类型是这样设置(因为浏览器解析的原因,我把尖括号省略了):
!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”

XHTML 1.0的DOCTYPE是:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

而在HTML 5中,省掉不必要的复杂性,doctype就简化成了:!DOCTYPE html

支持已有的内容
已存在的内容依赖于预期的用户代理处理过程和行为,来实现预期的功能。

支持已有的内容是指,对已存在的内容100%的支持。

解决现实的问题
对应网页内容面对的问题,不能迎合存在需要的摘要架构是胜不过实际的解决方案的。

举例子,假设我使用HTML 4或XHTML 1,对应一个整块内容,比如一个商品列表好了,有商品图、商品标题、商品简介等,我要分别给这三块元素加上三个相同的链接。然而在HTML5里面,你完全 可以用一个a标签包含这三个区块。也就是,a标签包含块级元素。这解决了现实的问题。

求真务实
HTML5中新的语义元素就是遵循求真务实原理的反映。

假如你现在看网页,估计都会有这样的一些代码: id=”header” id=”navigation” id=”main” id=”sidebar” id=”footer” 然而在HTML5里面,新增的标签可以把相应的div替换掉,比如header、nav、aside、footer。别以为这些是id的替换品,不是的, 新标签其实是替换class的,因为这些标签可以在页面中重复使用。

平稳退化
应该制定HTML5 文档的一致性要求,甚至利用新元素、属性、API和内容模型。这样,网页内容才能在更老或者能力较弱的用户代理中优雅降级。

就用HTML5表单来说明吧,input新增的type有number、search、range、email、date、url等,这些新type值在不支持它的浏览器里面,将被解释为text。所以,可以大胆使用HTML5表单,它做到了“优雅降级”。

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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 开源中国社区 [http://www.oschina.net]
本文标题:HTML5 设计原理
分享
评论(8)
最新评论
0

引用来自“mallon”的评论

应用系统直接强制Chrome,省事

+1
0
应该还没完吧。。这文章不错。
0
HTML5设计原理——Jeremy Keith在 Fronteers 2010 上的主题演讲
http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
0
这篇文章本来很长很不错的,结果呗阉割成这个鸟样。。。
0
应用系统直接强制Chrome,省事
0
平滑过渡的技术,才能更让大家接受。
0
在研究了.........
0
好文章~我就不“顶”了,直接+1
顶部