首页 > Web开发 > 详细

html5新增语义化标签

时间:2019-09-03 19:51:03      阅读:76      评论:0      收藏:0      [点我收藏+]

  新增语义化标签

  • <header>:头部标签
  • <nav>:导航标签
  • <article>:内容标签
  • <section>:块级标签
  • <aside>:侧边栏标签
  • <footer>:尾部标签
  • <audio>:音频标签
  • <video>:视频标签

  1.音频标签(audio)

  <audio src=" snow.mp3" ></audio>

  属性值:autoplay=autoplay,音频自动播放

      controls=controls,显示播放控件

      loop=loop,循环播放         

  audio 在不同浏览器存在兼容性问题,解决这一问题,需要为音频准备多个格式,视频同理。

  <audio>

    <source  src="snow.mp3"  type=" audio/mpeg " >

    <source  src="snow.ogg"  type=" audio/ogg "  >

  </audio>

  2.视频标签(video)

  <video  src="snow.mp4" ></video>

   属性值:autoplay = autoplay,自动播放

       controls = controls,显示控件

       width = 200px,height = 200px ,设置播放器宽度和高度

       loop = loop,循环播放

       preload = auto / none ,预先加载视频 / 不应加载视频(若有autoplay 则忽略该属性)

       poster = Imgurl ,加载等待的画面图片

       muted = muted , 静音播放(谷歌浏览器常用)

  谷歌浏览器对于视频文件,禁止播放功能,解决方法 添加 静音属性,音频暂时没有解决方法

  注意:

  • 这种语义化标签准主要针对搜索引擎
  • 这些新标签页面中可以使用多次
  • 在 IE9 中,需要把这些元素转换为块级元素
  • 移动端更喜欢使用这些标签

 

html5新增语义化标签

原文:https://www.cnblogs.com/qtbb/p/11454866.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!