0
点赞
收藏
分享

微信扫一扫

PINN物理信息网络 | 物理信息神经网络PINN实例及其Python实现

程序员知识圈 2024-01-15 阅读 13
csscss3前端
6.1 浮动
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 800px;
            background-color: pink;
            margin: 0 auto;
        }
​
        li {
            width: 200px;
            height: 200px;
            float: right;
​
            list-style: none;
            background-color: red;
        }
​
        div {
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
​
<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <div></div>
</body>
​
</html>
  • 解决办法

1、给父元素设置border边框

2、给父元素设置padding值

3、给父元素设置overflow:hidden

上margin塌陷问题是针对父元素里面的第一个子元素产生的问题

下margin塌陷问题是针对父元素里面的最后一个子元素产生的问题

6.2 清除浮动​​​​​​​​​​​​​

  1. 添加额外的空标签，设置属性clear，值为both

  2. overflow属性：属性值为hidden

  3. 给父元素设置after伪元素

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 600px;
            /* 2.overflow属性：属性值为auto hidden scroll visible */
            /* overflow: hidden; */
            background-color: pink;
        }
​
        .box1,
        .box2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
​
        .box2 {
            background-color: green;
        }
​
        /* 1.清除浮动添加额外的空标签，设置属性clear，值为both */
        /* div {
            clear: both;
        } */
        /* 3. */
       .clearfix:after {
           /* 只写一个冒号是为了兼容其他浏览器不支持:: */
           /* content值加点，为了防止低版本浏览器解析时出现空隙问题 */
           content: ".";
           /* 转化为块元素 */
           display: block;
           height: 0;
           /* 隐藏content里面的小点 */
           /* overflow: hidden; */
           visibility: hidden;
           /* 清除浮动 */
           clear: both;
       }
​
       .clearfix {
           /* *代表只有ie6和ie7才会解析这段代码，zoom是ie6和ie7的清除浮动的方法 */
           *zoom: 1;
       }
   </style>
       </head>
​
   <body>
       <div class="father clearfix">
           <div class="box1"></div>
           <div class="box2"></div>
           <!-- <div></div> -->
       </div>
   </body>
​
   </html>

 

 4.给父元素添加双伪元素after before

<!DOCTYPE html>
   <html lang="en">
​
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
           .box1 {
               width: 500px;
               background-color: pink;
           }
​
           .box2 {
               width: 100px;
               height: 100px;
               background-color: red;
               float: left;
           }
​
           .box3 {
               width: 200px;
               height: 100px;
               background-color: green;
               float: left;
           }
        /*双伪元素法*/
           .clearfix:before,
           .clearfix:after {
               content: "";
               display: table;
               /*触发BFC*/
               clear: both;
           }
​
           .clearfix {
               *zoom: 1;
           }
       </style>
   </head>
​
   <body>
       <div class="box1 clearfix">
           <div class="box2"></div>
           <div class="box3"></div>
       </div>
   </body>
​
   </html>

5.BFC块级格式化上下文

 案例1

   <!DOCTYPE html>
   <html lang="en">
​
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
           .box {
               border: 1px solid red;
               /* 开启BFC的元素可以包含浮动的子元素,父元素的垂直外边距不会和子元素重叠  */
               overflow: hidden;
           }
​
           .box1 {
               width: 100px;
               height: 100px;
               float: left;
               background-color: pink;
           }
​
           /* 开启BFC 不会在布局上影响到外面的元素 */
           .box2 {
               width: 200px;
               height: 200px;
               background-color: green;
           }
       </style>
   </head>
​
   <body>
       <div class="box">
           <div class="box1"></div>
       </div>
       <div class="box2"></div>
​
   </body>
​
   </html>

 案例2

   <!DOCTYPE html>
   <html lang="en">
​
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
           .box {
               float: left;
               width: 200px;
               height: 200px;
               background-color: pink;
           }
​
           .box1 {
               width: 500px;
               height: 400px;
               /* 开启BFC的元素**不会被**浮动元素所覆盖 */
               overflow: hidden;
               background-color: red;
           }
       </style>
   </head>
​
   <body>
       <div class="box">我是浮动的元素</div>
       <div class="box1">我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动的元素我是不被浮动</div>
   </body>
​
   </html>

 

三个布局案例

（1）上下布局

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            width: 800px;
            height: 100px;
            margin: 10px auto;
            line-height: 100px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .banner {
            width: 800px;
            height: 50px;
            margin: 10px auto;
            line-height: 50px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .main {
            width: 800px;
            height: 300px;
            margin: 10px auto;
            line-height: 300px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .footer {
            width: 800px;
            height: 200px;
            margin: 10px auto;
            line-height: 200px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
    </style>
</head>
​
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
​
</html>

（2）左右布局

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
​
        .top {
            width: 800px;
            height: 100px;
            margin: 10px auto;
            line-height: 100px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .banner {
            width: 800px;
            height: 50px;
            margin: 10px auto;
            line-height: 50px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .main {
            width: 800px;
            height: 300px;
            margin: 10px auto;
        }
​
        .left {
            float: left;
            width: 200px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .right {
            float: right;
            width: 580px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .footer {
            width: 800px;
            height: 200px;
            margin: 10px auto;
            line-height: 200px;
            text-align: center;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
    </style>
</head>
​
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
​
</html>

（3）多布局

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
​
        .top {
            width: 1000px;
            height: 50px;
            margin: 10px auto;
            /* border: 2px dashed gray;
            background-color: rgb(212, 194, 250); */
        }
​
        .container {
            width: 800px;
            margin: 10px auto;
        }
​
        .banner {
            height: 100px;
        }
​
        .top,
        .banner {
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
​
        .main_top li {
            /* float: left;
            width: 190px; */
            height: 150px;
            /* margin-top: 10px;
            margin-left: 5px; */
            /* border: 2px dashed gray;
            background-color: rgb(212, 194, 250); */
        }
​
        .main_bottom li {
            height: 250px;
        }
​
        .main_top li,
        .main_bottom li {
            float: left;
            width: 190px;
            margin-top: 10px;
            margin-left: 6px;
            border: 2px dashed gray;
            background-color: rgb(212, 194, 250);
        }
    </style>
</head>
​
<body>
    <div class="top"></div>
    <div class="container">
        <div class="banner"></div>
        <div class="main">
            <ul class="main_top">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="main_bottom">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    </div>
​
​
</body>
​
</html>
6.3 定位
6.3.1 相对定位 position:relative;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            background-color: pink;
        }
        .box1,.box2{
            width: 200px;
            height: 200px;
        }
        .box1{
            /* 开启相对定位 */
            position: relative;
            /* 设置偏移量 */
            top: 20px;
            /* 元素设置偏移量时，可以同时设置margin值，不推荐同时使用 */
            margin-bottom: 40px;
            background-color: red;
​
        }
        .box2{
            background-color: skyblue;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: green;
            /* 开启相对定位 */
            position: relative;
            top: 20px;
        }
​
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <!-- 元素开启相对定位后，行内元素还是行内元素 -->
        <span>你好</span>
        <div class="box2"></div>
    </div>
</body>
</html>

 相对定位案例

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 320px;
            height: 320px;
            border: 1px solid #f00;
        }
​
        a {
            width: 100px;
            height: 100px;
            display: inline-block;
            text-decoration: none;
            color: #fff;
            background-color: pink;
        }
​
        a:nth-child(3) {
            position: relative;
            top: 200px;
            left: -200px;
        }
​
        a:nth-child(2) {
            position: relative;
            left: 100px;
        }
​
        a:nth-child(4) {
            position: relative;
            right: -200px;
            bottom: -100px;
        }
    </style>
</head>
​
<body>
    <div class="box">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
</body>
​
</html>

 

6.3.2 绝对定位 position:absolute;
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
​
        .father {
            width: 500px;
            height: 500px;
            /* 子绝父相 */
            position: relative;
            background-color: pink;
            padding: 10px;
            margin: 0 auto;
        }
​
        .box1 {
            width: 90px;
            height: 100px;
            /* 设置绝对定位 */
            position: absolute;
            background-color: blue;
        }
​
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* 设置绝对定位 */
            /* position: absolute; */
            /* float: right;
            left: 100px;
            top: 0; */
        }
​
        .box3 {
            width: 110px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
​
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
​
</html>

 

6.3.3 固定定位 position:fixed;
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 80px;
            height: 30px;
            position: fixed;
            right: 10px;
            bottom: 50px;
            line-height: 30px;
            text-align: center;
            background-color: #4F4F4F;
        }
    </style>
</head>
​
<body>
    <div>回到顶部</div>
    <p>
        很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
        很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
        风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
        深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
        我们也像一群大雁，飞翔在人生的天空中。
        前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
        当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
        再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
        我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
        当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
        很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
        风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
        深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
        我们也像一群大雁，飞翔在人生的天空中。
        前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
        当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
        再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
        我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
        当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
        很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
        风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
        深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
        我们也像一群大雁，飞翔在人生的天空中。
        前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
        当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
        再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
        我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
        当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
        很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
        风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
        深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
        我们也像一群大雁，飞翔在人生的天空中。
        前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
        当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
        再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
        我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
        当秋天不再，大雁飞过千山，南方的冬天还会冷吗?很多年了，习惯了抬头看天空。当春天的风筝布满天空的时候，笑容里是甜蜜的一汪清泉。当大雁飞过天空的时候，秋天已经到了尽头，笑容里迷离着一股离愁。喜欢抬头的那种姿态，很多关于梦的想法，都会觉得不再遥远。抬起头看天空的那一刻，放飞的心绪里满载着无数的渴望。无论是想放下悲伤，还是想充满希望，就在那遥远的天际，如丝如缕。
        很早都学会了不惧怕的活着，因为每天的天空上都会出现太阳，于是不惧怕遇见的困难，是因为明天的太阳不会因为某一种因素而不在天上。仰望天空，收获着力量。
        风筝飞起了，我想起过。大雁南飞时，我依然会想起.可能是曾经心动的人，可能是曾经帮助过自己的人，也可能只是一个模糊的情愫，更可能是一个很早的梦想。
        深居在秋色里，望着天上的大雁飞过，小小的大雁能越过千山万水的从北方迁移到南方，需要多大的力量来支撑着它们的一路艰辛。不惧怕的精神，让大雁成群结队的，彼此鼓励彼此支持着，一路向南。
        我们也像一群大雁，飞翔在人生的天空中。
        前面的路程是自己不可以预知的未来，可能或有险滩，可能会有丛林，可能会遇上豺狼虎豹，可能会有生命的危险。这所有的困难，我们都要不惧怕它的存在，而勇往直前。
        当你披荆斩棘，当你委屈流泪，当你绝望彷徨，当你得意尽欢，这一切的遭遇都是我们应该遇见的，所以，不要途中放弃，不要自暴自弃。
        再次凝望着远去的大雁，秋天随着时间的流逝，渐渐远去。
        我们都会老去，可是，在你飞翔的时候，你是否竭尽全力?
        当秋天不再，大雁飞过千山，南方的冬天还会冷吗?
    </p>
</body>
​
</html>

 

6.3.4 粘性定位 position:sticky;
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
​
        body {
            height: 2000px;
​
        }
​
        ul {
            height: 700px;
            background-color: #ccc;
        }
​
        ul li {
            height: 100px;
            list-style: none;
        }
​
        li:nth-child(odd) {
            background-color: pink;
        }
​
        li:nth-child(even) {
            background-color: skyblue;
        }
​
        li:nth-child(3) {
            position: sticky;
            top: 50px;
        }
    </style>
</head>
​
<body>
    <ul>
        <li></li>
        <li></li>
        <li>3</li>
        <li></li>
        <li></li>
    </ul>
</body>
​
</html>

定位特点：

​​​​​​​​​​​​​

  1. 如果定位元素的层级是一样，则下边的元素会盖住上边的

  2. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示

  3. 对于没有开启定位的元素不能使用z-index

​​​​​​​

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
​
        .box1 {
            position: relative;
        }
​
        .box2 {
            width: 250px;
            position: absolute;
            z-index: 999;
            background-color: pink;
        }
​
        .box3 {
            width: 220px;
            position: fixed;
            /* z-index: 2; */
            background-color: skyblue;
        }
    </style>
</head>
​
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
​
</html>
6.4 语义化标签

6.4.1 布局标签（了解）

6.4.2 状态标签（了解）

6.4.3 表单控件

 <form action="#">
        姓名: <input type="text" name="usename" placeholder="请输入姓名" autofocus><br />
        密码：<input type="password" name="password" placeholder="请输入密码"><br />
        性别：<input type="radio" name="sex">男<br />
        爱好：<input type="checkbox" name="hobby">敲代码<br />
​
​
        邮箱： <input type="email" name="email" required><br />
        数值： <input type="number" step="4" min="50"><br />
​
        搜索框： <input type="search"><br />
        颜色：<input type="color"><br />
        日期：<input type="date"><br />
        月份： <input type="month"><br />
        周：<input type="week"><br />
        时间：<input type="time">
        <input type="submit"><br />
</form>

 

举报

相关推荐

PINN物理信息网络 | 全局自适应物理信息神经网络SA-PINN

appiumpythonui职场和发展软件测试自动化测试功能测试

物理信息神经网络(PINN)

接口隔离原则

简单网络管理协议(SNMP)实现linux系统信息网络监控

Linux系统/运维

信息网络协议基础-接入网技术

网络协议网络

2024华北医院信息网络大会参会指南

华北深度学习人工智能

信息网络传播视听节目服务单位的设立与经营

技术方案互联网新闻网络游戏IT职场

2024华东医院信息网络大会又更新多位出席嘉宾！

数据中心信息管理人工智能Python后端开发

Matlab RBF神经网络及其实例

欧氏距离权值神经网络Python编程语言yyds干货盘点

基于物理信息的神经网络（Physics-informed Neural Networks；PINNs）Part-1（简单介绍）

c++开发语言

神经网络python 实现

Data数据感知器HarmonyOS后端开发
0 条评论