前两天写过初级技巧的一和二，今天就来和大家分享html5的初级技巧（三）

1、音频播放的支持

html5中提供了<audio>标签，解决了以往必须依靠第三方插件才能播放音频文件的问题。目前为止，还只有少数的最新浏览器支持该标签。

<audio controls="controls" autoplay="autoplay">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>

Firefox和Webkit浏览器所支持的格式存在差异，Firefox只能支持.ogg文件，而Webkit只支持.mp3的文件。

2、视频播放的支持

和<audio>标签一样，HTML5也提供了<video>标签对播放视频文件的支持。不过有点遗憾，HTML5的规范并没有指定特定的视频解码器，而是让浏览器自己来决定。这就造成了个浏览器的兼容问题。

<video>
<source src="cohagenPhoneCall.ogv" type="video/ogg"; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<div> your browser is old. <a href="cohagenPhoneCall.mp4">download this video instead.</a> </div>
</video>

3、预加载视频

预加载属性：preload，首先要确定是否需要预先加载视频，假如，访客在访问一个有很多视频展示的页面，那么就有必要预先加载一段视频，这样可以节省访客的等待时间，提高用户体验。你可以给<video>标签添加一个preload属性来实现预先加载的功能。

<video preload="preload">
...
</video>

4、显示控件

显示控件属性可以给视频添加一个播放暂停的控件，需要注意的是每个浏览器显示的效果可能会有些差异。

<video controls="controls" preload="preload">
...
</video>

5、使用正则表达式

在HTML5中，我们可以直接使用正则表达式。

<form method=post action="">
<label for="username">create a username: </label>
<input id="username" type="text" name="username" placeholder="4 <> 10" required="required"        autofocus="autofocus" pattern="[A-Za-z]{4,10}">
<button type="submit">Go </button>
</form>

6、检测浏览器对HTML5属性的支持

由于各浏览器对HTML5属性的支持度不同，这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性，上例中的代码如果要检测pattern属性是否被浏览器识别，可以使用Javascript代码来检测。

alert( 'pattern' in document.createElement('input') ) // boolean;

其实这是确定浏览器兼容常用的方法，jQuery库就经常使用这种方法。上面的代码中创建了一个input标签，并检测pattern属性是否被浏览器支持，如果能支持的话，浏览器就支持这个功能，否则就不支持。

<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>

6、Mark标签

<mark>标签用于高亮显示那些需要在视觉上向用户突出其重要性的文字，包裹在此标签里的字符串必须与用户当前的行为相关。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。

<h3> search results </h3>
<h6> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </h6>

7、如何正确的使用div标签

有些人可能会有疑问，有了<header>和<footer>等这些标签，<div>标签在HTML5中还有用吗？答案是肯定的，比如你想创建一个能包裹特殊内容的容器自由灵活的<div>肯定是首选，而你要创建一篇文章或者一个导航菜单，建议你使用更有语义的<article>和<nav>标签。