学习JavaWeb的第1天（2021-11-07）

Posted 有上进心的阿龙

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习JavaWeb的第1天（2021-11-07）相关的知识，希望对你有一定的参考价值。

学习JavaWeb的第1天（2021-11-07）

https://www.bilibili.com/video/BV1gE411x7Q1?from=search&seid=3515337612903275595&spm_id_from=333.337.0.0

学习javaWeb的目标：
整个下来都是学习一个案例。
了解整个javaWeb的技术体系。

1、javaWeb的技术体系；

前端（客户端部分）
后端（服务器部分）

cookie是属于客户端这边的会话控制
session是属于服务器这边的会话控制。

两种软件架构：
BS架构：（火）
B：客户端/典型的客户端就是浏览器(browser)
S：服务端/典型的服务器端就是Tomcat

CS架构：
C：client客户端
S：Server
这种架构必须要有软件的安装包。游戏。


1、登陆页面的开发：

html：
Hyper Text Markup Language
超文本标记语言
文本：txt…只能出现普通文字
超文本：除了文字，还有超链接，图片，视频，音频。
标记：一个html页面都是由各种各样的标记组成的。

前端三剑客：
html+css+js（jQuery）
html：是网页的内容
css：是样式
js：动态行为

常用的html的标签：

1、


一个html页面的最基本的组成结构是：
html：根标记
head：头标记，这里是写一些描述性的信息，例如css和js
body：体标记。写页面显示的东西。
写到body里面的东西会显示再页面上，而写在head标签里面的东西不会。


<html>
    <head></head>
    <body>
        我想写什么就写什么！！！
    </body>
</html>

在<body>标签里面还可以写哪些标签呢？

1、标题标记。h1 - h6

h1 - h6
现在学习的标记都是双标记，有开始，也有结束。

<html>
    <head></head>
    <body>
        我想写什么就写什么！！！
        <h1>E</h1>
        <h2>E</h2>
        <h3>E</h3>
        <h4>E</h4>
        <h5>E</h5>
        <h6>E</h6>
    </body>
</html>


从h1到h6，数字越来越小。

<html>
    <head></head>
    <body>
        我想写什么就写什么！！！
        <h1 align="center">E</h1>
        <h2 align="center">E</h2>
        <h3>E</h3>
        <h4>E</h4>
        <h5 align="right">E</h5>
        <h6 align="right">E</h6>
    </body>
</html>

2、超链接标记 a

可以在href里面去指定你想要跳转的地址（应用内或者应用外）互联网任意一个网站
<a></a>


<html>
    <head></head>
    <body>
        我想写什么就写什么！！！
        <h1 align="center">E</h1>
        <h2 align="center">E</h2>
        <h3>E</h3>
        <h4>E</h4>
        <h5 align="right">E</h5>
        <h6 align="right">E</h6>

    <a href="http://www.baidu.com">点我查看宋老师私密照片</a>
    </body>
</html>


点击这里之后，就会跳转到百度页面的。

3、表格标签table

<table>
	<tr></tr>
</table>

table:表格
tr：行
td或者th：表示列
th：标题列自带标题的效果（居中并且加粗）
td：普通列
我们把列的标签写在行标签里面。
总结：
table标签里面有行标签tr，行标签里面有列标签，列标记又分为普通列和标题列。
标题列：自带居中和加粗效果
普通列：啥也没有

<html>
    <head></head>
    <body>
        我想写什么就写什么！！！
        <h1 align="center">E</h1>
        <h2 align="center">E</h2>
        <h3>E</h3>
        <h4>E</h4>
        <h5 align="right">E</h5>
        <h6 align="right">E</h6>

    <a href="http://www.baidu.com">点我查看宋老师私密照片</a>

    <h1 align="center">员工信息列表</h1>
    <table>
        <tr>
            <th>员工ID</th>
            <th>员工名</th>
            <th>员工性别</th>
            <th>员工描述</th>
        </tr>
    </table>
    </body>
</html>


但是现在看不到表格的格子。



给第二行加上数据。

<html>
    <head></head>
    <body>
        我想写什么就写什么！！！
        <h1 align="center">E</h1>
        <h2 align="center">E</h2>
        <h3>E</h3>
        <h4>E</h4>
        <h5 align="right">E</h5>
        <h6 align="right">E</h6>

    <a href="http://www.baidu.com">点我查看宋老师私密照片</a>

    <h1 align="center">员工信息列表</h1>
    <table border="1px" align="center" width="60%">
        <tr>
            <th>员工ID</th>
            <th>员工名</th>
            <th>员工性别</th>
            <th>员工描述</th>
        </tr>
        <tr align="center">
            <td>1001</td>
            <td>饶滕龙</td>
            <td>男</td>
            <td>深圳第一帅哥</td>
        </tr>
    </table>
    </body>
</html>

给第3行加上数据。

现在我们发现每个格子之间会有空隙。想要把这个空隙去掉：



5、body标签里面可以放的标签五：表单form（用的非常多，重要）

表单的作用：手机用户填入的信息，提交给服务器使用（注册/登陆）
其中：
form标签里面有两个非常重要的属性。
1、action：
这个填入的是你这个表单需要提交的地址。类似于超链接标签a里面的href属性。这个地址就是指明，你收集的用户信息应该提交到什么地方去。
2、method：就是提交方式。
这里的提交方式有两种。
GET
POST

form表单里面可以写的东西：
input输入框里面有个重要的属性type，不同的type可以显示不同的效果。

type=text：普通的文本框

<form action="MyFirstHTML.html" method="get">
        用户名：<input type="text">
    </form>


type=：

补充：
br就是一个换行。

input输入框里面还有个重要的属性name
还有个value，要配合name一起学习
value设置输入框的默认值
不写value，那么输入框就是空的。


如果写了name=“username”
它的作用就是当你这个表单提交的时候，数据是以这样的形式提交的：
username=admin提交给服务器的。

type = password讲解：


type = radio 单选框

单选框（形成互斥的效果，不能同时选中）
这样的，就要求他俩的name值是一样的。


写好name之后，当你选择男的时候，提交表单，就会将gender=1提交到服务器进行处理

<br>
        用户性别：男 <input type="radio" name="gender" value="1">
                女 <input type="radio" name="gender" value="0">

type=checkbox 多选框


 用户兴趣：吃饭 <input type="checkbox" name="hobby" value="eat">
                睡觉 <input type="checkbox" name="hobby" value="sleep">
                打豆豆 <input type="checkbox" name="hobby" value="ddd">
        <br>

select 下拉列表

每一个选项是一个option

 用户地址：省份 <select name="province">
                        <option value="sx">山西省</option>
                        <option value="jx">江西省</option>
                        <option value="gd">广东省</option>
                    </select>

type = submit 提交表单的按钮



用户只要一按这个注册按钮，这个表单里面的信息就会往我们之前填写好的地址里面发送。

按下这个注册按钮，就会跳转到百度。

CSS样式。

现在网页里面做布局不会用table标签，
样式的一些标签需要写在head标签里面。
例如：
style

div里面可以写样式
px 像素

元素选择器 div{}




如果你这个时候，在body标签里面写了两个div标签，那么这个时候会出现两个样式。因为你没有区别。


所以，你需要区分div，使用id来区分

id选择器 #id名{}




class选择器：.类名{}




引入外部的样式文件：

现在我们定义样式都是直接写在head标签里面的style标签里面的。如果有很多个样式，写起来就会很乱。所以，支持外部引入的形式link

1、在你页面的同一个路径下新建mycss.css文件

2、编辑mycss.css文件
把这个样式抽象到文件里面去


3、修改html文件。
之前是这样写的：

现在：

<link rel="stylesheet" type="text/css" href="mycss.css">


发现如果是抽取写道文件的话，之前是写在head里面的style标签厘米按的。
而现在写link标签直接写在head里面。

登陆页面的制作：

第一步：

新建文件：login.html

第二步：
login.html文件

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="login.css">
    </head>
    <body>
        <div>
            <h1>欢迎登录</h1>
            <form action="" method="">
                用户名称 <input type="text" name="username">
                <br><br>
                用户密码 <input type="password" name="password">
                <br>
                <br>
                <input type="submit" name="Login">
            </form>
        </div>
    </body>
</html>

login.css文件

div{
    width: 300px;
    height: 200px;
    background-color: lightcoral;
}


结果：

登陆功能的实现–环境搭建。

涉及到的技术：
1、web服务器
2、动态的web工程。

Web服务器：
与它类似的技术是：socket技术网络编程

Tomcat是当前应用最广泛的javaWeb服务器。

Tomcat服务器的安装及配置。
下载地址：
https://archive.apache.org/dist/tomcat/tomcat-7/v7.0.77/bin/



简单介绍一下tomcat的工作目录结构：

这个文件夹是：web应用的部署目录。
这个就是将来项目的部署位置。
我开发了一个项目，怎么对外提供服务呢？
就需要把自己开发的项目部署到这个webapps这个路径下面。然后Tomcat就可以为我提供服务了。

使用tomcat

1、双击运行startup.bat


2、在浏览器上输入
localhost:8080

3、如果你把这个窗口给关了，那么浏览器访问http://localhost:8080/就进不去了。

正常关闭Tomcat：
ctrl+C

接下来就是将Tomcat服务器配置在idea里面。

https://www.bilibili.com/video/BV16e411s7R4?p=228

以上是关于学习JavaWeb的第1天（2021-11-07）的主要内容，如果未能解决你的问题，请参考以下文章

JavaWeb开发——软件国际化(文本元素国际化)

催希凡javaweb 学习28天

javaweb第一天学习内容

JavaWeb 学习的第一阶段总结

学习java的第15天

学习java的第17天