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

一、项目需求分析

本次项目需要用HTML和CSS实现一个登录页面,预览如下图所示:
JavaWeb学习笔记02——登录页面的开发_第1张图片

二、涉及的知识点

  • HTML
    常用的HTML标签:
标签 名称
HTML 根标记
head 头标签
body 体标记
a 超链接
form 表单
table 表格
(1)表单:收集用户的信息,提交到后台服务器 action="提交的地址" method="提交方式 "

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单title>
head>
<body>
    <form action="https://www.baidu.com" method="get/post">
        
        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>

运行结果:
JavaWeb学习笔记02——登录页面的开发_第2张图片
(2)表格的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格title>
head>
<body>
    <h1 align="center">员工信息列表h1>
    
    <table  border="3px" align="center" width="60%" >
        
        <tr>
            
            <th>IDth>
            <th>Nameth>
            <th>Sexth>
            <th>Descriptionth>
        tr>
        <tr align="center">
            <td >180512201td>
            <td >Tomtd>
            <td >mantd>
            <td >Bosstd>
        tr>
        <tr align="center">
            <td >180512202td>
            <td >Jeetd>
            <td >womantd>
            <td >Studenttd>
        tr>
        <tr align="center">
            <td >180512203td>
            <td >Javatd>
            <td >mantd>
            <td >Java不是完全面向对象的语言td>
        tr>
        <tr align="center">
            <td >180512204td>
            <td >Pythontd>
            <td >womantd>
            <td >人生苦短,我学Pythontd>
        tr>
        <tr align="center">
            <td >180512205td>
            <td >Scalatd>
            <td >mantd>
            <td >Scala是一门多范式的编程语言td>
        tr>
        <tr align="center">
            <td >180512206td>
            <td >Hadooptd>
            <td >womantd>
            <td >Hadoop是一个由Apache基金会所开发的分布式系统基础架构td>
        tr>
        <tr align="center">
            <td >180512207td>
            <td >Sparktd>
            <td >mantd>
            <td >Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎td>
        tr>
        <tr align="center">
            <td >180512208td>
            <td >C++td>
            <td >womantd>
            <td >C++是C语言的继承td>
        tr>
    table>
body>
html>

运行结果:
JavaWeb学习笔记02——登录页面的开发_第3张图片

  • CSS
/*(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;
}

三、登陆界面的源码

  • login.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>logintitle>
	<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方式提交:相对安全【将请求数据存到请求体中提交,不会直接暴漏出来 】

  • login.css
@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;
 }

你可能感兴趣的:(JavaWeb)