HTML5十五大新特性（二）

7.重新定义 (Small Element redefined)

在HTML4或XHTML中，元素已经存在。然而，却没有如何正确使用这一元素的完整说明。在HTML5中，被用来定义小字。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<</span>small>可以正确地诠释这些信息。 

8.占位符 (Placeholder)

在HTML4或XHTML中，你需要用; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">来给文本框添加占位符。比如，你可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。

而在HTML5中，新的“placeholder”就简化了这个问题。

9.必要属性 (Required Attribute)

HTML5中的新属性“required”指定了某一输入是否必需。有两种方法声明这一属性。

 

1. <</span>input type="text" name="someInput" required> 

2. <</span>input type="text" name="someInput" required="required">  

当文本框被指定必需时，如果空白的话表格就不能提交。下面是一个如何使用的例子。

 

1. <</span>form method="post" action=""> 

2. <</span>label for="someInput"> Your Name: </</span>label> 

3. <</span>input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> 

4. <</span>button type="submit">Go</</span>button> 

5. </</span>form>  

在上面那个例子中，如果输入内容空且表格被提交，输入框将被高亮显示。

10.Autofocus 属性 (Autofocus Attribute)

同样，HTML5的解决方案消除了对; letter-spacing: 0pt; font-size: 10.5pt; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> 

 

1. <</span>input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>  

11.Audio 支持 (Audio Support)

目前我们需要依靠第三方插件来渲染音频。然而在HTML5中，元素被引进来了。

 

1. <</span>audio autoplay="autoplay" controls="controls"> 

2.      <</span>source src="file.ogg" /> 

3.      <</span>source src="file.mp3" /> 

4.      <</span>a href="file.mp3">Download this file.</</span>a> 

5. </</span>audio>  

当使用元素时请记得包含两种音频格式。FireFox想要.ogg格式的文件，而Webkit浏览器则需要.mp3格式的。和往常一样，IE是不支持的，且Opera 10及以下版本只支持.wav格式。

12.Video 支持 (Video Support)

HTML5中不仅有元素，而且还有。然而，和类似，HTML5中并没有指定视频解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9可以支持H.264格式的视频，Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，指定HTML5的视频时，你必须提供这两种格式。 

 

1. <</span>video controls preload> 

2. <</span>source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> 

3. <</span>source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> 

4. <</span>p> Your browser is old. <</span>a href="cohagenPhoneCall.mp4">Download this video instead.</</span>a> </</span>p> 

5. </</span>video>  

13.视频预载 (Preload attribute in Videos element)

当用户访问页面时这一属性使得视频得以预载。为了实现这个功能，可以在元素中加上preload="preload"或者只是preload。

 

1. <</span>video preload>  

14.显示控制条 (Display Controls)

如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。 

 

1. <</span>video preload controls>  

 

1. <</span>form action="" method="post"> 

2. <</span>label for="username">Create a Username: </</span>label> 

3.     <</span>input type="text" 

4.     name="username" 

5.     id="username" 

6.     placeholder="4 <> 10" 

7.     pattern="[A-Za-z]{4,10}" 

8.     autofocus 

9.     required> 

10. <</span>button type="submit">Go </</span>button> 

11. </</span>form>  

15、拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

16、   Geolocation（地理定位）

HTML5 Geolocation（地理定位）用于定位用户的位置。

17、HTML5 Web 存储

客户端存储数据的两个对象为：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

18、HTML5 应用程序缓存

.appcache">


文档内容......

19、HTML5 WebSocket

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

结论

事实上，还有很多新元素和特性，上面提到的只是一些我认为网站开发中常用的，剩下的就由你们自己去摸索啦。