學習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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/353424.html
標籤：其他