HTML5新增标签

HTML5新增标签

1.结构标签

结构标签含义：主要用来对页面结构进行划分，页面结构划分为顶部、导航、内容(页眉、区块)、页脚等。

• header：一般网页头部信息/标题。
• nav：导航条部分内容。
• section：独立内容区块，一般内容区。
• article：特殊独立区块，表示页眉中核心内容。
• aside：标签内容之外，与标签内容相关的辅助信息。
• figure：独立单元，如有图文混合模块。
• hgroup：头部信息/标题相关信息。用于对网页或区段(section)的标题进行组合。
• footer：底部信息。
• main：标签规定文档的主要内容。一个文档中只有一个main元素。
• canvas： 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

<header>
  顶部信息
</header>
<nav>
    导航信息
</nav>
<div>
    <section>
        <hgroup>
            用于对网页或区段(section)的标题进行组合
            <h1>标题一</h1>
            <h2>标题二</h2>
        </hgroup>
        <article>图文混合内容</article>
        <footer>底部信息</footer>
    </section>
    <aside>
        侧边栏
    </aside>
</div>
<footer>
底部
</footer>

2.表单标签

• datalist：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
• keygen：规定用于表单的密钥对生成器字段。
• output：定义不同类型的输出，比如脚本的输出。

HTML5中新增input的type属性值

属性值	描述
type="search"	搜索框。应用非常广泛，与text的区别是有值的时候会有清空按钮。
type="email"	邮箱地址，自动校验。
type="url"	http地址，自动校验。
type="number"	必须输入数值，通过min、max属性可以设置最小最大值。
type="range"	必须输入一定范围内的数值。
type="color"	颜色选择器。
type="date"	选取年月日。
type="month"	选取月。
type="week"	选择周。
type="time"	选取时间。
type="datetime"	选取时间、年月日。
type="tel"	手机号码

3.媒体标签

HTML布尔属性：如果属性没有属性值,是合法的.这些属性被称为布尔属性,他们只能有跟它的属性名一样的属性值或不定义属性值。直接将属性放入元素中表示是(true)，如果不放元素的话就是否(false)。

• video：视频

  兼容性：尽可能应选择mp4作为视频的播放格式。

  <video src="" autoplay="autoplay" muted loop="loop" poster=""></video>
  

  HTML5video视频标签属性

  属性	值	说明
  src	视频地址	属性代表引用的视频路径
  poster	图片地址	代表视频尚未加载完成时，会有一张图片代替视频进行显示
  autoplay	autoplay	代表页面打开后是否会进行自动播放，声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。布尔属性
  controls	controls	代表是否会有原生的视频控件，启用后浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。布尔属性
  preload	none:不进行预加载; metadata:部分预加载; auto:全部预加载; 如果不使用此属性默认为auto	定义视频是否预加载
  loop	loop	用于指定视频是否循环播放，布尔属性
  width	像素	设置视频播放器的宽度
  height	像素	设置视频播放器的高度
  muted	muted	静音播放，布尔属性

• audio：音频

  兼容性：尽可能应选择mp3作为音频的播放格式。

  // src属性代表引用的音频路径
  // autoplay代表页面打开后是否会进行自动播放。布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
  // controls代表是否会有原生的音频控件，启用后浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
  <audio src="" autoplay="autol" controls="controls"></audio>
  

• source：定义多媒体资源和

  // src属性：用于指定媒体的地址，和video标签的一样。
  // Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
  // Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。
  <video>
  	<source src="" type="">
  </video>
  <audio>
  	<source src="">
  </audio>
  

• embed:嵌入内容，包括各种媒体，flash，图片等。

• track：为诸如 和 元素之类的媒介规定外部文本轨道。

4.其他功能标签

• progress：进度条。可以用来显示一项任务的完成度。

  // max:定义任务一共需要完成多少工作
  // value:指定该进度条已完成的工作量
  <progress max="100" value="20"></progress>
  

• datalist：文本域下拉提示。

• details：展开菜单。用于描述文档或文档某个部分的细节。

• summary：标签包含 元素的标题。

• mark：标注文本。

  <mark>表示页面中需要突出显示或高亮显示的信息。</mark>
  

• time：数据标签，给搜索引擎使用，主要日期标签。定义日期或时间。

• canvas：使用js进行图像绘制。标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。

• ruby：对某些内容进行注释（中文注音或字符）。

• rt：定义字符（中文注音或字符）的解释或发音。

• rp：在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

• command：定义命令按钮，比如单选按钮、复选框或按钮。

• address：个人或者某个组织的联系信息等等。

  <address>
    <a href="mailto:jim@rock.com">mjj67890@163.com</a><br>
    <a href="tel:+13115552368">(311) 555-2368</a>
  </address>
  

• meter：定义度量衡。仅用于已知最大和最小值的度量。

• bdi：允许您设置一段文本，使其脱离其父元素的文本方向设置。

• dialog：定义对话框，比如提示框。

• figure：规定独立的流内容（图像、图表、照片、代码等等）。

• figcaption：定义

  元素的标题。

• wbr：规定在文本中的何处适合添加换行符。