HTML5设计注册/登录界面

学习目标：

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

---

学习内容：

1. 掌握 HTML5基本语法
2. 掌握CSS基本语法
3. HTML5网页设计
4. 掌握块级标签
5. 掌握行内标签
6. 表单的使用方法
7. iput常用属性

---

学习时间：

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

---

学习产出：

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

---

HTML代码：

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

    
    



    

        
请注册
        已有账号？
        登录
        

        

        用户名：
        

        

        手机号：
            
                +86
                +12
                +港澳台
            
            
        

        

        密 码：
        

        

        验证码：
        
        

        

        
        阅读并接受协议
        

        

        注册
    

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

---

CSS代码：

1. 对界面进行格式的设置

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

---

展示图： 

1. 在运行HTML文件时电击自己需要使用的浏览器进行效果展示

   

2. 这里是设计结果的最终登录界面，这只是最初始的模型图，可以实现提交，但是数据并未有存储，其他功能还需要学习后续知识才能实现