首页 > 其他 > 详细

1. H5新增语义化标签

时间:2019-12-23 20:09:51      阅读:99      评论:0      收藏:0      [点我收藏+]

1.新增语义化标签

- <header>:头部标签
- <nav>:导航标签
- <article>:内容标签
- <section>:块级标签
- <aside>:侧边栏标签
- <footer>:尾部标签

注意:

  • 这种语义化的标签主要针对搜索引擎
  • 这些新标签,页面中可以重复使用
  • 在IE9中,需要把这些元素转换为块级元素,否则不可以使用,在IE9中,这些元素都默认是行内元素,给大小是没有用的。
  • 在移动端更喜欢使用这些标签,在PC端很少使用这些标签。
  • H5还增加了很多其他标签,后面再学。

2.新增多媒体标签

多媒体标签包含两个,具体如下:

- 音频:<audio>
- 视频:<video>

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

2.1 音频格式

当前,audio元素支持三种音频格式:Ogg、MP3、Wav
技术分享图片

audio的几个属性:
技术分享图片

<body>
    <audio src="media/lost_star.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
    <!-- controls向用户显示播放控件,不同浏览器显示的控件样式不一样,且不可修改 -->
    <!-- 谷歌浏览器把autoplay自动播放功能给禁用了 -->
    <!-- loop不写则默认播放一遍,写上loop="loop"则表示无限循环播放 -->
</body>
body>
    <!-- 由于不同浏览器支持不同格式,我们采取的解决方法:我们为这个音频准备多个格式 -->
    <audio controls="controls" autoplay="autoplay" loop="loop">
        <source src="media/lost_star.mp3" type="audio/mpeg">
        <source src="media/lost_star.ogg" type="audio/ogg">
            <!-- 若以上两种格式都不支持,则会显示下面这句话 -->
        您的浏览器太low了 不支持audio播放!
    </audio>
</body>

1. H5新增语义化标签

原文:https://www.cnblogs.com/deer-cen/p/12085322.html

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