vue学习第10天（2） HTML5的新特性 ----- 语义化标签（布局标签）/ 多媒体标签（video、audio）/ 新增的input类型（email、number等）

目标：

　　能够说出3～5个HTML5 新增布局和表单标签

　　能够说出CSS3的新增特性有哪些

 

　　　　　　　　　　　　　　　　　　HTML5的新特性

 

HTML的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

新特性都有兼容性问题，基本是IE9 + 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

声明：

　　1。新特性增加了很多，但我们专注于开发常用的新特性。

 

1、HTML5新增的语义化标签

　　以前布局，基本用div来做。div对于搜索引擎来说，是没有语义的。

　　布局标签： <header> 头部、 <nav>导航 、  <article>内容 、  <section> 、  <aside>侧边栏、  <footer>尾部

　　

 

2、HTML5新增的多媒体标签

　　1）视频<video>

　　2）音频 <audio>

　　使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。 

　　HTML5在不使用插件的情况下，也可以原生的支持视频格式文件的播放， 但是支持的格式有限 （MP4、WebM、Ogg）

　　1）video视频　　

　　　　a）视频<video> 元素支持3种视频格式。 mp4在各个浏览器都能用。推荐

　　　　

 

 　　　　b）视频<video>-- 常见属性

 　　　　

 

　　2）音频<audio> 

　　　　 a）支持的格式有限，多数都是支持 MP3格式的

　　　　

 　　　　b）音频常见属性。谷歌浏览器将音频和视频的自动播放禁止了。

　　　　

 

 　　3）多媒体标签总结

　　　　音频标签和视频标签使用方式基本一致

　　　　浏览器支持情况不同

　　　　谷歌浏览器把音频和视频自动播放禁止了

　　　　我们可以给视频标签添加muted属性来静音播放视频，音频无法无妨。但可以通过js解决

　　　　视频标签是重点，我们经常设置自动播放，不是用controls控件，循环和设置大小属性

 

　　　　　　　　　　　　　　　　H5 新增的input类型

1、表单input标签新增type属性值，限制用户输入

　　

 

2、 H5新增的表单属性