原文链接：点击这里

Firefox和Safari对它部分支持，Google的Wave和Chrome项目则对它完全支持，大部分web开发者对它的名字所蕴含的意义都满怀欣喜。它就是HTML5，如果你对它不是非常了解，那么好，让我们来解释一下。

图片取自 Bruce Lawson’s fantastic HTML5 presentation.

什么是HTML5？是那些神奇的链接标签吗？

HTML5是一种规范，规定了web的核心语言——HTML如何被组织和利用起来以实现诸多功能，如传输文字，图片，多媒体，web应用程序，搜索表单以及一些其他你在浏览器里所见的元素。可以说它基本上是一组核心标准，只有web开发人员才有必要真正对它有所了解。也可以说它是一个重大的改进版本，规定了web中的元素如何被扭到一起。并不是每个站点都会用到它，但那些用到的网站会更好地被现代的桌面及手机浏览器所接受（现代的意思也就是说，不包括Internet Explorer）。

HTML5里有些什么是可以令我值得期待的？

HTML5的那些重大变动早已经被做成了很多头条新闻，感谢Google, Apple, Mozilla和其他一些浏览器开发商选择这些新元素并将它们付诸实际。下面是一张简短的列表：

• 离线存储：有点“超级cookie”的味道，但是可以提供更大的空间以同时存放一次性数据和长期保存的应用程序数据库，比如email。其实，想一下Google Gear就可以了，和它很相像，只不过你无需安装插件就可以享受到便利了。
• 涂鸦板：站点可以在页面上标示一片区域，通过程序代码和用户交互，在这个区域里可以直接画上各种图片，图表，图案，游戏元素以及一些你能想到的东西而不需要Flash或是其他插件的帮助。
• 原生的视频流支持：这个功能尚处于开发阶段，其旨在统一纷繁复杂的视频格式，不过像YouTube和Pandora这样的站点总有一天会完全弃用Flash，直接将视频展现给你，另外回放和其他一些功能也一个不会缺。
• 地理标示：这就和它的字面意思一样，但不会再局限于单个服务商提供的API或者浏览器工具。HTML5会确定你所在的区域然后根据这个进行个性化，比如你的搜索结果，标记你的twitter更新，等等。能感知地理位置的设备可是件了不得的大事。
• 智能化表单：搜索框，文本输入和其他需要你输入的区域会得到更好的控制，比如聚焦，数据检验，和其他页面元素交互，发送emai，等等。听起来好像没那么牛逼，但是它意味着作为一个用户输入起来可以稍微省心一点，这总是一件好事。
• Web应用程序集成：这里不谈数以万记的细节内容，公平的说HTML5在努力使得各种现代web元素（wiki，拖曳工具，讨论板，实时聊天，搜索框等等）从容地在任何站点构建起来，在浏览器里相互协同工作。

哪里能让我看到HTML5的实际应用？

问得好！

就在本页中，通过也许在不久的将来就变得可有可无的Flash，你可以观看这些视频阐述:（本博主注：Youtube视频，请自行翻墙观看。）

Google I/O 2009 Keynote, pt. 1

Firefox 3.5 Treats Videos Like Web Pages:

如果你用的是最新版的Firefox, Safari, Chrome,Opera，或者那些经常更新的浏览器（包括Internet Explorer），那就试试下面这些链接吧。

HTML5 演示: 大量HTML5的功能展示，由Remy Sharp精心编辑。

欢迎来到Safari: 完全用HTML5和CSS 3写成.

HTML5下的YouTube: 完全不需要Flash (目前为止，仅支持Chrome和Safari)。

涂鸦板和音频

一个简洁的交互式网站，用来显示正在使用#HTML的tweets，还包括了一些音频流和可交互的一些数据。

为什么要推行HTML5？Flash和JavaScript不是已经做得很好了吗？

不要误会了，HTML5对JavaScript和它的同类非常友好——事实上，新的标准里让类似JavaScript的代码更容易指向每个web页面或从每个web页面被移出。对于Flash, Silverlight还有其他浏览器插件，我们只能说它们是一些替补方案，其实HTML5就是尝试要补上这个本该原生支持的功能：在页面上放置和管理交互元素。

Flash和他的一些同类是内存泄漏和崩溃的罪魁祸首，不仅如此，它们还必须在每个平台上重写不然无法运行。如果你想为尽可能多的人提供一种自适应的应用程序，那么理想的方法是做到一次生成，平台无关。智能手机，台式机，笔记本，Windows，Mac，Linux将web视为通用的应用程序存储端是一种最理想的模式，当越来越多的浏览器和开发者支持HTML5的音频，视频和交互标准，那么这一理想模式将变得不再遥远。

Apple尝试着在他们的首款iPhone发行版中推行这种想法。这个声明一经发布，很多类似的声明也纷纷出现。此后，web应用程序作为一个生产力的重要指标得以迅速扩展壮大，也越来越被人重视，而在当下日趋增加的开发者心里对非开源模式的应用程序市场的狂热也大幅降温。

这并不是说由HTML5驱动的web应用程序会使我们现在所用的iPhone应用程序库，Android市场或者桌面级软件淘汰，毕竟web应用程序缺乏正规的本地存储，硬件接入和离线功能。但是但是chrome就利用到了HTML5的离线存储功能，看看它是如何在上网本市场中定位Chrome操作系统：一台性能稳定而运行流畅的第二电脑，你也经常会因为它的网络接入的方便性而使用它，即使频率算不上最高的。

Html5通过什么办法影响到我的web?

Html5不是软件，也不是硬性的web开发条例。它是一个共同参与，协同编辑的标准，规定形式非常宽泛，可以适应web浏览器开发者中各种不同的开发形式和指导思想。

说得更简单点，它取决于你用什么东西上网浏览以及网页制作者们遵循的标准是什么。

Firefox，Safari和Chrome的桌面级应用支持相当一部分HTML5草案规划中提及的形式和特征，比如离线存储，涂鸦板，最有趣的是音频和视频标签，它让站点上的多媒体数据流直接展现在你的浏览器上。Apple  iPhone上的Safari浏览器，Android浏览器和Opera手机浏览器同样支持HTML5的元素。想完整地了解你的浏览器在哪些方面支持HTML5？web技术男们花了好多时间把有关的一切都放到了维基表格中。

这些音频和视频标签可能并不像它们的名字那样的具有革新性。HTML5标准制定者——Google的Ian Hickson和Apple的Davd Hyatt——想为视频流定义一种简单，标准的格式，但他们的雇主却更倾向于H.264/MPEG-4标准，像Mozilla等开源项目公司对这种专利所造成的束缚更是深恶痛绝，而Opera和其他web公司可不那么喜欢缴纳所谓的许可费。他们转而投入Theora的怀抱，可能另一个名字更为（相对而言）为人熟知，Ogg Theora。就目前而言，HTML5不需要也不建议使用任何容器或解码器，也可以这么说，浏览器之间的差异被隐藏起来了。Ars Technica对HTML5的视频解码器争论分歧有很好理解。

深入阅读

• HTML5 – 维基百科: 我是认真的，要不然你还能从哪里开始呢？
• HTML5: 制定者的草案，关于这一整套该死的标准。
• 深入了解HTML5: 由一个程序员撰写，在他尚未完工的工作中它通过代码向我们细致地阐述了HTML5的不同之处。
• HTML5 Supersedes论坛2.0: 一份很好的阅读材料，关于HTML5在web表单方面的变动（我还没有非常理解，所以没办法向你准确表达）
• 未来的HTML 5 （作者：Bruce Lawson）:用有趣，易于理解的图片向我们讲解HTML对web来说究竟意味着什么。

再说说翻译方面，只翻了一遍，没有进行过返工，感觉不好。但也就放这了，本人就是这个水平。其中有一句感觉特别难把味道翻出来：

That pronouncement was, to put it mildly, roundly mocked.

这句话意思是说：Apple发表声明说支持这个标准以后，很多公司也趋之若鹜。但其实也没有趋之若鹜那么夸张，只是表达一下跟进的公司之多的意思。主要是to put it mildly这个短语，难以翻译。Google Dictionary给出的解释是：

You use to put it mildly to indicate that you are describing something in language that is much less strong, direct, or critical than what you really think.

大家觉得怎么翻比较好？

最后做点笔记：

nuts and bolts：the basic practical details of a subject or an activity；基本要素;具体细节

brethren：brother的复数形式，装B词汇，须牢记。

nitty-gritty：If people get down to the nitty-gritty of a matter, situation, or activity, they discuss the most important, basic parts of it or facts about it.【俚】(问题的)核心;基本的事实;本质

as it stands：as something is now, without changes to it
e.g : The law as it stands is very unclear. As it stands, the Panel’s decisions can be reviewed by the courts.

Related Posts

• （译文）关于排队的技巧(2)
• 一种丈量法(3)
• Repel Flies with a Bag of Water(2)
• Reading Note--about Family Relationship(0)
• (译文)如何设置Ubuntu的swap区(4)
• 安装Ubuntu和XP双系统(9)
• (译文)Carnivorous Plants(0)
• (译文)A new approach to China: an update(2)
• (译文)5 Buzz tips(1)
• Stop Google Buzz Leaking Your Privacy(1)

Recent Comments

• anonymous : 婉转地说，很多公司对此进行了彻底的“模仿”。 哈哈，其实这里的put it mildly，...
• T : @anonymous 是整句翻译哦，词组的意思我也知道。
• anonymous : put it mildly 说得好听点，说得委婉点~~~

© T for 知易行难,知行合一 (Walk the Talk), 2009. | Permalink | 3 comments
Post tags: html, html5, lifehacker, 翻译

简单复述一下问题：希望实现一张2行的表格，其中第1行为2列。

错误html如下：


<table border=”0″>
<tbody>
<tr>
<td>111111111111111111111</td>
<td>111111111111111111111</td>
</tr>
<tr>222222222222222222222222222</tr>
<tr>333333333333333333333333333</tr>
</tbody></table>


效果如下：

222222222222222222222222222333333333333333333333333333

111111111111111111111	111111111111111111111

正确的html应该这么写

<table border=”0″>
<tbody>
<tr>
<td>111111111111111111111</td>
<td>111111111111111111111</td>
</tr>
<tr>
<td colspan=2>222222222222222222222222222</td>
</tr>
<tr>
<td colspan=2>2333333333333333333333333333</td>
</tr>
</tbody></table>

关键在于少了粗体的红字部分代码。每个<tr>标签（表示一行）中必要内嵌<td>标签（表示一列），即使行内只有一列，但光这样是不够的，效果会变成这样：

111111111111111111111	111111111111111111111
222222222222222222222222222
2333333333333333333333333333

也就是说第二、第三行无论多长都会和第一行的第一列等宽。所以这里还需要加上colspan，这个是什么意思的呢？它规定单元格可横跨的列数，colspan=2即意味着单元格可横跨两列，现在全部代码补齐以后，表格就正常了。

111111111111111111111	111111111111111111111
222222222222222222222222222
2333333333333333333333333333

O.K. Well done~

p.s : 更多关于<colspan>的介绍请参见这里，w3school，一个很强大的web技术教程网站。

Related Posts

• 一个解决不了的简单问题(5)
• How to change the hints settings of Pentadactyl(0)
• Set SSL Google as the Default Search Engine when using Pentadactyl in Firefox(0)
• Fix the Problem which Ubuntu Cannot Root Itself(1)
• Some Ubuntu Tips(4)
• 几个关于WordPress里留言回复的邮件通知的问题(8)
• How to Delete WordPress Post Revisions (2)
• （译文）How HTML5 Will Change the Way You Use the Web(3)

Recent Comments

• langxue : tr=table row td=table date 其实了解了这个缩写就很容明白了。tr是...
• anonymous : 今天不更新？~~~
• anonymous : 你具有追根刨底， 打破砂锅问到底的精神！ 我虽然不懂，但是我觉得， 简单的问题复杂化，吃透弄懂了...
• Yin : 精神可嘉！

© T for 知易行难,知行合一 (Walk the Talk), 2009. | Permalink | 4 comments
Post tags: code, html


<table border=”0″>
<tbody>
<tr>
<td>111111111111111111111</td>
<td>111111111111111111111</td>
</tr>
<tr>222222222222222222222222222</tr>
<tr>333333333333333333333333333</tr>
</tbody></table>

我想实现的是一个三行的表格，其中第一行有两列。

但产生的实际效果如下所示：

看出毛病了吗？

1. 第二、第三行没有分隔开。
2. 第二、第三行跳到了第一行前面。

我觉得一定是哪里犯低级错误了，可是我还真没找出来。。

所以。。

求解！

Related Posts

• HTML中的表格问题(4)
• How to change the hints settings of Pentadactyl(0)
• Set SSL Google as the Default Search Engine when using Pentadactyl in Firefox(0)
• Fix the Problem which Ubuntu Cannot Root Itself(1)
• Some Ubuntu Tips(4)
• 几个关于WordPress里留言回复的邮件通知的问题(8)
• How to Delete WordPress Post Revisions (2)
• （译文）How HTML5 Will Change the Way You Use the Web(3)

Recent Comments

• T : @蓝冰 哈，解决了哟，这里
• 蓝冰 : 不懂，飘过。
• T : @冰古 sigh, 也许是，也许不是，手头暂时没有网页编辑器。有空了随便去试一下。
• 冰古 : 你把代码放到单独的html上试试。WordPress可能会改变代码的。

© T for 知易行难,知行合一 (Walk the Talk), 2009. | Permalink | 5 comments
Post tags: code, html