HTML5 新增标签

1. H5 新增了语义化标签

  • header — 头部标签
  • nav — 导航标签
  • article — 内容标签
  • section — 块级标签
  • aside — 侧边栏标签
  • footer — 尾部标签

HTML5 新增标签_第1张图片
3. 使用语义化标签的注意

- 语义化标签主要针对搜索引擎
- 新标签可以使用一次或者多次
- 在 `IE9` 浏览器中,需要把语义化标签都转换为块级元素
- 语义化标签,在移动端支持比较友好

2.多媒体音频标签

  1. 多媒体标签有两个,分别是
  • 音频 – audio
  • 视频 – video
  1. audio 标签说明
  • 可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,
  • 但是:播放格式是有限的
  1. audio 支持的音频格式
    • audio 目前支持三种格式
      HTML5 新增标签_第2张图片

4 audio 的参数
HTML5 新增标签_第3张图片

5、audio 代码演示

<body>
  
  

  
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  audio>
body>
四、多媒体视频标签
  1. video 视频标签
    • 目前支持三种格式
      HTML5 新增标签_第4张图片
      语法格式
<video src="./media/video.mp4" controls="controls">video>

video 参数
HTML5 新增标签_第5张图片
video 代码演示

<body>
  

  
  <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>
body>
  1. 多媒体标签总结
  • 音频标签与视频标签使用基本一致
  • 多媒体标签在不同浏览器下情况不同,存在兼容性问题
  • 谷歌浏览器把音频和视频标签的自动播放都禁止了
  • 谷歌浏览器中视频添加 muted 标签可以自己播放
  • 注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册
    五、新增 input 标签
    HTML5 新增标签_第6张图片
    六、新增表单属性
    HTML5 新增标签_第7张图片

你可能感兴趣的:(大前端,html,html5)