html 学习笔记（6）

最新推荐文章于 2025-04-22 10:07:38 发布

原创最新推荐文章于 2025-04-22 10:07:38 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

15 篇文章

订阅专栏

html5.页面增强元素：

新增的：

figure元素，figcapiton元素：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--figure 元素和  figurecaption元素-->
<!--figure为网页的一个独立元素，figcaption元素放置在figure元素内部，是figure的标题，
一个fegure元素只能放置一个figcaption-->
<figure>
    <img src="1.jpg" alt="fig">
    <img src="1.jpg" alt="fig">
    <img src="1.jpg" alt="fig">
    <figcaption>风景</figcaption>
</figure>
</body>
</html>

details元素和summary元素：

<!--details元素是一种标识每部资源的元素，可以展开和收缩，默认收缩（false）-->
<!--summery元素为detail的从属元素，没有会提供默认元素-->
<script>
    function detail_onclik(detail){
        var p = document.getElementById("p");
        if(detail.open()){
            p.style.visibility = "hedden";
        }else{
            p.style.visibility = "visible";
        }
    }
</script>
<details id="detail" onclick="detail_onclik(this)">
    <!--<summary>捉妖记</summary>-->
    <p id="p" style="visibility: visible">国产片中票房超过15亿的一部电影，井柏然与白百合主演</p>
</details>

用谷歌浏览器测试，

mark元素

<!--mark元素，高亮显示-->
<p>ssssssssss<mark>ddd</mark>sssss</p>

progress元素和meter元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function btn(){
//        for(var i =0; i<=100; i++){
//            setTimeout(function(){
//                updateprogress(i);
//            },1000)
//        }
        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>
<section>
    <p>完成的百分比<progress style="background-color: aqua" id="p" 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>
</body>
</html>

ol, dl site,small

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--ol-->
<ol start="5", reversed>
    <li>表1</li>
    <li>表2</li>
    <li>表3</li>
    <li>表4</li>
    <li>表5</li>
</ol>

<dl>
    <dt>hello</dt>
    <dd>你好</dd>
    <dt>blog</dt>
    <dd>博客</dd>
</dl>

<!--cite-->
<p>电影<cite>捉妖记</cite></p>
</body>
<!--small标识小字印刷体-->

</html>