2day-HTML5新增语义化标签

新增语义化标签

新增结构标签

标签	说明
header	定义网页头部
hgroup	定义对网页标题的组合
nav	定义导航栏
section	定义文档的区段
time	定义日期和时间
article	定义文章
aside	定义文章侧边栏
footer	定义页面底部
figcaption、figure	figure：定义一组媒体对象、文字 figcaption：定义 figure 的标题

新增的语义化结构标签在开发中可以替换频繁过度使用的div标签，用这些标签来进行页面的划分。

  <div class="box">
    <div>header</div>
    <div>nav</div>
    <div class="main">
      <div class="main_left">
        <div class="left_head"></div>
        <div class="left_content"></div>
        <div class="left_foot"></div>
      </div>
      <div class="main_right">
        侧边栏
      </div>
    </div>
    <div class="footer"></div>
  </div>

  <div class="wrap">
    <header></header>
    <nav></nav>
    <section>
      <section>
        <header></header>
        <article></article>
        <footer></footer>
      </section>
      <aside></aside>
    </section>
    <footer></footer>
  </div>

频繁的使用div进行布局，并不利于后续开发人员的维护，没法从直观上的布局了解到页面的结构。另外对搜索引擎（SEO）也不太友好。因为div对搜索引擎来说是一个无意义的标签

新增功能元素

• video：定义视频
• audio：定义音频

audio 音频标签

可以在src设置本地或网络音频

  <audio controls autoplay muted>
    <source src="./周杰伦、温岚 - 屋顶.mp3" type="audio/mp3">
    <source src="./周杰伦、温岚 - 屋顶.ogg" type="audio/ogg">
  </audio>

除了可以使用src添加媒体的路径，也可以通过source标签来添加音频来源，可以定义多个
多个音频，可以防止某些浏览器不支持当前的音频格式或找不到第一个的音频，浏览器在识别到无法播放时，会继续选择下一个音频源

音频标签的常用属性

• controls：打开音频控制面板（播放按钮、暂停按钮、进度条等等）
• autoplay：音频会在页面加载后，自动开始播放（部分浏览器已经禁止了自动播放，即使音频存在muted属性也不允许自动播放）
• muted：音频输出时为静音播放
• preload：当页面加载时，音频开始进行加载并预备播放
  • auto：当用户大概率会播放该音频时，可以打开auto值，整个音频都会提前加载
  • metadata：只会加载音频的长度，但音频内容不会被加载，这样有助于网络资源的优化利用
• loop：当音频播放结束后，在重新开始播放

video 视频标签

video常用属性

• poster：视频封面，在播放视频前显示
• 其他属性与audio一致