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" οnclick="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="点击" οnclick="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>