html5新增语义化标签

　　新增语义化标签

• <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 中，需要把这些元素转换为块级元素
• 移动端更喜欢使用这些标签

 

标签：标签,音频,语义,controls,html5,播放,loop,autoplay
来源： https://www.cnblogs.com/qtbb/p/11454866.html