HTML5——增强页面元素

最新推荐文章于 2023-08-21 16:45:48 发布

原创最新推荐文章于 2023-08-21 16:45:48 发布 · 818 阅读

1 ·

CC 4.0 BY-SA版权

前端工程师学习笔记同时被 3 个专栏收录

85 篇文章

订阅专栏

html

26 篇文章

订阅专栏

web

20 篇文章

订阅专栏

本文详细介绍了HTML、CSS、JavaScript等前端技术的基本概念、应用实例及最佳实践，帮助开发者深入理解并掌握前端开发的核心技能。

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

1、figure元素

一个figure元素只能包含一个figcaption标题，但可以包含多个其它元素。

2、details和summary元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>details</title>
</head>
<body>
    <details id="details">
        <summary>速度与激情7</summary>
        <p id="p">你好吗？</p>
    </details>
</body>
</html>

点击summary时，p元素的内容显示或者隐藏。

3、mark元素

突出高亮mark中的文字。

4、progress元素

表示一个不清楚完成度的任务进度，可以用数字来表示完成情况。可以通过设置progress的value属性，来改变进度条的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progress</title>
    <script src="util.js"></script>
</head>
<body>
    <section>
        <h2>progress元素的使用</h2>
        <p>完成的百分比<progress id="p" max="100" value="0"></progress><span>0</span>%</p>
        <input type="button" onclick="btn();" value="点击">
    </section>
</body>
</html>

util.js

function btn(){
    var i = 0;
    function thred_one(params) {
        if(i<100){
            i++;
            updateprogress(i);
        }        
    }
    setInterval(thred_one,100);
}
 
function updateprogress(newValue){
    var progressBar = document.getElementById("p");
    progressBar.value = newValue;
    document.getElementsByTagName("span")[0].textContent = newValue;
}

5、meter元素

规定空间的使用量。有当前值value，最小/最大值min/max,高值/低值high/low,还有一个合适值optimum。当value低于或者大于low/high时，meter的样式出现警告样式，其他时候柔和的样式。

6、ol、dl、cite、small元素

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

start表示序号的开始数字，reversed表示倒序。
重新定义的dl元素表示多个名字的列表项。

cite元素表示作品标题。
small元素表示小字印刷体。