在HTML第五次重大修改后，用于取代HTML4和XHTML的第一代标准版本，称为HTML5。HTML5中新增了一些语义化标签，提高可用性和改进用户的友好体验。接下来，就让我们来学习HTML5中新增的标签吧~(╹▽╹)

• 狭义的HTML5指的是HTML语言的第五个版本。
• 广义的HTML5是指，HTML5 + CSS3 + Javascript技术的综合。

HTML5新增语义化标签

HTML5的优势：

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 带来更多的多媒体元素，很好的替代FLASH和Silverlight
• 涉及到网站抓取和索引时，对SEO很友好
• 大量应用于移动应用程序和游戏
• 可移植性好

HTML5的劣势：

• 该标准未能很好的被PC端浏览器支持
• IE9以下浏览器几乎不兼容

H5新增语义化标签-常用布局标签

• <header> 头部标签
• <nav> 导航标签
• <main> 主体标签
• <article> 独立内容标签
• <section> 区段标签
• <aside> 侧边栏标签

• <footer> 尾部标签

  
  
  语义化标签.PNG

注：这种语义化标准主要针对搜索搜索引擎，可在页面中多次使用。在IE9中，需要把这些元素转换为块级元素。

H5新增语义化标签-多媒体标签

<audio>音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，但支持的格式有限。

音频格式.PNG

<audio>音频标签的兼容写法

  <audio controls="controls">
    <source src="happy.mp3" type="audio/mpeg">
    <source src="happy.ogg" type="audio/ogg">
    您的浏览器暂不支持audio标签
  </audio>

<audio>音频标签常见属性

<video>视频标签

HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放，但支持的格式有限。

视频格式.PNG

<audio>音频标签的兼容写法

  <video controls="controls">
    <source src="move.mp4" type="audio/mp4">
    <source src="move.ogg" type="audio/ogg">
    您的浏览器暂不支持video标签
  </video>

<video>视频标签常见属性

H5新增语义化标签-表单标签

输入标签

HTML5新增<input>表单类型

<datalist> 标签

• <datalist>标签规定了<input>元素可能的选项列表；
• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程，会自动相应<option>元素的值，
• 绑定的<input>标签必须设置list属性，属性值等于<datalist>标签的id属性值。

<!-- 第一种写法 -->
 <input type="text" list="city-list">
  <datalist id="city-list">
    <option value="广州">gz</option>
    <option value="成都">ct</option>
    <option value="上海">sh</option>
  </datalist>
<!-- 第二种写法 -->
 <input type="text" list="city-list">
  <datalist id="city-list">
    <option value="广州">
    <option value="成都">
    <option value="上海">
  </datalist>

新增表单属性