HTML5设计原理

总结自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=
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML5拉杆子过关小游戏的原理是通过使用HTML5、CSS3和JavaScript等技术,实现了一个基于浏览器的小游戏。游戏中玩家需要控制一个拉杆子从一个位置向另一个位置移动,以达到过关的条件。游戏的难度随着关卡的增加而不断增加,玩家需要精确控制拉杆子的移动位置、速度和力度,以克服不同的难题。 该游戏采用了HTML5 Canvas技术,使得整个游戏画面可以通过JavaScript实时绘制在屏幕上。玩家通过鼠标或触屏设备控制拉杆的位置和移动方向,游戏中所用到的物理引擎可以模拟物体受力的运动状态;同时游戏中还使用了音效、计分等功能,以增加游戏的可玩性和趣味性。 总之, HTML5拉杆子过关小游戏是通过对HTML5、CSS3和JavaScript等技术的灵活应用,实现了一个基于浏览器的有趣小游戏。 ### 回答2: HTML5拉杆子过关小游戏原理就是使用HTML5语言编写出一个拉杆子过关的小游戏,玩家需要通过拉杆子来将小球顺利引导到终点。游戏是由HTML5的canvas标签渲染实现的,玩家通过鼠标点击、拖拽来拉动拉杆子,控制小球的方向和移动速度,游戏中需要注意小球的重力和摩擦力,以及障碍物的位置和形状,通过观察和调整拉杆子的角度、力度等参数,玩家可以将小球顺利引导到终点,达到过关的目标。HTML5拉杆子过关小游戏采用了简单易懂的操作方式和有趣的游戏方式,具有良好的可玩性和趣味性,是一款很受欢迎的小游戏。 ### 回答3: HTML5拉杆子过关小游戏原理是利用HTML5技术实现游戏的基本逻辑和功能。游戏主要包含三个部分:界面设计、游戏逻辑和数据交互。界面设计通过HTML5的canvas技术绘制游戏场景和游戏元素,如拉杆、球等。游戏逻辑核心是通过javascript代码处理游戏过程中的事件和变化,如拉杆的旋转角度、球的运动轨迹、分数的累计等。数据交互则是通过前端和后端的交互实现排行榜等功能。游戏的实现需要注意前后端之间的数据同步,保证游戏的公平性和游戏体验的良好性。HTML5拉杆子过关小游戏的原理相较于Flash等其他技术实现的游戏,更为灵活、方便和易于开发和传播。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值