增强的页面元素

figure和figcaption元素

<!--figure元素和figcaption元素-->
<!--figcaption是figure的标题，一个figure只有一个figcaption-->
<figure>
    <img src="img/1.jpeg" width="200" height="200">
    <img src="img/2.jpg" width="200" height="200">
    <img src="img/3.jpg" width="200" height="200">
    <figcaption>秦时明月</figcaption>
</figure>

details和summary 元素

<!--details元素与summary元素-->
<!--summary是details默认显示的标题  没有summary标题将显示详细信息-->
<details id="detail" onclick="click(this)">
    <summary>速度与激情7</summary>
    <p id="text">激情四射的速度与激情7</p>
</details>
<script>
    function click(detail) {
        var text = document.getElementById('text');
        if (detail.open) {
            text.style.visibility = "hidden";
        } else {
            text.style.visibility = "visible";
        }
    }
</script>

mark 元素

<!--mark元素   高亮部分-->
<p>asd
    <mark>sadasd</mark>
    asdasd
</p>

progress元素

<section>
    <h2>progress元素的使用</h2>
    <p>完成的百分比:
        <progress id="pro" style="background-color: aqua" max="100"></progress>
        <span id="span">0</span>%
    </p>
    <input type="button" onclick="btn()" value="点击">
</section>
<script>
    function btn() {
        var i = 0;

        function thread_one() {
            if (i <= 100) {
                updateProgress(i++);
            }
        }

        setInterval(thread_one, 100);//指定多长时间执行一次
    }
    function updateProgress(newValue) {
        var progress = document.getElementById('pro');
        progress.value = newValue;
        document.getElementById('span').textContent = newValue;
    }
</script>

meter元素

<!--meter元素 下线low 上线high 最佳值optimum-->
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>

ol元素

<!--ol元素  start从5开始排序 reversed倒序-->
<ol start="5" reversed>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>

dl元素

<dl>
    <dt>hello</dt>
    <dd>你好，hello</dd>
    <dt>博客</dt>
    <dd>我的博客</dd>
</dl>

cite元素

<!--cite元素-->
<h3>cite元素</h3>
<p>我最喜欢的动漫<cite>秦时明月</cite></p>

small元素

<!--small元素   额外信息，内嵌在页面中,css样式需要自己定义-->
<small>额外信息，内嵌在页面中</small>