一.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: 当信息无法验证通过的时候触发该事件
网友评论