html5增强的页面元素

<!--figure元素以及figcaption元素-->

figure元素是一种组合元素，带有可选标题，figure元素用来表示网页上

一段独立的内容，

将其从网页上移除，不会对网页上其他内容产生任何影响。figure元素表示的内容可以是

图片，统计图格，音频插件，视频插件，代码实例。

figcaption元素表示的是figure元素的标题，必须写在figure元素的内部，必须从属于figure元素。

一个figure元素最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

<figure>

     <img src="1.jpg" alt="美女">

     <img src="2.jpg" alt="美女">

     <img src="3.jpg" alt="美女">

     <figcaption>美女</figcaption>

</figure>

 

<!--details元素和summary元素-->

details元素是用于表示该元素内部的子元素可以被展开收缩显示的元素，

该元素具有一个布尔类型的open属性，当open为true时，该元素内部的子元素应该是可以被展开的

当open为false时，该元素内部的子元素处于收缩状态，默认是false,子元素处于收缩状态。

details元素内部不仅限于防止文字，还可以防止表单，插件，或统计图的详细数据。

 

summary元素从属于detail元素，用鼠标单击summary元素中的文字内容时，details中的所有从属元素应该会被展开或收缩。

如果details元素内没有summary元素，浏览器会提供默认文字以供单击。

<script>

function detail_onclick(detail){

     var p=document.getElementById("p");

      if(detail.open){

          p.style.visibility="hidden";

     }else{

          p.style.visibility="visible";

     }    

}

</script>

<details id="detail" onclick="detail_onclick(this)">

     <summary>速度与激情7</summary>

     <p id="p" style="visibility:hidden">你好吗，这是为保罗特意打造的电影，看起来激情四射。</p>

</details>

 

 

<!--mark元素-->

mark元素表示页面中需要突出显示或高亮显示的对于当前用户具有参考作用的一段文字，

<p>这是一段文字，用来<mark>测试</mark>mark元素</p>

 

progress元素

progress元素代表一个任务的完成进度，这个进度可以表示不确定的，表示任务正在执行，

或者不清楚当前工作量有没有完成，也可以从0到100中的某个数字，代表当前任务的完成进度，

<script>

function btn(){

     var i=0;

     function thread_one(){

          if(i<=100){

               i++;

               updateprogress(i);

          }

     }

     setInterval(thread_one,100);

}

function updateprogress(newValue){

     var progressBar=document.getElementById("p");

     progressBar.value=newValue;

     progressBar.getElementsByTagName("span")[0].textContent=newValue;

}

</script>

<section>

     <h2>progress元素的使用</h2>

     <p>完成的百分比<progress id="p" max="100"><span>0</span>%</progress></p>

     <input type="button" onclick="" value="点击">

</section>

 

meter元素

meter元素表示规定范围内的数值量，磁盘空间使用量，候选人所占总票数的比例，

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

 

ol元素

html5中，给ol元素增加了start属性和，reversed属性

start表示从哪开始，reversed表示倒叙

<ol start="5" reversed>

     <li>列表1</li>

     <li>列表2</li>

     <li>列表3</li>

     <li>列表4</li>

     <li>列表5</li>

</ol>

dl元素  

在html5中对dl重新定义，表示多个名字的列表项

<dl>

     <dt>Hello</dt>

     <dd>你好就是hello</dd>

     <dt>博客</dt>

     <dd>写博客是一个好习惯</dd>

</dl>

cite元素

表示作品，例如一本书，一篇文章，一首歌的标题。

<h3>cite元素</h3>

<p>我最喜欢的电影是<cite>乱世佳人</cite></p>

small元素

在html5中，对small元素进行了重新定义，由原来的通用展示型元素变为具体的专门用来表示小字印刷体的元素，

免费声明，注意事项，法律规范，版权等相关法律信息，不允许用在页面主题内容中，

small元素并不会让内容字号改变