HTML5学习(一 关于标签部分)

今天学习了HTML5新增的一些标签做做小结。
1.h5新增的一些常见语义化标签

  • header — 头部标签
  • nav — 导航标签
  • article — 内容标签
  • section — 块级标签
  • aside — 侧边栏标签
  • footer — 尾部标签
    在这里插入图片描述
    补充几点:
  • 语义化标签主要针对搜索引擎
  • 新标签可以使用一次或者多次
  • IE9 浏览器中,需要把语义化标签都转换为块级元素
  • 语义化标签,在移动端支持比较友好,

2.新增的多媒体标签
第一个:<audio> 音频标签
支持的格式:
在这里插入图片描述
然后还有audio标签的参数:
在这里插入图片描述
注意 谷歌浏览器将autoplay属性禁止了。
因为不同浏览器支持不同的格式,所以我们采取的方案是这个音频准备多个文件,实现的代码:

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

第二个:<video> 视频标签
支持格式:
在这里插入图片描述
然后还有video的参数:
在这里插入图片描述
注意:我们如果给一个静音播放的属性后,就可以让谷歌浏览器不禁止autoplay属性。
解决不同浏览器支持不同格式的问题的代码:

  <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>

3.新增input标签
在这里插入图片描述
这些标签可以让我们更加方便的使用不同的规则。

4.新增表单属性
在这里插入图片描述
placeholder属性可以让我们代替以前在表单中直接使用value值,用户体验更好。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值