HTML5-新增的语义化标签

概述

HTML 5是 HTML 语言的新一代标准，定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，定义了新的标签、特性和属性；拥有一个强大的技术集， HTML5 、CSS3 、javascript 这也是广义上的 HTML5

HTML5 拓展了语义化标签、本地存储、兼容特性、 2D、3D、动画、过渡、CSS3 特性、性能与集成

目前绝大多数新的属性，已被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性

HTML5 新增语义化标签

常用 HTML5 语义化标签（均为双边标记标签），在 IE9 中，需要将这些元素转为块级元素

• <header></header> 头部区域

• <footer></footer> 底部区域

• <nav></nav> 导航

• <section></section> 文档中的节

• <article></article> 独立内容区域

• <aside></aside> 侧边栏内容

• <audio></audio> 播放音频

  • 该标签支持三种音频格式：Ogg、MP3、Wav
  • 标签属性
    • src 音频文件路径
    • autoplay 在音频就绪后马上播放（谷歌禁用了该功能）；属性值为 autoplay
    • controls 显示用户控件（播放按钮等）；属性值为 controls
    • loop 设置该属性后，音频结束后自动播放 （循环播放）；属性值为 loop

  <!-- 播放音频标签 -->
  <audio src="music/bgsound.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
  

  设置兼容性，通过 source 标签（单边标记）指定来源；source 为元素（audio、video等）指定多个媒体资源

  <audio controls="controls">
    <!-- IE9 Chrome3.0 -->
    <source src="music/bgsound.mp3" type="">
    <!-- Fireofx3.5 chrome3.0 -->
    <source src="music/bgsound.ogg" type="">
    <!-- Firefox3.5 -->
    <source src="music/bgsound.wav">
    您的浏览器不支持audio元素
  </audio>
  

• <video></video> 播放视频

  • 支持三种视频格式：MP4、Ogg、WebM
  • 标签属性
    • controls、src、width 、height、autoplay（谷歌禁用了该功能）、loop
    • muted 静音播放（设置了 autoplay 再设置 muted 在谷歌浏览器中会自动静音播放）；属性值为 muted

  <video src="movie/mp4.mp4" width="" height="" autoplay controls="controls" muted="muted" loop="loop"></video>
  

  设置兼容性

  <video controls="controls" autoplay>
    <!-- IE9 Chrome5 -->
    <source src="movie/movie.mp4" type="">
    <!-- Firefox3.5 Chrome5 -->
    <source src="movie/movie.ogg" type="">
    <!-- Firefox4 Chorme6 -->
    <source src="movie/movie.webm" type="">
    您的浏览器不支持video标签
  </video>
  

使用语义化标签的好处

• 去掉或丢失样式的时候，能够让界面呈现清晰的结构
• 有利于搜索引擎优化
• 便于团队开发和维护，语义化使得网页更具可读性