HTML5标签变化

一、HTML5新增的标签

1.结构标签

2.多媒体标签

<video>视频

<audio>音频

<source>资源，单个使用

<canvas>标记定义图片

2.1<video>视频

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

2.2<audio>音频

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

2.3<embed>标记定义外部可交互的内容或插件，如flash

3.web应用标签

3.1状态标签

<meter>状态标签（实时状态显示：气压、气温），兼容浏览器：Chrome、Opera

<progress>状态标签（任务过程：安装、加载），兼容浏览器：Chrome、Firefox、Opera

eg3.1-1.<meter>

eg3.1-2.<progress>

3.2列表标签

<datalist> 为input标记定义一个下拉列表，配合option，兼容浏览器：Chrome、Firefox、Opera

<details>标记定义一个元素的详细内容，配合summary，兼容浏览器：Chrome

eg3.2-1.<datalist>也可输入下拉框中没有的内容

<input placeholder="请选择城市" list="cityList">
   <datalist id="cityList">
       <option value="Nanjing">Nanjing</option>
       <option value="Beijing">Beijing</option>
       <option value="Shanghai">Shanghai</option>
       <option value="Lianyungang">Lianyungang</option>
       <option value="Yangzhou">Yangzhou</option>
   </datalist>
</input>

eg3.2-2. <details>

<details open="open">
<summary>details介绍</summary>
<p>此处展示的是details详细信息，details配合summary使用的，默认不展示详细信息，但是设置为open状态时候，默认是展示的，点击小三角图标，可收缩或者展示详细信息部分内容；summary起到控制标题的作用。</p>
</details>