HTML5 页面新增元素

1.新增的figure元素与figcaption

   figure元素也是一种元素的组合，带有可选标题。figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。

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

<figure>
<figcaption>标题</figcaption>
<img src=""/>
</figure>

2.detalis元素与summary元素

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

   summary元素从属于details元素，在用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字。当details元素的状态从展开切换为收缩或从收缩切换为展开时均触发toggle事件。

<details id="detail1" ontoggle="detail_ontoggle(this)"/>
<summary>显示标题</summary>
<p id=p>详细描述....</p>
</details>
<script>
function detail_ontoggle(detail)
{
    var p=document.getElmentById('p');
    if(detail.open)
       p.style.visibility="visible";
    else
       p.style.visibility="hidden";
}
</script>

3.新增的mark元素

   mark元素标识页面中需要出土显示或高亮显示的，当前用户具有参考作用的一段文字。

4.新增的progress元素

   progress元素代表一个任务的完成进度，整个进度可以是不确定的，表示进度正在进行，但不清楚还有多少工作量没有完成。该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。

5.新增的meter元素

   meter元素表示规定范围内的数量值。meter元素有6个属性。

   value:在元素中特别标示出来的实际值。默认为0。

    min:指定规定范围时允许使用的最小值，默认为0，设定的值不能小于0。

    max:指定规定范围时允许使用的最大值，如果设定时该属性值小于min属性的，那么把min属性值视为最大值。max默认值为1。

    low:规定范围的下限值，必须小于或等于high属性的值。如果low属性值小于min属性值，那么把min属性的值视为low属性的值。

    high:规定范围的上限值。如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样，如果该属性值大于max属性的值，那么把max属性的值视为high属性的值。

   optimum:最佳值,该属性值必须在min属性值与max属性值之间，可以大于high属性值。

6.新增的dialog元素

   dialog元素代表一个对话框，默认情况下，dialog元素处于隐藏状态。dialog元素的showModal方法以模式对话框的形式显示dialog元素。dialog元素的returnValue属性为对话框设置或返回一个返回值。

7.改良A标记

   A标记新增download属性。在添加了该属性后，用户点击超链接时，将直接下载超链接所指向的资源文件。而不是在浏览器中打开链接所指向的目标地址。

8.改良的ol列表

  在ol(有序列表)列表进行改良，为它添加了strat属性与reversed属性。如果不希望ol元素所代表的列表编号从1开始。resversed则是从倒叙开始。

9.安全性增强的iframe元素

   在HTML5中，为iframe元素增加一个sandbox属性，是处于安全性方面的原因，对iframe元素内的内容是否允许显示，表单是否允许被提交以及脚本是否允许被执行等方面进行了限制。

  通过对iframe元素的sandbox属性后，iframe元素内容显示的页面被添加有如下限制。

  1.该页面中的插件被禁用。

  2.该页面中的表单被禁止提交。

  3.该页面中的JavaScript脚本代码被禁止运行。

  4.如果单击该页面内的超链接将把浏览器窗口或iframe元素之外的任何区域导航到新的内容，则该超链接被禁用。

  5.该页面被视为来自一个单独的源,所以禁止加载页面中来自服务器端的内容，禁止该页面于服务器进行交互，同时禁止加载该页面中从cookie或WebStorage中读出的内容。

  另外sandbox属性的其他可指定的属性值。当同时指定多个属性值:属性值与属性值中间用空格分隔。

  allow-forms:可以通过在sandbox属性值中添加使用allow-forms属性值的方法来允许iframe页面中的表单进行提交。

  allow-scripts:允许执行iframe页面中的JavaScript脚本代码。

  allow-same-origin:将iframe元素中的页面视为与使用该iframe元素的页面来自同一个源。

  allow-top-navigation:允许iframe内页面的超链接，把iframe元素之外的任何区域导航到新的内容。

  10 增加的script元素

       在HTML5中，对于script元素，新增async属性与defer属性。它们的作用都是加快页面的加载速度，使脚本代码的读取不再妨碍页面上其他元素的加载。

       当使用这两个属性时，在浏览器发出下载该脚本文件的请求，开始脚本文件的下载工作后，立即继续执行页面的加载工作。脚本文件下载完毕时触发一个onload事件，我们可以通过监听该事件及指定事件处理函数来指定当脚本文件下载完毕时所需要执行的一些处理。

<script async src="test.js" onload="TestInit()"></script>
<script defer src="test.js" onload="TestInit()"></script>

      当使用async属性时，脚本文件下载完毕后，立即执行该事件处理函数，如果页面中使用多个外部脚本文件，且均为这些外部脚本文件使用async属性，则这些外部脚本文件的onload事件处理函数的执行顺序并不与页面代码中这些外部脚本文件的引用顺序保持一致，一旦某个外部脚本文件下载完毕，立即执行该脚本文件的onload事件处理函数。

     当使用defer属性时，脚本文件下载完毕后，并不立即执行该脚本文件的onload事件处理函数，而是等到页面全部加载完毕后，才执行该脚本的onload事件处理函数，所以当多个脚本文件使用defer属性时，则这些外部脚本文件的引用顺序来执行这些外部脚本的onload事件处理函数。

     另外，由于外部脚本文件的下载也是页面的加载工作中的一部分，所以外部脚本文件的onload事件处理函数将始终在浏览器窗口对象的onload事件处理函数或body元素的onload事件处理函数之前首先被执行。