现在如何在你的站点上使用HTML 5(2)

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>