Jeremy Keith谈HTML5设计原则

开发 后端 开发工具
HTML5 是近十年来 Web 标准最巨大的飞跃,它非常庞大,但是仍处在开发阶段。本文介绍的是Jeremy Keith谈HTML5设计原则,让我们一起来看。

4月17日,在由InfoQ独家社区支持的上海“拥抱HTML5”活动上,***次来到中国的《JavaScript DOM编程艺术》和《HTML5 For Web Designer》作者Jeremy Keith与大家一起回顾了HTML的发展历程,分享了HTML5的设计原则,并与在场与会者做了精彩互动。

首先,Jeremy回顾了HTML的历史,从HTML 2.0到XHTML 2.0,此处他引用了Postel法则(鲁棒性原则):

对自己发送的东西要严格,对接收的东西则要宽容。指出XHTML 2.0由于语法解析过于严格,因此不太适合于Web。

Jeremy认为所有的项目都应该有设计原则,HTML5也同样如此,W3C就为此发布了HTML设计原则,他强调了其中的兼容性、实用性与互操作性。

1、避免不必要的复杂性

Jeremy举了DOCTYPE的例子,表示HTML 4.01和XHTML中的DOCTYPE过于冗长,连自己都记不住这些内容,但在HTML5中只需要简单的<!DOCTYPE html>就可以了。DOCTYPE是给验证器用的,而非浏览器,浏览器只在做DOCTYPE切换时关注这个标签,因此并不需要写得太复杂。然后,他又提到如何指定字符集,在HTML5中只需要<meta charset="utf-8">。

规范也许会写得十分复杂,但浏览器的实现却可能很简单,规范有时会去迁就浏览器的实现。

2、支持已有内容

XHTML 2.0***的问题就是不支持已经存在的内容,这违反了Postel法则。现实情况中,开发者可以写出各种风格的HTML,浏览器遇到这些代码时,在内部所构建出的结构应该是一样的,呈现的效果也应该是一样的。

3、解决实际问题

规范应该去解决现实中实际遇到的问题,而不该考虑那些复杂的理论问题。例如,既然有在<a>中嵌套多个段落标签的需要,那就让规范支持它。

4、用户怎么使用的,就怎么设计规范

当一个实践已经被广泛接受时,就应该考虑将它吸纳进来,而不是禁止它或搞一个新的实践出来。

例如,HTML5中新增了nav、section、article及aside标签,它们引入了新的文档模型,即文档中的文档。在section中,还可以嵌套h1到h6的标签,这样就有了无限的标题层级,这也是很早之前Tim Berners Lee所设想的。

5、优雅地降级

Jeremy在此处举了input的例子,HTML5中input标签的type属性增加了很多类型,当浏览器不支持这些类型时,默认会将其视为text。这就是一种优雅降级。

此外,在谈到HTML5与Flash之争时,他认为很多情况下,这就是<video>和<object>的问题,完全没有必要二者选其一。可以先使用<video>,当浏览器不支持时降级到<object>,反之亦然。如果浏览器对两者都不支持,再降级到<a>,提供一个链接。

6、支持的优先级

在考虑优先级时,应该按照这个顺序:

用户 > 编写HTML的开发者 > 浏览器厂商 > 规范制定者 > 理论

用户与开发者的重要性要远远高于规范和理论。

在***的问答环节中,有人提到了HTML5的语法过于灵活,会造成一定的滥用,Jeremy表示赞同,并推荐使用类似JavaScript Lint的工具来帮助编写更好的代码。

此外,有人担心<video>外观的可定制性不强,控件不美观,可能会重蹈<select>的覆辙。Jeremy当场演示了一个通过CSS定制样式的<video>,并表示如果不喜欢浏览器提供的控件,完全可以实现自己的控件。

HTML5已不再遥远,不必等到规范成熟后才去使用,各个主流浏览器均已纷纷支持HTML5中的一些特性,大家可以从现在开始,拥抱HTML5。您又是怎么看待HTML5的呢?

【编辑推荐】

  1. 深入剖析HTML5表单
  2. 技术专题:HTML5酷炫特性揭秘
  3. 浅谈ASP.NET 4中构造HTML5视频控件
  4. 10个令人惊奇的HTML5和JavaScript效果
责任编辑:于铁 来源: InfoQ
相关推荐

2014-10-21 17:34:11

HTML5移动设计

2011-03-08 10:15:08

HTML 5

2013-01-24 10:26:04

HTML5HTML 5HTML5的未来

2011-05-12 16:01:51

HTML5

2013-10-21 15:24:49

html5游戏

2011-05-13 17:36:05

HTML

2011-03-03 17:03:53

HTML5手机游戏Flash

2012-07-19 09:55:10

HTML5

2017-01-03 18:09:33

HTML5本地存储Web

2011-05-12 15:42:16

HTML5

2023-03-16 09:00:00

HTML5HTML语言

2011-05-13 17:41:40

2011-01-14 17:53:33

HTML5cssweb

2012-07-02 14:32:22

HTML5

2013-03-22 08:59:57

HTML5移动应用Web App

2014-03-20 10:50:44

HTML5 定位技术

2014-12-30 17:13:51

HTML5

2013-01-18 10:59:44

IBMdW

2011-02-23 14:57:41

webweb开发HTML

2011-11-11 15:54:36

AdobeHTML5
点赞
收藏

51CTO技术栈公众号