HTML+CSS+Servlet - 台部落

HTML

一、HTML簡介

1.1 HTML概述

HTML全稱：Hyper Text Markup Language（超文本標記語言）

HTML是一門用戶創建網頁文檔的標記語言，網頁本身是一種文本文件，在文本文件中添加標記符

瀏覽器解析HTML標記的內容（文字的處理，排版的安排，圖片如何顯示、音頻、視頻等等）

HTML是用來創建網頁的標記語言

1.2 HTML特點

1.簡易性：超文本標記語言的版本升級採用的超集方式。更加方便靈活

2.可擴展性：超文本標記語言採取的子類元素的方式，爲系統擴展帶來保證

3.平臺無關性

4.通用性：HTML是網絡的通用語言，一種簡單、通用的標記語言

1.3 HTML的發展

超文本標記語言(第一版)—1993年6月作爲互聯網工程小組（IETF）工作草案發布（並非標準）

HTML2.0 --1995年11月

HTML3.2–1997年1月14日，W3C標準

HTML4.0 --1997年12月18日 W3C標準

HTML4.01 --1999年12月24日 W3C的推薦標準

HTML5—2014年10月29日，W3C推薦標準

1.4 HTML基本結構

<!--文檔聲明，告訴瀏覽器使用HTML5版本解析-->
<!DOCTYPE html>
<html>
	<!--網頁頭部-->

	<head>
        <!--頁面的字符編碼-->
   		 <meta charset="utf-8"/>
        <!--頁面的標題-->
        <title>我的頁面</title>
	</head>
    <body>
        展示的內容
    </body>
</html>

1.HTML頁面包含了頭部head和主體body

2.HTML標籤通常是成對出現的，有開始標籤，有結束標籤，稱爲對標籤，沒有結束標籤的爲空標籤

3.HTML標籤通常都有屬性，格式：屬性名=“屬性值” 多個屬性用空格間隔

4.HTML標籤不區分大小寫，建議小寫

5.HTML文件後綴名爲html或htm

二、HTML基本標籤

2.1 結構標籤

<html></html>：根標籤
<head>：頭標籤
    <titile></titile>:頁面標題
</head>
<body>:主題標籤，顯示網頁內容
    
</body>

屬性：

color：文本的顏色

bgColor：背景色

background：背景圖片

顏色的表達方式：

第一種：顏色名稱:red blue

第二種：RGB模式

2.2 排版標籤

1.註釋標籤：

2.換行標籤：

3.段落標籤：
文本文字

特點：段落與段落之間有行高（行間距）自帶換行

屬性：文本對齊方式align（left、center、right）

4.水平線標籤：

屬性：

width：水平線的長度（兩種：像素表示。百分比表示）

size：水平線的粗細

color：

align：水平線的對齊方式

2.3 標題標籤

<h1></h1>
標籤下值數字越大，字號越大
<h6></h6>

2.4 容器標籤

<div></div> 塊級標籤 獨佔一行，自帶換行
<span></span> 行級標籤，所有內容都在同一行
	作用：<div>主要結合css做頁面分塊 佈局
 	<span>進行友好提示信息的顯示

2.5 列表標籤

2.5.1無序列表

ul(unorder list) //默認標識爲實心圓disc type="" circle 空心圓 square 黑色方塊

2.5.2 有序列表

ol(order list)//有序列表，默認標識爲阿拉伯數字 1 type="" A a字母字典順序 i I 羅馬數字

2.5.3 定義列表

dl(defination list)定義列表

dt(defination title)定義標籤定義標題

dd(defination description)定義描述

		<dl>
			<dt>標題1</dt>
			<dd>描述1</dd>
			<dt>標題2</dt>
			<dd>描述2</dd>
		</dl>

2.5.4 列表的嵌套


		<ul>
			<li>最新娛樂新聞</li>
				<dl>
					<dt>青春有你2</dt>
					<dd>導師團隊陣容強大</dd>	
				</dl>
			<li>最強緋聞之聲</li>
			<li>熱門影視劇情</li>
		</ul>

2.6 圖片標籤

<img/>獨立標籤
屬性：
	src 圖片地址
	width 圖片的寬度
	height 圖片的高度
	border邊框
	alt 圖片的文字說明，當圖片未能正確加載時，才顯示
	title 鼠標懸停時，顯示的文字

2.7 鏈接標籤

超鏈接可以是文本，也可以是圖片，可以點擊連接標籤，進入新的文檔，或者是當前文檔的某個部分

<a></a> //href="跳轉的地址" 
    target：_self(當前文檔) 
    target：_blank(新頁面)  
    target：_search(之前打開的頁面存在則不打開新的頁面直接複用)
#name充當錨點（頂部、底部）
需要爲標籤提供name屬性，進行賦值
需要點擊跳轉的標籤href屬性給#name

2.8 表格標籤

表格由
標籤來定義，每個表格均有若干行（由tr標籤定義行），每行由若干個單元格組成（由td標籤來定義）。每一個數據單元可以包含文本、圖片、列表

2.8.1 普通表格

table tr td

<!--創建表格table 行tr 列td
			默認沒有邊框體現
			border：邊框的寬度
			bordercolor：邊框的顏色
			cellspacing： 單元格邊框
			cellpadding：單元格與內容的間距
			width：寬度
			height：高度
			align:控制表格的對齊方式left center right
			td的屬性：
			align：控制單元格內容的對齊方式left center right
			valign：控制單元格內容的垂直對齊方式 top middle bottom
		-->
		<table border="1" bordercolor="red" cellspacing="0" cellpadding="0" align="center"> 
			<tr>
				<td>姓名</td>
				<td>性別</td>
				<td>年齡</td>
			</tr>
			<tr>
				<td align="center" valign="center">kunyan</td>
				<td>女</td>
				<td>未知</td>
			</tr>
		</table>

2.8.2 表格的表頭

th

<!--th作爲表頭，默認居中，加粗-->
<table border="1"> 
			<tr>
				<th>姓名</th>
				<th>性別</th>
				<th>年齡</th>
			</tr>
			<tr>
				<td align="center" valign="center">kunyan</td>
				<td>女</td>
				<td>未知</td>
			</tr>
</table>

2.8.3 表格的列合併

colspan

<table border="1"> 
			<tr>
				<td align="center" colspan="4">學生信息表</td>
			</tr>
			<tr>
				<th>姓名</th>
				<th>性別</th>
				<th colspan="2">成績</th>
			</tr>
			<tr>
				<td align="center" valign="center">kunyan</td>
				<td>女</td>
				<td>133</td>
				<td>122</td>
			</tr>
		</table>

2.8.4 表格的行合併

rowspan

<table border="1"> 
			<tr>
				<td align="center" colspan="4">學生信息表</td>
			</tr>
			<tr>
				<th>姓名</th>
				<th>性別</th>
				<th colspan="2">成績</th>
			</tr>
			<tr>
				<td align="center" valign="center" rowspan="2">kunyan</td>
				<td rowspan="2">女</td>
				<td>133</td>
				<td>122</td>
			</tr>
			<tr>
				<td>133</td>
				<td>122</td>
			</tr>
		</table>

2.9 文本格式化標籤

		<!--粗體文本-->
		<b>今天天氣好</b><br/>
		<!--大號字-->
		<big>今天天氣好</big><br/>
		<!--着重文字-->
		<em>今天天氣好</em><br/>
		<!--斜體字-->
		<i>今天天氣好</i><br/>
		<small>今天天氣好</small><br/>
		<!--定義加重語氣-->
		<strong>今天天氣好</strong><br/>
		<!--下標字-->
		co<sub>2</sub><br/>
		<!--上標字-->
		10<sup>2</sup><br/>
		<!--插入字-->
		<ins>sad</ins><br/>
		<!--刪除字-->
		<del>天氣好</del>

三、基本標籤的綜合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--頭部-->
		<div>
			<table width="100%" align="center">
				<tr>
					<td align="left">
						千鋒教育-稀有的堅持全程面授品質的大型IT教育機構
					</td>
					<td align="right"> 
						<a>好程序員特訓營&nbsp;&nbsp;</a>
						<a>JavaEE分佈式開發&nbsp;&nbsp;</a>
						<a>JavaSE核心基礎&nbsp;&nbsp;</a>
						<a>加入我們</a>
					</td>
				</tr>
				<tr>
					<td>
						<img src="img/new_logo.png" />
					</td>
					<td align="right">
						<img src="img/nav_r_ico.png"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<hr />
						<span>首頁&nbsp;&nbsp;</span>
						<span>課堂培訓&nbsp;&nbsp;</span>
						<span>教學保障&nbsp;&nbsp;</span>
						<span>免費視頻&nbsp;&nbsp;</span>
						<span>公開課&nbsp;&nbsp;</span>
						<span>企業合作&nbsp;&nbsp;</span>
						<span>就業喜報&nbsp;&nbsp;</span>
						<span>學員天地&nbsp;&nbsp;</span>
						<span>關於千鋒&nbsp;&nbsp;</span>
						<span>學員論壇</span>
						<hr />
					</td>
				</tr>
				<tr>
					<td  colspan="2" align="right">
						首頁>課程培訓>JavaEE列表
					</td>
				</tr>
			</table>
		</div>
		<!--中間部分-->
		<div>
			<table align="center" width="100%">
				<tr>
					<td>
						<h3>課程培訓</h3>
						<h4>共108種課程內容</h4>
					</td>
				</tr>
				<tr align="center">
					<td colspan="2">
						<hr />
						<img src="img/001.png" width="100%"/>
					</td>
				</tr>
			</table>
			<table align="center" width="100%">
				<tr align="center">
					<td>
						<img src="img/002.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/003.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/004.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/005.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/006.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
				</tr>
				<tr align="center">
					<td>
						<img src="img/007.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/008.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/009.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/010.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
					<td>
						<img src="img/011.png" /><br />
						<div align="center">書名：XXX</div>
						<div align="center">售價：180</div>
					</td>
				</tr>
			</table>
		</div>
		<!--底部-->
		<div>
			<table width="100%">
				<tr>
					<td><img src="img/012.png" width="100%"/></td>
				</tr>
			</table>
		</div>
	</body>
</html>

四、表單

<!--外部必須嵌套一個form標籤，只有嵌套這個標籤，瀏覽器才能將內容提交到服務器-->
		<form>
			賬戶：<input type="text" name="username"/><br />
			密碼：<input type="password" name="password"/><br />
			性別：
			<input type="radio" name="sex" value="male" checked="checked"/>男
			<input type="radio" name="sex" value="female"/>女<br />
			地址：<select name="city">
				<option value="wuhan">武漢</option>
				<option value="xiaogan" selected="selected">孝感</option>
			</select><br />
			愛好：
			<input type="checkbox" name="hobbys" value="basketball"/>籃球
			<input type="checkbox" name="hobbys" value="pingpangball"/>乒乓球
			<input type="checkbox" name="hobbys" value="badminton"/>羽毛球
			<br />
			照片：<input type="file" /><br />
			介紹：<textarea name="introduce" placeholder="200字以內"></textarea><br />
			<!--<input type="submit" value="註冊" />-->
			<button type="submit">註冊</button>
			<input type="reset" value="重置" />
		</form>

五、CSS介紹

六、CSS和HTML樣式

6.1 css和html結合內聯樣式

內聯結合:

缺點：不能複用

優點：獨特，簡單對少數特定元素進行單獨設置

<font style=" font-size: 200px;color: darkgreen;">字體</font>

6.2 內部結合

內部結合：

1.需要在head標籤中，使用style標籤

2.使用選擇器選中元素

3.編寫css代碼

格式：

選擇器{

屬性名1：屬性值1；

屬性名2：屬性值2；

}

缺點：複用性不高！CSS代碼和html代碼並沒有徹底分離

優點：簡單

<style>
		font{
		font-size:200px;
		color:darkgreen;
		}
</style>

6.3 外部結合方式

1.新建一個css樣式文件

2.編寫css代碼

3.在html文件中引入css外部文件，使用link標籤引入

<link rel="stylesheet" href="css/css01.css"/>

6.4 選擇器

ID選擇器：引用的是id屬性值

#屬性值{

屬性名：屬性值；

}

類選擇器：引用的是class屬性值

.class屬性值{

屬性名：屬性值；

}

處理多個元素有相同的樣式

元素選擇器：引用的是標籤

標籤名{

屬性名：屬性值；

}

分組選擇器：如果多個選擇器中的css代碼相同，那麼就可以將這多個選擇劃爲一組

用逗號組合

.class屬性值,標籤名,#屬性值{

屬性名：屬性值；

}

衍生選擇器/上下文選擇器：依據元素所在的位置進行元素的選擇

父選擇器子選擇器{

屬性名：屬性值；

}

6.5 優先級

內聯樣式>id選擇器>類選擇器>標籤選擇器

規律：作用範圍越小，優先級越大!

七、CSS僞類

a:link{} //未訪問的鏈接

a:visited{} //已訪問的鏈接

a:hover{} //鼠標移動到鏈接上

a:active{} //選定的鏈接

注意：hover必須置於link和visited後纔有效

active必須置於hover後纔有效

八、CSS中的屬性

8.1 CSS中的字體屬性

font-family:微軟雅黑、楷體、宋體、仿宋。默認字體微軟雅黑

font-size:字體大小

font-style:設置字體風格 italic obique

font-weight：字體的粗細lighter；500px；

direction 文本方向 ltr：left to right rtl： right to left

line-height 行高

text-align 文本水平對齊方式

text-indent: 2em 首行縮進

text-decoration 文本修飾 underline；overline；line-through；blink；

letter-spacing 字符間距（每個字符與字符間的間距）

word-spacing 單詞間距（單詞與單詞之間的間距）

8.2 CSS背景屬性

background-color:將顏色作爲背景

background-imag:將圖片作爲背景

background-size：cover

8.3 CSS尺寸屬性

min-width:

max-width:

min-height;

max-height;

8.4 CSS列表屬性

list-style-image 將圖片設置爲列表項標誌

list-style-position 設置列表中列表項標誌的位置 inside

list-style-type 設置列表項標誌的類型。

8.5 CSS邊框屬性

border-left-style:dotted點 dashed虛線設置元素的左邊框的樣式。

border-left:style color width；左上右下

border:style color width；

border-radius：20px；圓角

8.6 CSS盒子模型

element 元素內容 width heigth

padding 內邊距

margin 外邊距：外框到其他元素（父元素、兄弟元素）的距離

瀏覽器:元素進行渲染的時候，是從左往右進行渲染

float：left

8.7 CSS定位

position屬性 static relative absolute fixed 把元素放置到一個靜態的、相對的、絕對的、或固定的位置上

相對定位：原有元素所佔的空間不會消失偏移，根據原來位置進行偏移

絕對定位：元素原先在正常文檔流中所佔空間會關閉，偏移是根據父類容器進行偏移

left

top

right

bottom

body{//一般瀏覽器都對body標籤默認的margin設置爲8px；不同瀏覽器會設置不同的值，它是由瀏覽器的user-agent-stylesheet提供

padding：0px；

margin：0px；

}

九、塊級元素和行內元素

1.行內元素：元素僅僅包裹內容，常見：span

爲行內元素加padding margin無效。display：inline-block;行內塊

2.塊級元素：佔滿整一行，常見：div

十、伸縮佈局flex

main axis:主軸

規定元素排列的方向，默認是row，水平方向

cross axis：側軸

輔助軸，默認是colunm，垂直方向

flex item：伸縮元素

會按照主軸方向進行排列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--左邊菜單欄40%，右邊是內容60%，高度充斥整個屏幕-->
		<style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
			}
			#container{
				display: flex;
				height: 100%;
			}
			#left{
				background-color: #006400;
				width: 40%;
				height: 100%;
			}
			#right{
				background-color:red;
				width: 60%;
				height: 100%;
			}
		</style>
		
	</head>
	<body>
		<div id="container">
			<div id="left">left</div>
			<div id="right">right</div>
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--左邊菜單欄40%，右邊是內容60%，高度充斥整個屏幕-->
		<style>
			html{
				height: 100%;
			}
			body{
				height: 100%;
			}
			#container{
				display: flex;
				flex-direction: column;
				height: 100%;
			}
			#left{
				background-color: #006400;
				height: 40%;
				width: 100%;
			}
			#right{
				background-color:red;
				height: 60%;
				width: 100%;
			}
		</style>
		
	</head>
	<body>
		<div id="container">
			<div id="left">left</div>
			<div id="right">right</div>
		</div>
		
	</body>
</html>

十一、Web中的路徑

訪問路徑：

絕對路徑:不帶協議的絕對路徑/不帶協議的絕對路徑（http://127.0.0.1:8020/day47/a.html）

相對路徑：相對於一個資源去訪問另一個資源（http://127.0.0.1:8020/day47/css/css01.css）//在a.html的同一目錄（day47）下訪問css文件夾–>css01.css

./ 表示當前目錄一般可以省略 href="css/css01.css

…/上一級目錄

十二、註冊界面案例

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gTaqJyaq-1586942565862)(G:\Java\第二階段\筆記\案例效果.png)]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css伸縮佈局之註冊案例</title>
		<style>
			
			html{
				height: 100%;			
			}
			body{
				height: 100%;
				margin: 0px;
				background-image: url(img/register_bg.png);
				background-size: cover;
				display: flex;
				/*垂直居中*/
				align-items: center;
				/*水平居中*/
				justify-content: center;
			}
			#container{
				display: flex;
				background-color: white;
				width: 800PX;
				height: 500px;
			}
			#left{
				width: 30%;
				padding-top: 15px;
				padding-left: 20px;
			}
			#left font{
				font-size: 25px;
				color: gray;
			}
			
			#left #f1{
				color: orange;
			}
			#center{
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#center input{
				margin-top: 5px;
				width: 290px;
				height: 28px;
				border: 1px solid gainsboro ;
				border-radius: 5px;
				
			}
			#center #codes{
				display: flex;
				align-items: center;
			}
			#center #code{
				width: 150px;
			}
			#center #img{
				padding-left: 10px;
			}
			#center button{
				width: 130px;
				height: 35px;
				margin-top: 20px;
				background-color: mediumseagreen;
			}
			#center button:hover{
				background-color: green;
			}
			#right{
				width: 20%;
				margin-top: 15px;
			}
			#right a{
				color: indianred;
				text-decoration: none;
			}
			
			#right a:hover{
				color: red;
			}

			
			
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">
				<font id="f1">新用戶註冊</font><br />
				<font id="f2">USER REGISTER</font>
			</div>
			
			<div id="center">
				 <form>
				 	<table>
				 		<tr>
				 			<td>賬戶</td>
				 			<td><input type="text" name="username" placeholder="請輸入賬戶"/></td>
				 		</tr>
				 		<tr>
				 			<td>密碼</td>
				 			<td><input type="password" name="password" placeholder="請輸入密碼"/></td>
				 		</tr>
				 		<tr>
				 			<td>Email</td>
				 			<td><input type="text" name="email" placeholder="請輸入郵箱"/></td>
				 		</tr>
				 		<tr>
				 			<td>姓名</td>
				 			<td><input type="text" name="realname" placeholder="請輸入賬戶"/></td>
				 		</tr>
				 		<tr>
				 			<td>手機號</td>
				 			<td><input type="number" name="phone" placeholder="請輸入手機號"/></td>
				 		</tr>
				 		<tr>
				 			<td>性別</td>
				 			<td><input type="text" name="sex" placeholder="請輸入性別"/></td>
				 		</tr>
				 		<tr>
				 			<td>出生日期</td>
				 			<td><input type="text" name="borndate" placeholder="yyyy年MM月dd日"/></td>
				 		</tr>
				 		<tr>
				 			<td >驗證碼</td>
				 			<td id="codes">
				 				<input id="code" name="security" placeholder="請輸入驗證碼"/>
				 				<img src="img/verify_code.jpg" id="img"/>
				 			</td>
				 	
				 		</tr>
				 		<tr>
				 			<td colspan="3"><button type="submit">註冊</button></td>
				 		</tr>
				 	</table>
				</form>
			</div>
			<div id="right">
				<font>已有賬戶?</font>
				<a href="index.html">立即登錄</a>
			</div>		
		</div>		
	</body>
</html>

十三、服務器

13.1 服務器相關概念

網絡協議–>http協議–>tcp協議

將電腦設置爲服務器，需要將電腦中安裝服務器軟件，如tomcat，可以使服務器針對本局域網。

若想不同局域網訪問一個服務器則需要：

1.內網穿透：讓外部網絡中的設備可以訪問局域網中的內容

2.雲服務器：在物聯網中假設的服務器電腦

13.2 BS/CS結構

BS結構瀏覽器服務器 brower/server

特點：不需要下載安裝客戶端，通過地址去訪問不同的服務器內容

1.只要連網就能隨時隨地的使用

2.開發人員只需要對服務器程序進行開發、維護、降低開發維護難度和開發維護成本

3.瀏覽器主要負責用戶界面的動態展示，只處理一些簡單邏輯

4.服務器的負載大

5.加服務器，使負載均衡

CS結構客戶端服務器 client/server

特點：1.需要下載安裝客戶端

客戶端：顯示數據，具備一定的業務能力

服務器：處理數據、業務處理

服務器的負載相對較低

BS優缺點：

優點：實時地更新數據

缺點：將負載給了服務器

CS優缺點：

優點：客戶端也分擔了一部分負載

缺點：如果有新的功能要增加，則需要更新

13.3 常見的java服務器

ngix：靜態資源服務器

weblogic

jboss

websphere

tomact

13.4 Web相關概念

靜態web資源、動態web資源

13.4.1 爲什麼web程序不需要main方法

1.一般的Java程序都有main，作爲程序的主入口，通常用來啓動程序。

2。web程序中的tomact就是Java開發的一個程序。裏面有main方法

3.tomcat的啓動就是啓動了main方法，將tomcat以一個已經啓動的程序等待讀取用戶的輸入

4.由於tomcat是一個應用程序服務器，所以必然不可能只做一件事，啓動一個服務。

5.用戶按照固定格式在瀏覽器輸入地址。（包含：ip、端口、工程名稱、請求路徑）

1.ip地址區分不同服務器

2.端口：在同一個服務器上可以安裝很多個tomcat

3.工程名稱：在同一個tomcat中可以部署多個不同的服務

4. 請求路徑：調用不同的Serlet來執行相應的業務方法

6.請求路徑是爲了調用不同的業務方法

1.通常來說方法調用應該是創建一個對象，然後調用對象的方法。

2.Servlet是由server+let組合而成，表示服務器上的小程序，作用是用來接收用戶的請求（路徑），並返回相應的數據。

3.tomcat容器在開啓的時候幫Servlet創建了對象，並且通過用戶配置指定的路徑來映射裏面的doGet和doPost方法，因此用戶可以通過一個路徑來調用Servlet裏面的doGet和doPost方法，就是先一個請求路徑調用一個方法。

13.5 Tomcat安裝與配置

http://ip：端口號/資源名稱

ip： tomcat軟件所在設備的ip

ipconfig 192.168.0.105

端口號：tomcat對應的端口號

13.5.1 JAVA_HOME配置

tomcat依賴java的環境變量JAVA_HOME

13.5.2 端口的配置

tomcat安裝目錄 -> conf文件夾 -> server.xml中

<Connector port="8080" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443" />

13.5.3 目錄結構

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rEgbyUGt-1586942565875)(G:\Java\第二階段\筆記\08-tomcat安裝目錄介紹.png)]

13.6 Web項目

A_Web項目分類

Web靜態項目

包含都是靜態資源：html、js、css、圖片、音頻等等

Web動態項目: 不是必須包含動態資源

包含都是靜態資源：html、js、css、圖片、音頻等等

那麼和靜態項目的區別在哪裏？可以有動態資源及WEB-INF文件夾

通過http://localhost:8080/ 訪問的資源是來自於tomcat服務器的動態web項目(內置),

而在tomcat的一個安裝目錄中，是由一個webapps的文件夾專門用來部署web項目

B_總結

一個靜態web項目，肯定都是靜態資源

一個動態web項目，可以有靜態資源，可以有動態資源，必須有WEB-INF文件夾及web.xml

工作中使用動態web項目

13.7 tomcat部署項目

A_直接將項目放到webapps下

B_虛擬目錄初級版

將tomcat目錄以外的資源部署到容器中

在tomcat的目錄 -> conf文件夾 -> server.xml中 , 加一個
<Context docBase="項目路徑" path="項目訪問名稱"/>
從tomcat6.0開始，以上的配置方案，並不推薦使用!!!

改動了tomcat的server.xml文件，一旦出錯，tomcat容器裂開了!!!

C_虛擬目錄優化版

基於虛擬目錄初級版!!

1_tomcat安裝目錄 -> conf文件夾 -> catalina -> localhost

2_新建一個任意名稱的xml文件

3_需要到xml文件中編寫如下代碼：
<?xml version="1.0" encoding="utf-8" ?>
<Context docBase="C:\Users\qiuzhiwei\Desktop\dynamicproject"/>
D_如何訪問部署成功之後的項目中的資源？

1_訪問到tomcat容器

http://localhost:8080/

2_訪問到項目

http://localhost:8080/dynamicproject/

3_訪問到資源

http://localhost:8080/dynamicproject/a.jpg

4_注意事項

如果訪問路徑只寫到http://localhost:8080/dynamicproject/,默認訪問index開頭的html文件或jsp文件…

E_總結

tomcat的部署總共是有三種方式，推薦使用第一種和第三種方式!!!

而且，idea部署項目使用和第三種方式差不多，要更復雜點!!!

13.8 web動態項目的相關設置

A_訪問網址

http://localhost:8080/dynamicproject

http://localhost:8080/dynamicproject/index.html

http://localhost:8080/dynamicproject/index.jsp

默認會訪問index.hhtml / index.jsp

爲什麼？

tomcat安裝目錄 -> conf文件夾 -> web.xml
<welcome-file-list>
     <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
上述配置代碼，是設置tomcat容器中的每個項目的默認頁面是index.html、index.htm、index.jsp

所以，自定義的web項目也部署到tomcat容器中，那麼就會遵守上述規定！！

如果，不想遵守以上約定，怎麼處理？

方式一：直接修改tomcat中的web.xml，
<welcome-file-list>
     <welcome-file>demo01.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
但是這樣處理存在問題，所有的項目的歡迎頁面都會跟隨改變!!!

方式二：直接修改項目自帶的web.xml

每一個web動態項目都會包含web.xml

加入以下代碼：
<welcome-file-list>
     <welcome-file>demo01.html</welcome-file>
        <welcome-file>demo01.htm</welcome-file>
        <welcome-file>demo01.jsp</welcome-file>
    </welcome-file-list>
以上配置僅針對當前項目有效!!!

B_項目中的wb.xml和tomcat中的web.xml，有什麼關係？

類似於java中的繼承關係(父子關係),

如果tomcat中的web.xml的配置無法滿足當前的項目的需求，那麼就可以更改項目中的web.xml，覆蓋tomcat中的web.xml配置

回顧：子父類中的方法重寫！！！

父類的方法中的功能無法滿足子類的需求，就需要進行方法重寫！！

13.9 在IDEA下開發部署

13.9.1 idea部署web應用程序

>  創建一個javaweb工程，JavaEnterprise、Web_Application
>
>  JavaWeb目錄介紹：
>
>  	src：存放java代碼
>
>  	web：存放web資源，比如：html、js、css、圖片、jsp等等
>
>  	WEB-IN 存放Java文件轉譯之後的class文件
>
>  	IDEA配置:
>
>  	選擇Edit Configurations  點擊+號-->tomcat-->server-->local
>
>  	點擊Configure-->點擊加號-->選擇tomcat
>
>  	On Update action：Redeploy
>
>  	On frame deactivation:Update classes and resources

13.9.2 idea部署項目的方式

IDEA部署WEB項目的方式，本質就是虛擬目錄優化版，但有一些區別。

tomcat會Using CATALINA_BASE: "C:\Users\gone.IntelliJIdea2019.2\system\tomcat\Tomcat_7_0_103_day50Web"新的tomcat容器，tomcat鏡像。

在鏡像文件中使用了虛擬目錄優化版方式部署web項目：C:\Users\gone.IntelliJIdea2019.2\system\tomcat\Tomcat_7_0_103_day50Web\conf\Catalina\localhost，定義了一個day50.xml文件

訪問名稱："/day50"

資源部署路徑:F:\IdeaFiles\day50Web\out\artifacts\day50Web_war_exploded

即所有資源都應在資源部署路徑中。

idea中的web項目的哪些內容部署到tomcat下？

Java項目下的src文件夾中的內容會部署到tomcat服務器項目的中的WEB-INF\classes下

Java項目下的WebContent文件夾會部署到tomcat服務器項目根目錄下。

十九、http協議介紹

19.1 什麼是協議

協議就是規定雙方如何通信

19.2 http協議

超文本傳輸協議HyperText transfer protocol是互聯網上應用最爲廣泛的一種網絡協議，所有www都必須遵守這個標準

超文本：字符、音頻、視頻、圖片等

19.3 總結

在做javaweb開發時，瀏覽器與服務器要通信，它們之間遵守就是http協議。

http協議是建立在TCP協議基礎上，http協議也是基於請求與響應的模型。http協議默認的端口是80

二十、演示抓包來查看http協議信息

20.1 步驟

創建一個web工程，在工程中創建一個hello。html頁面

將工程部署到tomcat中，打開瀏覽器查看hello.html頁面（F10檢查，Network，在網址輸入欄處enter鍵）

啓用抓包功能

Headers

Preview

Redponse

20.2 通過抓包可以看到如下信息：

General：請求行，響應行

Request Headers:請求頭

Response Headers:響應頭

響應正文：將顯示內容攜帶到瀏覽器

請求正文：用來接收請求的參數

20.3 總結：

請求：請求行、請求頭、請求正文

響應：響應行、響應頭、響應正文

二十一、請求的執行流程

瀏覽器：

1.發起請求

2.域名解析 C:\Windows\System32\drivers\etc\host

本地域名解析器，如果本地域名解析器無法解析，就給互聯網上的DNS服務器解析出ip

3.三次握手：底層是由tcp協議支持：請求訪問、應答、開始連接

4.執行請求：服務器開始解析請求行、請求頭、請求正文。

根據ip和端口，可以得到一個Socket對象，執行請求

5.服務器響應瀏覽器

21.1 http請求

請求組成：請求行、請求頭、請求正文

請求行：

Request URL：請求路徑，告訴服務器要請求的資源路徑

Request Method：請求方式，get/post

protocol:http協議

GET請求和POST請求：

get請求只能攜帶小數據、get請求下的請求參數會直接拼接到Request URL

post請求可以攜帶大數據，post請求下的請求參數會存放到請求正文

請求正文：只有當請求方式爲post，且有請求參數纔會有FORM DATA

請求頭：

Content-Type：瀏覽器告訴服務器，請求正文的數據類型

User-Agent：瀏覽器告訴服務器，瀏覽器類型

應用到form中，action：表單提交的路徑，往往是服務器資源路徑

method：設置請求方式,GET/POST

21.2 http響應

21.2.1 Http響應組成

響應行響應頭響應正文

21.2.2 響應行

在響應行中最重要的是響應狀態碼

最常見的狀態碼status：服務器告訴瀏覽器，服務器的狀態

200響應成功

302 可以與一個響應頭location組合完成重定向

304代表服務器端資源沒有改變

404資源訪問不到

500服務端錯誤

21.2.3 響應頭

Location：它與302狀態碼組全可以完成重定向功能

Content-type：服務器響應回的數據mineType類型：將音頻，圖片，文本，視頻等等

refresh：可以實現定時跳轉

content-disposition：可以完成文件下載，點擊的整個文件是否彈出下載框

21.2.4 響應正文

對於http響應正文，它是真正被瀏覽器解析並顯示在瀏覽器上的。

Servlet

一、Servlet的概述及入門

1.1概念

servlet就是一個java程序，可以和瀏覽器進行交互，servlet的使用需要有服務器的運行環境

1.2 web工程

1.2.1 idea部署web項目鏡像是什麼意思

鏡像是指將tomcat啓動，並不會將當前工程真正的部署到tomcat中，而是在內存中以鏡像的方式部署，這種方式好處是不影響tomcat，而且能夠實現一些熱部署（修改代碼不需要重啓tomcat）功能

1.3 Servlet的入門案例

a_自定義Servlet繼承HttpServlet

b_重寫doGet方法和doPost方法

c_在web.xml配置servlet

聲明自定義Servlet

給自定義Servlet配置訪問名稱

1.4 Servlet的執行流程

瀏覽器發起請求: http://localhost:8080/day50/demo01

就會在服務器中找訪問名稱爲demo01的Servlet -> Demo01Servlet

請求的處理就交給了Demo01Servlet的實例,根據請求方式get/post,決定是給doGet還是doPost方法處理!!!

1.5 注意事項

不管是get請求還是post請求，對於服務器來說，沒差別的！！！

get請求將請求參數放到請求網址

post請求將請求參數放到請求正文

服務器最終無非就要獲取請求參數。getParameter()方法!

1.6 Servlet的概念及基本使用

1.6.1 Servlet概念

可以在服務器中運行的java程序，java程序中可以使用和tomcat容器相關的api，比如：servlet-api，jsp-api

1.6.2 基本使用

自定義類繼承HttpServlet

重寫doGet、doPost
在web.xml中配置自定義Servlet

1.7 實現Servlet的三種方式

HttpServlet繼承於GenericServlet、GenericServlet實現於Servlet，也就是說Servlet是頂層接口!!!

如果要實現Servlet功能，有幾種方式？

方式一：實現Servlet接口

在servlet接口中，沒有doGet和doPost方法，處理請求是service方法(抽象的)

如果要針對Http協議，需要手動強轉。

方式二：繼承GenericServlet類

在GenericServlet類中，沒有doGet和doPost方法，處理請求是service方法(抽象的)

如果要針對Http協議，需要手動強轉。

方式三：繼承HttpServlet類

猜想，HttpServlet類中重寫GenericServlet類中service方法。會由GenericServlet給service方法提供請求對象

ServletRequest，ServletResponse。

根據源碼，發現重寫service方法中，

有將ServletRequest強轉爲HttpServletRequest,

將ServletResponse強轉爲HttpServletResponse

以上強轉是因爲,ServletRequest和ServletResponse並沒有針對Http協議做優化!!!無法專門針對http協議調用方法!!

HttpServletRequest和HttpServletResponse有針對http協議做優化!!!

二、Servlet

1.1 Servlrt源碼

public interface Servlet {
    void init(ServletConfig var1) throws ServletException;//監聽Servlet的初始化

    ServletConfig getServletConfig();

    void service(ServletRequest var1, ServletResponse var2) throws ServletException, IOException;    //處理請求

    String getServletInfo();

    void destroy();
} //監聽Servlet的銷燬

1.2 生命週期

一個事物，從開始、存活、結束。

1.3 Servlet生命週期特點

Servlet什麼時候初始化？

Servlet默認不是隨着服務器的啓動而初始化，當第一次訪問Servlet時初始化，再訪問則直接處理請求

Servlet是單例！！不佔用過多的內存

Servlet什麼時候銷燬？

服務器關閉時，會銷燬Servlet

1.4 load on startup配置

1.4.1 概念

根據Servlet生命週期，可知，servlet默認不會隨着服務器的啓動而初始化

如果，就想讓指定的servlet跟隨服務器啓動而初始化，需要用到load on startup

1.4.2 load on startup

有10個優先級：1~10；數字越小，優先級越高！

比如：Demo01Servlet，load-on-startup：1 ；Demo02Servlet ， load-on-startup ：2；

當服務器啓動時，Demo01Servlet先初始化，然後，Demo02Servlet再初始化!

    <servlet>
        <servlet-name>DemoServlet</servlet-name>
        <servlet-class>com.qf.servlet.DemoServlet</servlet-class>
        <load-on-startup>3</load-on-startup>
    </servlet>

1.5 Servlet配置

1.5.1 概念

自定義Servlet，第一步，聲明該Servlet；第二步，給該Servlet配置訪問路徑

一個Servlet是否可以有多個訪問名稱？

可以有多個訪問名稱，只需要給對應的Servlet多個標籤即可!

書寫規則

完全匹配:

要求網址上的訪問名稱完全和一致

必須以"/"開頭，否則會報錯:IllegalArgumentException : Invalid

目錄匹配：

要求網址上的訪問名稱中的目錄和一致

必須以"/“開頭，以”*"結尾

比如:/a/b/* , 目錄必須是/a/b，後面隨便寫

後綴名匹配:

要求網址上的訪問名稱中的後綴和一致

不能以"/“開頭,以”*"開頭，後綴名根據業務寫

比如：*.xyz。後綴名必須是xyz，其他隨意寫!!!

1.6 缺省Servlet

1.6.1 概念

url-parttern的值爲"/"就是缺省Servlet

1.6.2 作用

凡是在web.xml文件總找不到匹配的元素的URL，它們的請求都將求交給缺省Servlet處理，也就是說，缺省的servlet用於處理其他Servlet處理不了的請求。

當訪問tomcat服務中的靜態資源（html、圖片等等）時，實際上是在訪問這個缺省的

tomcat容器自帶缺省Servlet，在web.xml中，如果url-parttern的值爲“/”，這樣的Servlet就是一個缺省Servlet；

默認就有一個缺省Servlet：DefaultServlet

處理匹配不到的資源，返回404頁面

處理靜態資源，io流讀寫

1.6.3 自定義缺省Servlet

在當前工程中自定義Servlet，將url-parttern設置爲"/"，就覆蓋了tomcat容器中的缺省Servlet

1.6.4 應用

SpringMVC框架中，用於放行靜態資源！

1.7 服務器中路徑問題

帶協議的絕對路徑：http://localhost:8080/day51/girls.jpg

不帶協議的絕對路徑：/day51/girl01.jpg

相對路徑：./girl01.jpg(./可省略)

1.8 ServletConfig對象

1.8.1 概述

ServletConfig是由tomcat容器創建，通過init方法傳入給Servlet

1.8.2 作用

獲取Servlet的名稱標籤內容
獲取Servlet的初始化參數

隨着Servlet的初始化而初始化
<servlet>
    <servlet-name>Demo11Servlet</servlet-name>
    <servlet-class>com.qfedu.servlet.Demo11Servlet</servlet-class>
    
    <init-param>
        <param-name>username</param-name>
        <param-value>root</param-value>
    </init-param>
    <init-param>
        <param-name>password</param-name>
        <param-value>root123</param-value>
    </init-param>
</servlet>
getInitParameter(String parameterName)：根據參數名稱獲取指定的參數值

getInitParameterNames():獲取所有的參數名稱

獲取域對象：ServletContext

1.9 ServletContext對象

1.9.1 概念

相當於是整個應用程序對象

1.9.2 作用

ServletContext是一個域對象，可以用來存儲數據

在應用程序中的任何位置都能夠訪問

getAttribute(String parameterName) : 獲取ServletContext域中指定名稱的參數值

setAttribute(String paramterName,Object parameterValue):存儲參數到ServletContext域中

removeAttribute(String parameterNam)：將ServletContext域中指定名稱的參數移除!
獲取全局初始化參數
會隨着服務器的啓動而初始化
<context-param>
    <param-name>username</param-name>
    <param-value>root456</param-value>
</context-param>
獲取服務器真實磁盤路徑

getRealPath：依據當前項目去生成真實磁盤路徑，

比如：servletContext.getRealPath(“upload”)

“當前項目的服務器磁盤路徑/upload”

比如：servletContext.getRealPath(“upload/img”):

“當前項目的服務器磁盤路徑/upload/img”

1.9.3 站點訪問次數案例

使用ServletContext域對象

步驟

判斷是否是第一次請求

Integer count = servletContext.getAttribute("count");
if(count == null){
    ......
} else {
    ......
}

如果是第一次請求

int count = 1;
System.out.println("訪問次數 : " + count);
servlet.setAttribute("count",count);

如果不是第一次請求

count++;
System.out.println("訪問次數 : " + count);
servlet.setAttribute("count",count);

1.10 Servlet3.0

1.10.1 概念

Servlet2.5，不支持註解開發。

Servlet3.0，支持註解開發。

1.10.2 用法

常用註解

@Test:單元測試

@Override:方法重寫

@WebServlet:

聲明配置Servlet，取代了web.xml配置。

@WebServlet(name = "Demo18Servlet",urlPatterns ={“/demo01”,"/mydemo01"},loadOnStartup=1,
initParams={@WebInitParam(name="username",value="root"),@WebInitParam(name="password",value="root123")})

@WebServlet(name = “Demo18Servlet”,urlPatterns = “/demo18”)
public class Demo18Servlet extends HttpServlet {

}
```

以上配置代碼，相當於web.xml配置如下：

```xml
<servlet>
    <servlet-name>Demo18Servlet</servlet-name>
    <servlet-class>com.qfedu.servlet.Demo18Servlet</servlet-class>
</servlet>

Demo18Servlet /demo18 ```

1.10.3 常用屬性

常用屬性：

name：String //設置servlet名稱

urlPatterns：String[] //設置Servlet的訪問路徑

loadOnStartup：int //設置Servlet的load-on-startup屬性

getRealPath：依據當前項目去生成真實磁盤路徑，

比如：servletContext.getRealPath("upload")

"當前項目的服務器磁盤路徑/upload"

比如：servletContext.getRealPath("upload/img"):

"當前項目的服務器磁盤路徑/upload/img"