代码改变世界

让你的网站融入HTML5的元素[转]

2012-02-22 10:05  VVG  阅读(280)  评论(0)  编辑  收藏  举报

　　我们已经看过许多关于HTML 5的文章了，但是，对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它?本文将带您了解如何在你的站点上使用HTML 5。

　　已经有许多文章是关于HTML 5的了，例如“HTML 5时代来临”和“HTML 5会如何改变网络”之类的，但是对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它?好消息是现在已经有不少的HTML 5里的东西可以使用了。

　　但是，开始你就必须要明白一件事情，你需要知道你的受众如何，否则的话你就不该使用HTML 5。假如你的站点的访问大部分人都是在使用IE 6，那么你完全没有任何理由使用HTML 5。另一方面，如果你站点的访问者都是使用手机浏览器，如iPhone和iPad，那么你还在等什么呢?马上就可以开始动手了!等等，这里有一些准则，看 完再动手不迟。

你现在可以使用哪些HTML5特性?

虽然HTML 5标准现在仍然是个草案，在标准化组织手里依然还在商讨，但是重要的部分已经被许多现代的浏览器实现了。Apple Safari, Google Chrome, Mozilla Firefox, Opera和Microsoft IE 9都已经很好的支持了HTML 5的部分特性。先来看看各浏览器在HTML 5 TEST网站上的得分如何：

* Apple Safari 5.0: 208

* Google Chrome 5.03: 197

* Microsoft IE7: 12

* Microsoft IE8: 27

* Mozilla Firefox 3.66: 139

* Opera 10.6: 159

看起来很明显，非IE核心的主流浏览器大部分都对HTML 5支持良好，它们可以使“使用了HTML 5草案的网站”工作得很好。回到开始，你现在就可以使用HTML5的doctype了，没有理由不使用，你甚至可以在整个网站里进行查询和替换：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

变为：

<!DOCTYPE html>

<html>

　　下面这部分代码看起来更简洁和直接，不是吗?如果浏览器用一个标准兼容的方式来渲染你的网页，那么他们现在仍然会这么做。说说视频吧。许多关于 HTML5的出版物都会提及到目前的竞争者，一共四个：Flash, H.264， OGG和WebM。所有这些在未来都有可能成为一个标准格式，而且没有一个可以在所有平台所有浏览器上正确播放，很悲哀吧，看起来，浏览器的赞助商们在短 时间内还没有为这个特性准备一个公共的格式。

　　所以，显而易见的是，Video标签现在还没有到可以应用的阶段。但是等下，人们应该期待 HTML5的视频标签是与格式无关的。事实上，因为视频可 以包含多个Source标签，它也必须得这样工作。如果你的浏览器不支持第一个选项，那么就会去尝试第二个，再第三个，四个，五个……

　　处理这样的情况的HTML是一个开源项目，支持基于网络的视频，不使用任何脚本和浏览器嗅探，可以在这里找到。从语义上讲，HTML5的一个大的改变就是那些语义明确化的标签。可以看到的改变是，目前你的站点上充满了类似于这样的代码：

<div id=”header”> <span class=”nav”>

而在HTML5中，你可以这样表示：

<header> <nav>

是不是语义更明确?

当然，我们还是要用CSS[层叠样式表]来格式化这些元素。但是等等，没有一个IE版本可以支持这些标签!这对于人们来说是一个 巨大的问题!我们真的这么倒霉吗?谢天谢地，我们还有一个解决方案：所有你需要做的事情就是把下面的代码粘贴到你的页面的HEAD标签里：

<!–[if lt IE 9]>

<script src=

“http://html5shiv.googlecode.com/svn/trunk/html5.js”>

</script>

<![endif]–>

HTML5 Shiv是一个开源的项目，基于一个简单的发现：

如果你在IE里创建了一个DOM元素，那么你就可以用那个名字在样式里使用。例如，如果你使用：

document.createElement(“foo”)

创建了一个DOM元素，那么你就可以在当前页面里加入任意数量的foo标签，而且IE会格式化它们。HTML5 Shiv里包含了一些IE不能识别的HTML5元素，然后一个一个的去创建它们。这样你就可以使用这些HTML5标签了，例如：

Article, Section, Header, Footer, Nav

智能表单，另一个使HTML5更聪明的特性。如果你对于每次写同样的脚本去检查邮件地址的合法性或者类似于电话号码、网络地址之类的感到厌烦的话，那么你不是一个人!有理由去让浏览器去完成这些烦人的工作，不是吗?相当正确。

下面是语法：

<input type=”email”>

<input type=”url”>

<input type=”number”>

<input type=”tel”>

那些旧的浏览器会如何处理?比较聪明的部分：如果它们看到一个TYPE属性有个值不认识的话， 那么它们就会用默认值Text去渲染这个元素，这正是我们所期望的向下兼容的结果。支持HTML5的浏览器会自动去验证这个字段类型，但是，你最好还是不 要把以前的脚本扔掉，至少——也要在IE9普及以后。

如果你还想知道除了验证之外，支持这些类型的浏览器还做了些什么事情，那么你可以在 iPhone上试试这些表单。你会注意到与表单关联的键盘类型都 会发生变化，有的时候是数字类型的，有的时候是字母类型但附加了一个@符号，还有的甚至直接有一个按键.com，这就是这些元素的魔力。所有你需要做的就 是改变这个type的属性值而已。还可以更智能一点，这里还有个新属性：

placehoder

　　这个值可以简单地指定一段文本，你经常在网上看到的效果，没值的时候显示此文本，单击的时候值变成空，离开又恢复成该文本，以前要用到Javascript处理，现在浏览器会为你做这个事情了。

<input type=”email” placeholder=”Your email address”>

有哪些HTML5特性你马上就可以使用?

　　不是所有的HTML5元素都已经准备好可以使用了，因为种种原因(这些原因是没有一个缩写为 IE 的)，浏览器支持马上就要来了，在不远的未来，你马上就有两个元素可以使用了。

　　魔幻字体，每个设计师都有一个梦想，希望站点的访问者们都安装了他们在设计时所需要的字体，为此，以前可谓手段 百出，用图片，Flash等等不一而足，现在，他们拥有了这个权利，你可以强制你的访问者安装你指定的字体了。这就是CSS3的支持： @font-face属性。Firefox 3.5以前的版本和Safari的移动版本(iOS 4之前)不支持这个属性，如果你的站点有很多这样类似的访问，那么你可能就得等等了。

　　无论如何，其实没有真正的理由，让所有的浏览器都使用同一种字体的。如果你想提供给那些支持此属性的浏览器以自定义字体，然后让不支持此属性的浏览 器有一个可替代的字体也是一个不错的解决方案，这个时候，Font Squirrel’s @font-face 生成器 是个不错的去处。

　　阴影和圆角，让很多设计师高兴的东西来了，文本阴影、区块阴影，区块圆角特性等现在都CSS3支持的标准了。再说一次，如果你不想用像素级别的完美来衡量在不同浏览器中的渲染的话，那么你现在就可以开始使用这些特性了。CSS3 生成器 会帮助你做好这事。

圆角 (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+)

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

 

 

文本阴影 (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+)

 

text-shadow: 5px 5px 3px #CCC;

第一个参数为水平位移
第二个参数为垂直位移
第三个参数为阴影大小
第四个参数为阴影颜色

 

区块阴影(Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+):

-webkit-box-shadow: 10px 10px 5px #666;

-moz-box-shadow: 10px 10px 5px #666;

box-shadow: 10px 10px 5px #666;

 

 

哪些特性有一天你会用到?

这个目录里包含了开发人员和设计师已经想了很多年的特性。可惜的是，在它们能够在现实世界真正使用之前，可能还得再等上几年时间。智能表单，前面已经提到过了，但是其实还有很多更好用的元素没有提及，但在更广泛的支持之前，是没有办法使用的。

滑动选择器：

　　<input type=”range” min=”0″ max=”100″ step=”2″ value=”50″>

颜色选择器：

　　<input type=”color”>

日期选择器：

　　<input type=”date”>

带有正则验证的输入框：

　　<input type=”text” pattern=”[0-9]{13,16}”>

必须输入的输入框:

　　<input type=”text” required>

所有这些标签都没有跨浏览器，跨平台实现支持，不过当那天到来的时候，你一定会很向往使用这些标签的。打印式布局，另一个CSS3的特性，全面实施尚需好几年的时间。给设计师们提供了多列布局的特性。目前只能在Firefox和Safari的测试用例里实现。

-moz-column-count: 3;

-moz-column-gap: 20px;

-webkit-column-count: 3;

-webkit-column-gap: 20px;

　　地理位置检测，随着基于位置的服务增长，例如Gowalla和Foursquare，对于浏览器来说，知道用户 在哪里是很有用的。所以，基于手机的移动浏览器率先实现这个特性也就不足为奇了，Firefxo 3.5和Safari 5已经开始提供地理定位的支持了。(Chrome的类似服务是通过Gears实现的，不过正在逐步转向到HTML5上面)。

　　离线工作和本地存储，在你没发现你没有网络连接的时候，将数据存储在云端是非常伟大的主意;或者你有一个应用程 序，需要处理大量的数据，这样就不得不频繁地在服务端和客户端之间往来，比你想像得到的还要多;又或者你的移动数据流量有限，你想在手机上存储更多的数据 以避免太多的流量损耗，这个时候的答案就是，使用本地储存来使应用程序离线工作，当连线的时候再同步到云端的功能。

支持此功能的浏览器有：Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+。

画板、动画和变换效果，HTML 5的承诺之一使用Canvas元素和一些CSS3属性可以实现是全说明和全动画的网站。这来自2010年7月12号的标准。

 

HTML 5

使用最尖端的HTML 5的捷径

 

　　如果你已经迫不及待地想IE 8老死掉，那么，有很多种方法可以跳过它继续往前——再说一次，依然取决于你的访客。查看一下你的站点的访问日志，看看 访问量最多的浏览器标头是什么。这其中有一种方法就是，例如，使用Google的Chrome Frame，给IE嵌入了一个Chrome实例，如果你明白你站点的访问者可能已经安装了GCF[Google Chrome Frame]，那么你可以在你的HEAD里加上一行META标签，强制IE浏览器使用GCF来显示你的网站：

<meta http-equiv=”X-UA-Compatible” content=”chrome=1″>

　　再加上一小段的Google提供的脚本，可以让没有安装GCF的用户跳转到GCF的安装页面，那么你也许可以跳过IE的限制。列举在本篇文章里的元 素只是当前HTML 5和CSS 3草案中的一小部分，如果你不得不使用另外的一些新特性，那么去检查一下现有的开源项目是很有必要的，这样可以将浏览器兼容性的问题降到最低。

　　许多媒体在报道HTML的时候都把焦点放在立场上面，什么“不到2022年”，什么“Flash杀手”之类的。现实是，HTML 5是长期以来的需要和对久未更新的HTML 4的一次全新升级——所以，今天你就可以开始使用它了。

This entry was posted in 开发技术 and tagged HTML5 by luokelong. Bookmark the permalink.