新增和改良的页面元素

最新推荐文章于 2025-08-21 18:41:24 发布

China_chen_p_l

最新推荐文章于 2025-08-21 18:41:24 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/China_chen_p_l/article/details/78908811

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了HTML中的ol、dl、progress和meter等元素的使用方法及其属性设置，通过具体实例展示了如何构建有序列表并控制其起始编号及是否倒序，同时演示了定义描述列表、进度条及度量元素的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ol元素，dl元素

<body>
    <!--ol-->
    <!--start:开始的序列号, reversed：是否倒序-->
    <ol start="4" reversed>
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
    </ol>

    <!--dl-->
    <dl>
        <dt>Hello</dt>
        <dd>你好就是hello</dd>
    </dl>

    <!--cite元素-->
        <!--斜体显示-->
    <h3>cite元素</h3>
    <p>广州大学 <cite>华软软件学院</cite></p>

    <!--small元素-->
    <p> 广州大学<small>华软软件学院</small></p>

</body>
</html>

progress元素和meter元素

<body>
    <!--请使用 <progress> 标签来显示下载的进度。-->
        <!--max     定义完成的值。-->
        <!--value   定义进程的当前值。-->
    <section>
        <h2>progress元素的使用</h2>
        <p>完成的百分比<progress id="p" max="100" style="background-color: aqua"><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/100</meter>


    <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>
</body>