HTML5学习笔记(1)

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

效果图

代码为:

复制代码
<!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

 效果图

代码如下:

复制代码
复制代码
复制代码
<!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属性,可以控制图片的宽度和高度.

复制代码
复制代码
posted @   tuohaibei  阅读(317)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae