HTML5增强的页面元素

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NGUever15/article/details/78252068

HTML5增强的页面元素

figure元素

<figure>
            <img src= alt="tup" />
            <img src= alt="tup" />
            <img src= alt="tup" />
            <figcaption>图片</figcaption>
        </figure>

利用figure元素和figcaption，可以将多张图片看做整体，添加一个描述。

detail元素

  <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="details" onclick="detail_onclick(this)">
                <summary>速度与激情7</summary>
                <p id="p" style="visibility: hidden;">   你好，这是速度与激情7的详细介绍</p>
        </details>

主要用于详情信息的隐藏和显示。
效果如下：

Mark元素

  <p>这是一段<mark>测试</mark>mark的文字</p>

对特殊的信息进行标注

progress元素

 <script>
                function btn(){
//                  for (var i=0;i<100;i++){
//                      setTimeout(function(){
//                          updateprogress(i);
//                      },2000)
//                  }
                var i=0;
                function thread_one(){
                    if(i<=100){
                        i++;
                        updateprogress(i);
                    }
                }
                setInterval(thread_one,100);
                }
                function updateprogress(newValue){
                    var progressBar = document.getElementById("p1");
                    progressBar.value = newValue;
                    progressBar.getElementsByTagName("span")[0].textContent = newValue; 
                }
        </script>
        <section>
                <h2>progress元素的使用</h2>
                <p>完成的百分比<progress style="background-color:antiquewhite;" id="p1" max="100"><span>0</span>%</progress></p>
            <input type="button" onclick="btn()" value="点击" />
        </section>

meter元素

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

ol元素和dl元素

        <ol start="5" reversed>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                <li>列表4</li>
        </ol>

    <dl>
                <dt>hello </dt>
                <dd>你好就是你好</dd>
                <dt>博客</dt>
                <dd>博客就是博客</dd>
            </dl>

cite元素

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

本博客内容到此结束，欢迎交流讨论！