ggggxc学习笔记----H5增强的页面元素II

三、增强的页面元素：

1.figure元素与figcaption元素

       figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

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

2.details元素与summary元素

       details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。该元素具有一个布尔类型的open属性，当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

       summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。

3.mark元素

       mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素对原文内容具有补充作用的一个元素。例如：对网页全文检索某个关键词时的检索结果；为了吸引读者注意，高亮显示

<mark>Html 5</mark>  //提供了一些新的元素和属性

4.新增的progress元素

       progress元素答辩一个任务的完成进度，这个进度可以是不确定的，表示进度正在进行。但是不清楚还有多少工作量没有完成，也可用0到某个最大数字（100）之间的数字来表示准确的进度完成情况（比较进度百分比）

属性：     

       value     表示已经完成了多少工作量，0<value<=max

        max       表示总共有多少工作量。

5.新增的meter元素

       meter元素表示规定范围内的数量值。例如：磁盘使用量，某个候选者的投票人数占总投票人数的比例等。

属性：   

        value ：在元素中特地表示出来的实际值

         min：指定规定范围时允许使用的最小值，默认为0

         max：指定规定范围时允许使用的最大值，默认为1

         low ：规定范围的下限值，必须小于或等于high属性的值

          high：规定范围的上限值

          optimum：最佳值

<meter value="91" min="0" max="100" high="90" low="40" optimum="100"></meter>

6.改良的ol列表

         在HTML5中，将ol列表进行改良，为它添加了

             start属性：自定义开始编号           

             reversed属性：反向编号

<ol start=5 reversed>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
</ol>

7.改良的dl列表

       重新定义后的dl列表包含多个带有名字的列表项。每一项包含一条或多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语。也可以用来表示一些页面或article元素中内容的辅助信息，例如作者，类别等

<article>
	<h1>article</h1>
	<p>一块独立的内容，可以用来表示RRS中一块独立的内容，也可以用来表示博客中独立的一篇文章</p>
  <aside>
    <h2>术语解释</h2>
    <dl>
	<dt>RRS</dt>
	<dd>RRS也叫聚合RRS，是在线共享内容的一种简易方式</dd>
	<dt>博客</dt>
	<dd>博客是。。。</dd>
    </dl>
  </aside>
</article>

8.加以严格限制的cite元素

       cite元素表示作品的标题，该作品可以在页面中被详细引用，也可以也在页面中提一下。

<p>我最喜欢的电影是<cite>速度与激情</cite></p>

9.重新定义的small元素

       专门用来标识所谓的“小字印刷体”的元素，通常用在诸如免责声明，注意事项，法律规定，与版权相关等法律性声明文字中，同时不允许应用在页面主内容中，只允许被当做辅助信息以inline方式嵌入在页面中使用。同时，small元素不意味着元素中内容字号会变小，要将字号变小，需要配合CSS样式来实现。

10.安全性增强的iframe元素

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

        sandbox=""

              1) allow-forms：允许iframe页面中的表单进行提交

              2) allow-scripts：允许执行iframe页面中的JavaScript脚本代码   

              3) allow-same-origin

       当不对iframe元素使用sandbox属性时，该元素中的页面被视为与使用该iframe元素的页面来自同一个源（即使来自不同的源），允许iframe元素中的页面加载其来自服务器端的内容，允许在iframe元素所显示页面的脚本内部与服务器端进行交互，允许在iframe元素所显示的页面中加载来自cookies或者WebStorage中的内容。

       对iframe元素使用sandbox属性后，iframe元素中所显示的页面被视为来自一个单独的源（即使来自同一个）禁止上述提到的行为。

       当sandbox="allow-same-origin" 将iframe元素中的页面视为与使用该iframe元素的页面来自同一个源。通常allow-scripts，allow-same-origin连用表示在iframe元素所显示的页面中使用JavaScript脚本读取cookies或Web Storage中的内容。

                4) allow-top-navigation          

       当对iframe元素使用sandbox属性时，如果iframe元素内的页面中具有一个超链接，且单击该超链接将把浏览器窗口或iframe元素之外任何区域导航到新的内容，那么禁止该超链接

       可以通过sandbox="allow-top-navigation"使得超链接变得有效