HTML5学习笔记7-增强的页面元素

1、figure元素：规定对立的流内容（图像，图表，照片，代码等），若删除不对文档其他内容产生影响。

      figcation元素：定义figure的标题，次元素应设置于figure元素的第一个或者最后一个子元素。

<figure>
<figcaption>哈士奇-雪橇三傻之二傻</figcaption>
<img src="erha.jpg" alt="二哈" width="300px" height="240px">
</figure>

2、details用于描述文档或者文档某个部分的细节。

      summary：与details元素一起使用。描述文档或者文档细节的标题。

<details id="detail" onclick="detainClick(this)">
<summary>HTML5</summary>
<p id="pid" style="visibility: hidden">This document teaches you everything you have to learn about HTML 5.</p>
</details>
<script>
function detainClick(detail){
var p=document.getElementById("pid");
if(detail.open){
p.style.visibility="hidden";
}else{
p.style.visibility="visible";
}
}
</script>

3、mark突出显示部分文本

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

4、progress元素：定义运行的进度

<section>
<h2>progress元素的使用</h2>
<p>完成的百分比<progress id="p" max="100" style="background-color: black"><span>0</span>%</progress></p>
<input type="button" value="点击" onclick="btn()">
</section>
<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>

5、meter元素：定义度量衡。仅用于已知最大和最小值的度量

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

6、ol元素、dl元素

<ol start="5" reversed>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ol>
<dl>
<dt>Hello</dt>
<dd>Hello就是你好</dd>
<dt>博客</dt>
<dd>博客就是刻薄</dd>
</dl>

7、cite元素

<p>我的名字是<cite>赵红利</cite></p>