HTML5新增标签 + 智能表单

一.HTML5的新增语义标签

1. 全新语义化标签

• <section>:用来定义文档或应用程序中的区域或章节.
• <nav>:用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域.
• <article>用来包裹独立的内容片段,通常用来包裹文档中文章.
• <aside>:用来表示与页面主内容松散相关的内容,常被用来用作侧边栏的部分.
• <hgroup>:如果页面中有一组使用<h1>,<h2>,<h3>等标签的标题,标语和副标题, 则可以使用该标签进行包裹.HTML5的大纲结构算法会自动组织好大纲.
• <header>:被用作网页的页眉部分
• <footer>:被用作网页的页脚部分

2.语义化标签的兼容性问题

在IE低版本浏览器中,无法识别HTML5的新增标签,所以使用HTML5进行的页面布局会全部无效.这里推荐使用Modernizr来解决兼容性问题

Modernizr是一个用于检测浏览器功能的开源JavaScript库.包括Twitter,微软和谷歌都在使用Modernizr作为兼容性的解决方案.

2.1 下载Modernizr：http://www.modernizr.com

2.2 引用Modernizr

Modernizr作为一个JavaScript的库,引用方式和jQuery一样,都是在<script>标签中进行引用,代码如下:

<script src="js/modernizr.js"> </script>

2.3针对IE低版本浏览器增加垫片脚本

因为我们在高版本浏览器中并不需要使用Modernizr进行兼容性方案的解决,所以,我们只需要针对IE8以下浏览器引用上述的js文件,代码如下:

<!--[if lts IE 8]>
    <script src="js/modernizr.js"></script>
<![endif]-->

二.HTML5中的多媒体

1. 多媒体标签

1.1 <video>

HTML <video>标签用于在HTML文档中嵌入视频文件.

1.2 <audio>

HTML <audio>标签用于在HTML文档中嵌入音频文件.

1.3 文件格式的兼容性问题

由于专利的问题，不同的浏览器对HTML5的video和audio有不同的规范和实现；所以,多媒体的文件格式的不同会在不同浏览器中出现兼容性问题.通常使用<source>元素来解决.
1.3.1 <video>的兼容性解决方案

<video controls>
<source src = "yourvideo.webm" type="video/webm">
<source src = "yourvideo.mp4" type="video/mp4">
</video>

1.3.2 <audio>的兼容性解决方案

<audio controls>
<source src = "youraudio.ogg" type="audio/ogg">
<source src = "youraudio.mp3" type="audio/mp3">
</audio>

2. 多媒体常用属性

1.autoplay
布尔属性;指定后，视频会马上自动开始播放，不会停下来等着数据载入结束.

2.control
加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放.

3.loop
布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方.

4.muted
布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false,意味着视频播放的时候音频也会播放.

5.src
要嵌到页面的视频的URL。可选；你也可以使用 <source> 元素来指定需要嵌到页面的文件。

三.HTML5中的智能表单

1. 表单新增输入类型

• type="email":指定用户输入符合电子邮箱格式的值,如果提交一个不符合电子邮箱格式的值是,浏览器会生成警告信息.
• type="number":指定用户输入数字类型的值.
• type="tel": 对格式没有要求,只是在针对移动端上,对点击后跳出数字键盘.
• type="color":在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值
• type="date:在支持该特性的浏览器中生成一个日期选择器.
• type="month:在支持该特性的浏览器中生成一个月份选择器.
• type="week:在支持该特性的浏览器中生成一个选择器,选择器允许用户选择一年中的某一周.
• type="time:允许用户输入一个24小时制的时间值,在支持该特性的浏览器中会生成一个加减控制按钮.
• type="range和:生成一个滑动条,默认的输入范围是0到100.

2. 表单新增属性

• placeholder: 在表单域中显示占位符
• required:表明该表单必填,如果表单提交时,必填项没有任何信息,浏览器则会显示警告信息.
• autofocus:让表单在加载完成时就有一个表单被默认选中,方便用户输入
• autocomplete:帮助用户根据历史输入信息自动完成输入
• list 和 <datalist>:list属性中的值同时也是<datalist>中的id,这样就可以让<datalist>与输入项关联起来,在用户开始输入的时候,输入框下面就会显示一个数据选择框,其中包含从<datalist>中检索到的匹配数据.
• multiple:规定<input>元素可以选择多个值.
• pattern:描述了一个正则表达式用于验证<input>中的值.

3. 表单事件

• oninput : 当用户输入内容的时候触发该事件
• oninvalid: 当信息无法验证通过的时候触发该事件