vue学习 第十天(2) HTML5的新特性 ----- 语义化标签(布局标签)/ 多媒体标签(video、audio)

发布时间 2023-05-03 21:04:57作者: code口德

目标

  能够说出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新增的表单属性