HTML5新增标签

一 关于html5
目的：用更简洁的html代码创建更多功能的网页，并让网页结构变得更加清晰明了，增加语义化的标签
优势：结构清晰，为开发人员节约时间，解决HTML/XHTML在各大浏览器之间存在的兼容性问题，将音视频，图像，动画等国际标准化。

二 新标签
1 .article元素
<article>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
注释：<article> 标签的内容独立于文档的其余部分。
以博客为例来看一段关于article元素的代码示例，代码如下：

<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
      </header>
      <p>article元素是什么？怎样使用article元素？……</p>
      <footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
      </footer>
</article>

这个示例是一篇讲述article元素使用方法，在header元素中嵌入了文章的标题部分，在标题下部的p元素中，嵌入了一大段该博客
文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容
使用了article元素。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以
使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

<article>
      <header>
            <h1>article元素使用方法</h1>
            <p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>
      </header>
      <p>article元素是什么？怎样使用article元素？……</p>
      <section>
            <h2>评论</h2>
            <article>
                  <header>
                        <h3>发表者：shenmiweiyi</h3>
                        <p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>
                  </header>
                  <p>这篇文章很不错啊，顶一下！</p>
            </article>
            <article>
                  <header>
                        <h3>发表者：神秘唯一</h3>
                        <p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>
                  </header>
                  <p>这篇文章很不错啊，对article解释的很详细</p>
            </article>
      </section>
</article>

<article>元素中文章作者的信息可通过

元素表示，但是不适用于嵌套的

元素。
<article>元素中文章的发布日期和时间可通过 元素的pubdate属性表示。

2 . section元素

section元素用于对网站或应用程序中页面上的内容进行分块。或者说对文章进行分段，请不要与有着自己的完整的、独立的内容的
article元素混淆。一个section元素通常由内容及其标题组成。

但section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。
section元素中的内容可以单独存储到数据库中或输出到word文档中。

<section>
      <h1>section元素使用方法</h1>
      <p>什么时候用section元素？怎样合理使用section元素?</p>
</section>

关于section元素的使用禁忌总结如下：
  1）不要将section元素用作设置样式的页面容器，那是div元素的工作。
  2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
  3）不要为没有标题的内容区块使用section元素。

在HTML5中，article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性。即section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。另外，在HTML5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。

3 . aside元素
<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
提示：
<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。

<article>  
  <p>  
   The Disney movie <em>The Little Mermaid</em> was   
    first released to theatres in 1989.   
  </p>  
  <aside>  
   The movie earned $87 million during its initial release.   
  </aside>  
  <p>  
    More info about the movie...   
  </p>  
</article>  

注：aside可以在article内使用作为主要内容的附属信息，也可单独使用作为页面或全局附属信息。

4 .nav元素
<nav> 标签定义导航链接的部分，其中的导航元素链接到其他页面或当前页面的其他部分。
提示：
a. 如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。
b. 并不是所有的链接组都要被放进<nav>元素；例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等；这时使用<footer>元素是最恰当的，而不需要<nav>元素。

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/blog/">Blog</a></li>
    </ul>
</nav>

c. 一个页面中可以拥有多个<nav>元素，作为页面整体或不同部分的导航。<nav>不仅可以用来作为页面全局导航，也可以放在<article>标签内，作为单篇文章内容的相关导航链接到当前页面的其他位置。

5 .time元素

<time>是HTML 5新增加的一个标记，用于定义时间或日期。该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差。在设置时间或日期时，只需将该元素的属性“datetime”设为相应的时间或日期即可。

<time datetime="2011-4-9">今天是2011年4月9日</time> 

<time datetime="2011-4-9T21:00">现在时间是2011年4月9日晚上9点</time>  //日期和时间，它们之间使用字母“T”进行分隔。

<time datetime="2011-4-9T21:00Z">现在时间是2011年4月9日晚上9点</time>  //整个日期与时间的后面加上一个字母Z，则表示获取的是UTC（世界统一时间）格式。

<time datetime="2011-5-1" pubdate="true">本消息发布于2011年5月1日</time> //“pubdate”属性，表示此日期为发布日期。

属性：
datetime，定义元素的日期和时间。如果未定义该属性，则必须在元素的内容中规定日期或时间。
pubdate，指示 <time> 元素中的日期 / 时间是文档（或最近的前辈 <article> 元素）的发布日期，可选值为pubdate

用time元素来表示时间的时候，我发现它本身没有任何的样式，而且浏览器也全部只显示标记内部的信息。这个时候我想问了： 
既然它只显示内部的信息，那么为什么不用div来代替呢？它的属性值的存在有何意义？

用<time>来表示时间，并不是想要达到什么可见的效果，而是让网页的代码有条理，从文档结构方面来看，可以更清晰明了的表示出 
日期时间，同时对搜索引擎来说也能够更智能的生成搜索结果。合理使用却能让页面结构更加清晰有逻辑

6 . header元素

在div css布局中常常把网页大致分为头部、内容、底部。对于大结构我们常常使用div里加id进行布局。而头部常常使用<div id=”header”></div>或<div class=”header”></div>进行布局，特点与传统DIV布局不同，少了div做标签，而是新增元素标签

提示： header通常用来放置整个页面或页面内一个内容区块的标题，但也可以放置其他内容比如logo图片搜索表单等，还可以包含hgroup元素，nav元素

7 .hgroup元素

hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题 
和他的子标题算是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的。

即：当我们的同一个区块下面的标题，有主标题和子标题的时候，我们就需要hgroup元素进行包裹。

<article>
    <header>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p><time datetime=”2014-10-08”>2014年10月08日</time></p>
    </header>
    <p>文章正文</p>
</article>

8 .footer元素

footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与它相关的区块的注脚信息， 
比如作者、版权信息等。

<footer>
    <p>
        <a href=””>版权信息</a>
        <a href=””>关于我们</a>
        <a href=””>联系我们</a>
        <a href=””>站点地图</a>
    </p>
    <p>麦子学院版权所有</p>
</footer>

注意：footer元素和我们前面所讲的header元素一样，并没有限制他的个数。并且footer元素可以为article元素或者 
section元素添加footer元素。

9.address元素

address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。address元素还用来展示和文章中的 
相关的联系人的所有联系信息。

<header>
<h1>HTML5+CSS3视频教程</h1>
</header>
<p>
这里是问脏正文部分
</p>
<footer>
<address>
<a href=”/” title=”联系人1”>联系人1</a>
<a href=”/” title=”联系人2”>联系人2</a>
北京市海淀区西北旺东路10号院百度科技园
</address>
时间：<time datetime=”2014-10-11”>2014年10月11日</time>
</footer>

10.figure元素
<figure> 标签用于对元素进行组合。用来表示网页上的一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生其他的任何影响，它可以表示的元素可以是图片，统计图或者代码示例，还可以用来表示音频插件，视频插件和统计表格等

figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在 
figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置一figcaption元素。

<body>
    <figure>
        <figcaption>风景<figcaption>
        <img src=”1.jpg” title=”风景”>    
    </figure>
</body>

11.details和summary元素
details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，该元素内部的子元素应该被展开显示，当该属性值为false时，其内部的子元素应该被收缩起来不显示。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态。

summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开 
或者收缩。如果details元素内没有summary元素，浏览器那你会提供默认的文字以供点击，例如“details”

注意：details元素和summary元素目前只有谷歌的Chrome浏览器支持！

<body>
    <details>
        <summary>
            HTML5+css3目录
        </summary>
        <p>
        HTML5+CSS3视频教程
    </p>
    </details>
</body>

12.mark元素

mark元素表示页面中需要突出显示或高亮显示的，mark元素最主要的目的就是吸引当前用户的注意。

他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。

13.progress元素

<progress> 标签与 JavaScript 一起使用来显示任务的进度。

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 标签代替。

属性：
max，值为inumber，规定需要完成的值。
value，值为number 规定进程的当前值。

<progress value="22" max="100"></progress>

14.meter元素

meter标签用来表示范围已知，且可度量的等级标量或分数值，例如磁盘使用量比例、关键词匹配程度等。仅用于已知最大和最小值的度量。
注释：必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

Value：表示当前的实际值；如果不做指定，那么<meter>标签中的第一个数字就会被认为是其当前实际值，例如<meter>2 out of 10</meter>中的“2”；如果标签内没有数字，那么标量的实际值就是0。
属性:

value:number 定义度量的值。
min：当前的最小值；如不做指定则为0。
max：当前的最大值；默认值是 1;如果指定的最大值小于最小值，那么最小值会被认为是最大值。
low：当前的低值区；必须小于或等于max值；如果低值区数字小于最小值，那么它会被认为是最小值。
high：被界定为高的值
optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。

<p>空间剩余大小：<meter min="0" max="1024" value="600">600/1024</meter>600/1024 GB</p>
<p>您的得分是：<meter min="0" max="100" low="60" high="90" optimum="100" value="91">91分</meter>91分</p>

15.canvas元素
专门用来绘制图形，在页面上放置一个canvas元素，就相当于在页面上创建“画布”，可以在其中进行图形的描绘。
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

canvas元素只是一块无色透明的区域。需要利用JavaScript编写在其中进行绘画的脚本。canvas元素要求至少设置width和height特性，以指定要创建的绘图区域大小。任何在起始和结束标签之间的内容是候选内容，它们当浏览器不支持<canvas>元素的时候便会显示。
（1）先body中创建画布：

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

（2）引入绘图脚本：引入一个名为canvas的js脚本文件，编码是utf-8

<script type="text/javascript" src="canvas.js" charset="utf-8"></script>

（3）开始在画布上绘图之前，要先取得绘图的环境。canvas元素正式支持一个2D绘图环境。绘图环境的引用可以使用getContext()方法获取，要传入一个“2D”参数，如下：

var drawing = document.getElementById("drawing");
//确保支持<canvas>
if (drawing.getContext) {
    var context = drawing.getContext("2d");
    //其它代码
}

当使用canvas元素时，一定要测试getContext()方法是否存在。有些浏览器会为非正式的HTML元素创建默认的HTML元素对象。这种情况下，getContext()方法就不可用了，会造成脚本执行错误。

详见另一篇博文：

15.video和audio元素
video元素专门用来播放网络上的视频或电影，audio元素播放网络上的音频数据，不用其他插件

<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>  

<source> 标签为媒介元素定义媒介资源。
写多行source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一，有些浏览器例如有些浏览器支持mp4格式，那么它就播放第一个mp4格式的视频，如果它不支持就检查是不是支持下面的ogg视频，如果支持就播放，不支持的话继续向下，下面没有source了，那么就显示“Your browser does not support the video tag.”。

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

audio元素和video元素所具有的属性大致相同：
（1）src ：要播放的音频的URL
（2）autoplay ：是否自动播放<video src="test.mov" autoplay></video>
（3）controls ： 该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。

<video src="test.mov" controls></video>

（4）loop ：是否循环播放视频或音频<video src="test.mov" autuplay loop></video>
（5）preload ：视频或音频数据是否预加载。如果使用预加载的话，浏览器会预先将视频或音频进行缓冲，这样可以加快播放的速度(若使用autoplay,则忽略该属性)<video src="test.mov" preload="auto"></video>

该性情有三个可选值：none,metadata与auto 默认值为auto.
none表示不进行预加载。
metadata表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）。
auto表示预加载全部视频或音频。

（6） poster (video元素独有属性）：当视频的不可用时，可以使用该元素向用户展示一幅替代用的图片，使用方法：

<video src="test.mov" poster="CannotUse.jpg"></video> 

（7） with与height(video独有属性)：指定视频的宽度与高度（以像素为单位）使用方法：

<video src="test.mov" width="500" height="300"></video>

API：HTML5 DOM为<audio>和<video>元素提供了方法、属性和事件

(1)方法：pause(),play(),load(),canPlayType()

play()：播放当前播放的音频或视频
pause()：暂停当前播放的音频或视频
    <button onclick = 'audio.play();'>播放</button>
    <button onclick = 'audio.pause();'>暂停</button>
load()：*重新加载*音频或视频元素，用于在更改src来源或其他设置后对音频或视频元素进行更新
     <script>
     var audio = document.getElementById('audio');
     audio.src = 'myocean.mp3';
     audio.load();
     </script>   
canPlayType()：检测浏览器是否能播放指定的音频或视频类型，返回值为下列之一：
   'probable':浏览器最可能支持该类型
   'maybe':浏览器也许支持该类型
   '':浏览器不支持该类型
(2)只读属性：duration,paused,ended,currentSrc 
   duration：返回当前音频或视频的长度(以秒计)，如果未设置则返回NaN
   currentSrc：　返回当前音频或视频的URL
   paused ： 返回音频或视频是否已暂停
   ended ： 返回音频或视频是否已结束
(3)可读写属性： currentTime,volume,muted
currentTime ：设置当前播放位置（秒） `audio.currentTime = 5;`
volume ：设置或返回音频或视频的当前音量 （取得为0-1，0为静音，1为最大，默认为1）
muted ：设置是否静音 muted:true(静音) muted:false(不静音)
(4)事件：当音频或视频正在加载过程中，会依次发生以下事件：

loadstart:提示浏览器开始寻找指定的音频或视频
progress:提示浏览器正在下载指定的音频或视频
durationchange:提示音频或视频的时长已改变
loadedmetadata:提示音频或视频的元数据已加载
loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧
canplay:提示浏览器能够开始播放指定的音频或视频
canplaythrough:提示音频或视频能够不停顿地一直播放
progress:提示浏览器正在下载指定的音频或视频

HTML 5 全局属性