想躺平的第三天 -

实现表单的登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
    <link rel="stylesheet" href="">
</head>
<style>
    h2{
        color: blue;
    }
</style>
<body>
    <div>
        <!-- label.for=input.id  绑定 -->
        <label for="username">用户名:</label>
        <!-- autofocus布尔属性 自动获取焦点 -->
        <!-- required布尔属性   必须填写 -->
        <input type="text" name="username" id="username" autofocus required>
        <br>
        <label for="psw">密码:</label>
        <!-- required布尔属性 必须填写 -->
        <input type="password" name="password" id="psw" required>
        <br>
        <label for="my-email">邮箱</label>
         <!-- required布尔属性 必须填写 -->
        <input type="email" id="my-email" name="email" required>
    </div>
    <div>
        <label for="male">性别:</label>
        <!-- checked布尔属性  意思是: 选中    -->
        <input type="radio" name="sex" id="male" checked><label for="male">男</label>
        <input type="radio" name="sex" id="female"><label for="female">女</label>
    </div>
    <div>
        <label for="lq">爱好</label>
        <!-- checkbox : 复选框 -->
        <!-- 复选框 name是数组   因为想要发送到后端中,必须是数组 -->
        <!-- checked布尔属性 -->
        <input type="checkbox" name="select[]" id="sy" checked><label for="sy">摄影</label>
        <input type="checkbox" name="select[]" id="lq"><label for="lq">篮球</label>
        <input type="checkbox" name="select[]" id="zq"><label for="zq">足球</label>
        <input type="checkbox" name="select[]" id="yx"><label for="yx">游戏</label> 
    </div>
</body>
</html>

<a>+<iframe> 后台架构实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- a标签  超链接 -->
    <!-- a.target属性规定在哪里打开链接文档 -->
    <a href="https://map.baidu.com/@12609384.2,2631450.580000001,12z" target="myname">去躺平的世界</a>
    <!-- iframe.name=a.target  -->
    <!-- iframe.name可以作为链接的目标 -->
    <iframe src="" frameborder="0" name="myname"></iframe>
</body>
</html>

css样式来源与优先级

第一种样式来源,既我们(程序员)自己定义的样式

第二种样式来源,既本身自带的css样式

css优先级

在上面这个图中我们可以看到 <p>标签并没有写css样式 color属性,但是可以看到 <p>标签的内容变成红色了, 也就是我们常见的继承属性

再看看下面的图片

在<p>标签中添加了css样式后,可以看到内容又变成了蓝色, 为什么div标签明明已经写了color,然后又在p标签中写color,内容会显示p标签中color呢?
这是因为css样式优先级写在p标签内的css样式优先级大于div签内的css样式优先级