JavaWeb学习笔记02——登录页面的开发

最新推荐文章于 2024-04-18 11:11:16 发布

aldalee

最新推荐文章于 2024-04-18 11:11:16 发布

阅读量290

点赞数

分类专栏： # JavaWeb

本文链接：https://blog.csdn.net/weixin_44672474/article/details/107348862

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、项目需求分析

本次项目需要用HTML和CSS实现一个登录页面，预览如下图所示：
在这里插入图片描述

二、涉及的知识点

HTML
常用的HTML标签：

标签	名称
HTML	根标记
head	头标签
body	体标记
a	超链接
form	表单
table	表格

（1）表单：收集用户的信息，提交到后台服务器 action="提交的地址" method="提交方式 "

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="https://www.baidu.com" method="get/post">
        <!--数据提交方式：username=admin-->
        username: <label>
        <input type="text" name="username" value="admin">
    </label>
        <br>      <!-- 换行-->
        password: <label>
        <input type="password" name="password">
    </label>
        <br>
        sex: man<label>
        <input type="radio" name="gender" value="1">
    </label>
        woman<label>
        <input type="radio" name="gender" value="0">
    </label>
        <br>
        hobby: eat<label>
        <input type="checkbox" name="hobby" value="eat">
    </label>
        sleep<label>
        <input type="checkbox" name="hobby" value="sleep">
    </label>
        study<label>
        <input type="checkbox" name="hobby" value="study">
    </label>
        <br>
        <!--下拉列表-->
        address: province<label>
        <select name="province">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
    </label>
        <br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

运行结果：
在这里插入图片描述
（2）表格的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <h1 align="center">员工信息列表</h1>
    <!--表格 列标签嵌套到行标签里 cellspacing="0px" 设置成单元格之间无空袭-->
    <table  border="3px" align="center" width="60%" >
        <!-- tr表示行 -->
        <tr>
            <!--th :标题列 自带居中并加粗的效果       td :普通列 -->
            <th>ID</th>
            <th>Name</th>
            <th>Sex</th>
            <th>Description</th>
        </tr>
        <tr align="center">
            <td >180512201</td>
            <td >Tom</td>
            <td >man</td>
            <td >Boss</td>
        </tr>
        <tr align="center">
            <td >180512202</td>
            <td >Jee</td>
            <td >woman</td>
            <td >Student</td>
        </tr>
        <tr align="center">
            <td >180512203</td>
            <td >Java</td>
            <td >man</td>
            <td >Java不是完全面向对象的语言</td>
        </tr>
        <tr align="center">
            <td >180512204</td>
            <td >Python</td>
            <td >woman</td>
            <td >人生苦短,我学Python</td>
        </tr>
        <tr align="center">
            <td >180512205</td>
            <td >Scala</td>
            <td >man</td>
            <td >Scala是一门多范式的编程语言</td>
        </tr>
        <tr align="center">
            <td >180512206</td>
            <td >Hadoop</td>
            <td >woman</td>
            <td >Hadoop是一个由Apache基金会所开发的分布式系统基础架构</td>
        </tr>
        <tr align="center">
            <td >180512207</td>
            <td >Spark</td>
            <td >man</td>
            <td >Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎</td>
        </tr>
        <tr align="center">
            <td >180512208</td>
            <td >C++</td>
            <td >woman</td>
            <td >C++是C语言的继承</td>
        </tr>
    </table>
</body>
</html>

运行结果：
在这里插入图片描述

/*(1)元素选择器 选中所有*/
div{
    width: 400px;
    height: 200px;
    border: 2px solid aqua;
    background-color: yellow;
}
/*(2)id选择器 唯一*/
#div2{
    width: 400px;
    height: 200px;
    border: 2px dashed blueviolet;
    background-color: pink;
}
/*(3)class选择器 可以重复*/
.div_same{
    width: 400px;
    height: 200px;
    border: 2px dotted blanchedalmond;
    background-color: red;
}

三、登陆界面的源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
	<link rel="stylesheet" type="text/css" href="./css/login.css">
	<script type="text/javascript" src="./js/login.js"></script>
</head>
<body background="./image/1.jpg">
    <div>
        <h1 align="center">欢迎登录</h1>
        <form action="login" method="post">
            <h4>
                	用户姓名：<label>
                <input type="text" name="username" style="color: deepskyblue;font-size: 25px" >
            </label>
            </h4>
            <h4>
                	用户密码：<label>
                <input type="password" name="password" style="color: red;font-size: 25px">
            </label>
            </h4>
            <h4>
                <input type="submit" value="登录" id="submit" >
            </h4>
        </form>
    </div>
</body>
</html>

说明：

(1) action:请求的地址
(2) method:请求的方式
get: http://localhost:8080/web/login?username=admin&password=123456
post: http://localhost:8080/web/login
get方式提交：不安全【将请求数据拼接到请求地址中，直接暴漏出来】，数据量有限制
post方式提交：相对安全【将请求数据存到请求体中提交，不会直接暴漏出来】

@charset "UTF-8";
 div{
     width: 400px;
     height: 250px;
     /*border: 2px dotted blueviolet;*/
     position: absolute;
     left: 40%;
     top: 10%;
     /*background-color: yellow;*/
 }
 input{
     width: 150px;
     height: 25px;
     /*background-color: pink;*/
 }
 h4{
     position: relative;
     left: 20%;
 }
 #submit{
     position: relative;
     left: 10%;
     width: 180px;
     height: 40px;
     font-size: larger;
     background-color: whitesmoke;
 }