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基本结构

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>标题1dt>
			<dd>描述1dd>
			<dt>标题2dt>
			<dd>描述2dd>
		dl>

2.5.4 列表的嵌套


		<ul>
			<li>最新娱乐新闻li>
				<dl>
					<dt>青春有你2dt>
					<dd>导师团队阵容强大dd>	
				dl>
			<li>最强绯闻之声li>
			<li>热门影视剧情li>
		ul>

2.6 图片标签

<img/>独立标签
属性：
	src 图片地址
	width 图片的宽度
	height 图片的高度
	border边框
	alt 图片的文字说明，当图片未能正确加载时，才显示
	title 鼠标悬停时，显示的文字

2.7 链接标签

超链接可以是文本，也可以是图片，可以点击连接标签，进入新的文档，或者是当前文档的某个部分

 //href="跳转的地址" 
    target：_self(当前文档) 
    target：_blank(新页面)  
    target：_search(之前打开的页面存在则不打开新的页面直接复用)
#name充当锚点（顶部、底部）
需要为标签提供name属性，进行赋值
需要点击跳转的标签href属性给#name

2.8 表格标签

表格由
标签来定义，每个表格均有若干行（由tr标签定义行），每行由若干个单元格组成（由td标签来定义）。每一个数据单元可以包含文本、图片、列表

2.8.1 普通表格

table tr td


		<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">kunyantd>
				<td>女td>
				<td>未知td>
			tr>
		table>

2.8.2 表格的表头

th


<table border="1"> 
			<tr>
				<th>姓名th>
				<th>性别th>
				<th>年龄th>
			tr>
			<tr>
				<td align="center" valign="center">kunyantd>
				<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">kunyantd>
				<td>女td>
				<td>133td>
				<td>122td>
			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">kunyantd>
				<td rowspan="2">女td>
				<td>133td>
				<td>122td>
			tr>
			<tr>
				<td>133td>
				<td>122td>
			tr>
		table>

2.9 文本格式化标签

		
		<b>今天天气好b><br/>
		
		<big>今天天气好big><br/>
		
		<em>今天天气好em><br/>
		
		<i>今天天气好i><br/>
		<small>今天天气好small><br/>
		
		<strong>今天天气好strong><br/>
		
		co<sub>2sub><br/>
		
		10<sup>2sup><br/>
		
		<ins>sadins><br/>
		
		<del>天气好del>

三、基本标签的综合案例


<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>好程序员特训营  a>
						<a>JavaEE分布式开发  a>
						<a>JavaSE核心基础  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>首页  span>
						<span>课堂培训  span>
						<span>教学保障  span>
						<span>免费视频  span>
						<span>公开课  span>
						<span>企业合作  span>
						<span>就业喜报  span>
						<span>学员天地  span>
						<span>关于千锋  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">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/003.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/004.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/005.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/006.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
				tr>
				<tr align="center">
					<td>
						<img src="img/007.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/008.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/009.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/010.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
					<td>
						<img src="img/011.png" /><br />
						<div align="center">书名：XXXdiv>
						<div align="center">售价：180div>
					td>
				tr>
			table>
		div>
		
		<div>
			<table width="100%">
				<tr>
					<td><img src="img/012.png" width="100%"/>td>
				tr>
			table>
		div>
	body>
html>

四、表单


		<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 />
			
			<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代码并没有彻底分离

优点：简单

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：伸缩元素

会按照主轴方向进行排列


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<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">leftdiv>
			<div id="right">rightdiv>
		div>
		
	body>
html>


<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<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">leftdiv>
			<div id="right">rightdiv>
		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)]


<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 REGISTERfont>
			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>Emailtd>
				 			<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中

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文件中编写如下代码：
<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.htmlwelcome-file>
        <welcome-file>index.htmwelcome-file>
        <welcome-file>index.jspwelcome-file>
    welcome-file-list>
上述配置代码，是设置tomcat容器中的每个项目的默认页面是index.html、index.htm、index.jsp

所以，自定义的web项目也部署到tomcat容器中，那么就会遵守上述规定！！

如果，不想遵守以上约定，怎么处理？

方式一：直接修改tomcat中的web.xml，
<welcome-file-list>
     <welcome-file>demo01.htmlwelcome-file>
        <welcome-file>index.htmwelcome-file>
        <welcome-file>index.jspwelcome-file>
    welcome-file-list>
但是这样处理存在问题，所有的项目的欢迎页面都会跟随改变!!!

方式二：直接修改项目自带的web.xml

每一个web动态项目都会包含web.xml

加入以下代码：
<welcome-file-list>
     <welcome-file>demo01.htmlwelcome-file>
        <welcome-file>demo01.htmwelcome-file>
        <welcome-file>demo01.jspwelcome-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>Demo11Servletservlet-name>
    <servlet-class>com.qfedu.servlet.Demo11Servletservlet-class>
    
    <init-param>
        <param-name>usernameparam-name>
        <param-value>rootparam-value>
    init-param>
    <init-param>
        <param-name>passwordparam-name>
        <param-value>root123param-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>usernameparam-name>
    <param-value>root456param-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

    Demo18Servlet
    com.qfedu.servlet.Demo18Servlet

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"