Tag Archives: html

(译文)How HTML5 Will Change the Way You Use the Web

来源:Lifehacker

原文链接:点击这里


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,拖曳工具,讨论板,实时聊天,搜索框等等)从容地在任何站点构建起来,在浏览器里相互协同工作。

Continue reading

HTML中的表格问题

前两天碰到的问题,现在终于知道毛病出在哪里了,确实是自己没把HTML的各个标签吃透。

简单复述一下问题:希望实现一张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技术教程网站。

一个解决不了的简单问题

先看一段非常简单的代码,真的非常简单,懂一点皮毛的html即可


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

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

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

222222222222222222222222222333333333333333333333333333
111111111111111111111 111111111111111111111

看出毛病了吗?

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

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

所以。。

求解