Html5学习笔记(1)

时间：2021-12-26 23:00:47

1、figure\figcaption||detail\summary||mark学习笔记

效果图Html5学习笔记(1)

代码为:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

<figure>

    <img src="0fb2bcd14fd7aa2d7b046fe48e566f7a.jpg" alt="zhongguo" style="width:25%" />

    <img src="4fdd3cb901efc1f921892a6c1b4469b4.jpg" alt="nanhai" style="width:25%" />

    <img src="ec25e5957e76f3e5ed9d3d02191841bd.jpg" alt="beijing" style="width:25%" />

    <figcaption>中国南海</figcaption>

</figure>

    <script>

        function showorhide(detail)

        {

            var p = document.getElementById("p");

            if(detail.open)

            {

                p.style.visibility = "hidden";

            }

            else

            {

                p.style.visibility = "visible";

            }

        }

    </script>

    <details id="detail" onclick="showorhide(this)">

        <summary>中国南海</summary>

        <p id="p"><mark>中国南海是神圣的.</mark></p>

    </details>

</body>

</html>

2、progress\meter\indeterminate\image

 效果图

Html5学习笔记(1)

代码如下:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

</head>

<body>

    <script>

        function btn() {

            var i = 0;

            function thread() {

                if (i <= 100) {

                    i++;

                    updateprogress(i);

                }

            }

            setInterval(thread, 100);

        }

        function updateprogress(newvalue)

        {

            var progerss = document.getElementById("p")

            p.value = newvalue;

            p.getElementsByTagName("span")[0].textContent = newvalue;

        }

    </script>

    <section>

        <h2>progress元素的使用</h2>

        <p>完成的百分比<progress id="p" style="background-color:burlywood" max="100"><span>0</span>%</progress></p>

        <input type="button" onclick="btn()" value="dianji" />

    </section>

    <meter value="90" min="0" max="100" low="10" high="80"></meter>

    </br>

    </br>

    <input type="checkbox"  indeterminate id="checkboxtext" />

    <script>

        var check = document.getElementById("checkboxtext");

        check.indeterminate=true

    </script>

    </br>

    </br>

    <input type="image" src="4d33fe553927af2855ed237c93369706.jpg" alt="test" width="50" height="50"/>

</body>

</html>

其中indeterminate属性可以控制checkbox处于选中和非选中之间,在图中是一个横线,image主要展示了width和height属性,可以控制图片的宽度和高度.

相关文章