HTML5增強的頁面元素

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>

本博客內容到此結束，歡迎交流討論！