学习目标：

掌握 HTML5入门知识
掌握 CSS入门知识

学习内容：

掌握 HTML5基本语法
掌握CSS基本语法
HTML5网页设计
掌握块级标签
掌握行内标签
表单的使用方法
iput常用属性

学习时间：

周一至周五早上 7 点—晚上9点
周六上午 9 点-晚上9点
周日下午 3 点-下午 6 点

学习产出：

技术笔记1 篇
CSDN 技术博客 1 篇
使用HTML设计一个基本登录界面
使用CSS对登录界面进行格式设计

HTML代码：

这里是对登录界面的元素进行初步的设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<div>
    <form action="#" method="post">
        <h2>请注册</h2>
        <span name="yes">已有账号？</span>
        <a href="#">登录</a>
        <br>
        <br>
        用户名：<input type="text" placeholder="请输入用户名" name="user">
        <br>
        <br>
        手机号：
            <select style="width: 50px;height: 40px">
                <option value="+86">+86</option>
                <option value="+12">+12</option>
                <option value="+港澳台">+港澳台</option>
            </select>
            <input type="tel" placeholder="请输入手机号" name="tele">
        <br>
        <br>
        密&emsp;码：<input type="password" placeholder="请设置登录密码" name="pwd">
        <br>
        <br>
        验证码：<input type="text" placeholder="请输入验证码" class="yz">
        <button class="ipt"></button>
        <br>
        <br>
        <input type="checkbox" style="vertical-align: middle">
        <span>阅读并接受协议</span>
        <br>
        <br>
        <center><button type="submit">注册</button></center>
    </form>
</div>
</body>
</html>

因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签
span标签是一个基本的文本标签
如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转
input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果
设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的效果
还需要注意的是form标签处的method属性，它有两个不同值。设置post值时提交时网址处不会显示表单内个人信息，而get提交，提交时网址处会显示在设置时有name属性的值。所以我们需要使用post才可以有效防止用户隐私被泄露

CSS代码：

对界面进行格式的设置

<link rel="stylesheet" href="../CSS/样式文件/样式1.css">
<style>
        div{
            /*居中*/
            margin: auto;
            /*可以通过内边距设置*/
            width: 460px;
            height: 520px;
            border: grey solid 2px;
            border-radius: 5px;
            /*将用户选择时的格式取消*/
            user-select: none;
        }
        form{
            width: 420px;
            height: 520px;
            position: relative;
            left: 20px;
        }
        span{
            color: grey;
        }
        input{
            border-radius: 5px;
            border: lightgrey 1px solid;
            font-size: 7px;
            height: 40px;
            width: 348px;
            /*先设定一个值，在通过页面检查按住width一直加减：上下箭头直到边框突然回缩*/
        }
        input[name="tele"]{
            border-radius: 5px;
            border: lightgrey 1px solid;
            font-size: 7px;
            height: 40px;
            width: 288px;
        }
        input[type="checkbox"]{
            border-radius: 5px;
            border: lightgrey 1px solid;
            height: 15px;
            width: 15px;
        }
        button[type="submit"]{
            border: lightgrey 1px solid;
            border-radius: 5px;
            height: 50px;
            width: 350px;
            background-color: #65bdff;
            text-align: center;
            /*设置字距*/
            letter-spacing: 2px;
            /*移入按钮后变成小手形式*/
            cursor: pointer;
        }

        .yz{
            border: lightgrey 1px solid;
            /*百分比是以宽度为基础计算的，用px可以使框圆的匀称*/
            border-radius: 5px;
            font-size: 7px;
            height: 40px;
            width: 241px;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            /*设置下划线*/
            text-decoration: underline;
        }
        .ipt{
            width: 104px;
            height: 44px;
            background: url("images/验证码.jpg") no-repeat center/104px 44px;
            /*设置按钮与前面验证码框居中对齐，否则没有文字的按钮会与前面的文本对齐*/
            vertical-align: middle;
        }
    </style>

这里我自己有一个样式文件，是用来重置浏览器自带的样式界面的，以免造成不同浏览器最终设计结果出现混乱，大家可以参考ResetCSS：CSS Tools: Reset CSS这是一个公共的样式重置模板，大家自行复制存储到css文件中，然后将文件路径写入link标签中的href属性内就可以正常使用
这里涉及到多种CSS选择器，大家可以自行学习，然后对我的这段代码才能有理解，比如有 [ ] 是属性选择器，前面加上了 . 是类选择器，什么都不加直接写标签是标签选择器，这里只说到我这里面使用的属性选择器，具体其他使用方法大家自行学习