如果你从没听说过互动电影，那就真的要点击这里开开眼界了。这个页面以灰白色调为主，页面上的动画效果皆由 HTML5 技术制作，官方推荐最好使用 Chrome 浏览器，经过我们的试用，IE8 与 Opera 均无法启动这个页面，而 Firefox 4.0 Beta 4 和 Safari 都能体验这个互动电影。

谷歌在间接“鄙视”IE8 与 Opera 对 HTML5 的支持度

但这两款浏览器对这个页面的 HTML5 特效处理速度奇慢无比，偶尔还会出现崩溃现象，我们不排除这一个页面为谷歌 Chrome 浏览器特别优化过，因为这种以特效体验页面来暗中贬低对手的把戏已经屡见不鲜了。

登录这个页面后你首先需要输入你小时候的住址，为什么？因为电影情节将会从这里开始，并且融合谷歌地图和谷歌街景的技术到电影中，达到非常震撼的互动效果，其他诸如 Canvas，Video，Audio 等的 HTML5 标准特效就更加不用多介绍了。

输入小时候的住址

经过好一会儿的载入等待之后，由著名作家兼导演 Chris Milk 亲自操刀的互动电影就开始了，开始的时候，一名模样十分鬼祟的白衣男子在狂奔，奔到有气无力的时候，电影会先暂停，让你用交互绘图工具绘画一张明信片，寄给小时候的你。

一双无影脚

谷歌街景视图中的是不是你儿时的家？

你可以用鼠标乱涂乱画，也可以直接输入你想说的话，不过这张明信片，无论你的画工有多精细，画出来的都只能是错综复杂的线条，配合著名独立摇滚乐团 Arcade Fire 刚刚推出的新专辑《The Suburbs》中的歌曲 We Used to Wait 作为主题音乐，颇有剪不断理换乱的感觉。

错综复杂的明信片

写完明信片后将会是一段狂奔的视频

纸上谈兵完毕，最后送上这个HTML5 互动电影《The Wilderness Downtown》的视频。

The Wilderness Downtown

关于 Arcade Fire （拱廊之火）

Arcade Fire（拱廊之火）是一支独立摇滚乐队，来自于加拿大的蒙特利尔。乐队的主创成员是Win Butler和Régine Chassagne，他们是一对夫妻。乐队演奏的主要乐器有吉他、贝司和鼓，除此之外还有钢琴、小提琴、中提琴、大提琴、低音提琴、木琴、钟琴、键盘、圆号、手风琴、竖琴、曼陀林和手摇风琴。乐队在巡演中会带上几乎所有的乐器，然后由多面手的乐队成员们在整场演出中交替演奏。

Arcade Fire（拱廊之火）

拱廊之火乐队赢得了诸多奖项，包括2008年流星音乐奖的最佳国际专辑奖和2008年朱诺音乐奖的年度另类专辑奖。乐队在2005年和2008年因专辑《Funeral》（葬礼）和《Neon Bible》（霓虹圣经）同获格莱美音乐奖的最佳另类音乐专辑奖提名。而他们于2010年发行的新专辑《The Suburbs》（郊区），更是得到了评论界的称赞。

<P>&nbsp;&nbsp;哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说

这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。
下周（3.27）交流会上我会公布答案  点击查看第六期WEB标准化交流会 总结

＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993）考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。

言归正传。这道题的考点：

考点1：html和 xhtml的区别
这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离
用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp

考点3：合理使用标签
br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：
html 4.01:
<p>哥写的不是HTML，是寂寞。<p>我说：<br> 不要迷恋哥，哥只是一个传说

xhtml 1.0:
<p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p>

加分：合理的用语义化标签
在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

<p>哥写的不是HTML，是寂寞。
<p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q>

我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。

<p> 哥写的不是<abbr title=”Hyper Text Markup Language”>HTML</abbr>，是寂寞。
<p><cite> 我</cite>说：<br> <q>不要迷恋哥，哥只是一个传说</q>

转自kejun的blog：http://hikejun.com/blog/?p=548