学习Java的第十周

    • 表单标签
    • 一、CSS介绍
    • 二、CSS和HTML结合
      • 2.1CSS和HTML结合之内联结合
      • 2.2CSS与HTML结合之内部部结合
      • 2.3CSS和HTML结合之外部结合
    • 三、访问路径
    • 四、选择器
      • 4.1id选择器
      • 4.2类选择器
      • 4.3标签选择器/元素选择器
      • 4.4选择器分组
      • 4.5衍生选择器
      • 4.6选择器优先级
    • 五、CSS伪类
    • 六、CSS字体属性
    • 七、CSS文本属性
    • 八、CSS的背景属性
      • 概念：
      • 实现
    • 九、CSS的尺寸属性
      • 概念
      • 常用属性
      • 实现
      • 注意
    • 十、CSS列表属性
      • 概念
      • 常用属性
      • 实现
    • 十一、CSS边框属性
      • 概念
      • 常用属性
      • 实现
      • 圆角边框实现
  • CSS高级
    • 一、盒子模型
      • 概念
    • 术语解释
      • 实现
    • 二、CSS定位
      • 2.1概念
      • 2.2常用属性
    • 2.3固定定位
      • 2.31实现
    • 2.4相对定位
      • 2.41概念
      • 2.41注意
      • 2.42实现
    • 2.5绝对定位
      • 2.51概念
      • 2.52实现
    • 三、块级元素和行内元素
      • 3.1块级元素
      • 3.1行内元素
      • 3.3实现
    • 四、伸缩布局flex
      • 名词解释
    • 案例一
    • 案例二
    • tomcat
      • 一、tomcat的配置
      • 二、tomcat的目录结构
      • 三、Web项目
      • 四、tomcat部署项目
      • 五、web动态项目的相关设置
      • 六、IDEA部署web应用程序
      • 七、idea部署Web项目的方式
      • 八、idea中的web项目的哪些内容部署到tomcat中
    • Http协议
      • 一、通过抓包的方式演示http协议
      • 二、请求的执行流程
      • 三、http请求
      • 四、Http响应
    • Servlet的概述及入门
    • Servlet的入门案例
    • Servlet概念

表单标签

概念：表单可以将页面上录入的信息携带到服务器端

<!--文本框:<input> type="text" value:默认值 placeholder:提示密码框:<input> type="password" value:默认值  placeholder:提示单选框:<input> type="radio" checked:默认选中  value:默认值若想使多个单选框互斥，应取一样的name下拉框：<select><option value默认值 selected:默认选中>  </option></select>         selected:默认选中多选框：<input type="checkbox">若想多个多选框归为一类，应取相同的名字上传文件框<input type="file">文本域: <textarea></textarea>提交按钮:<input type="submit"> 重置按钮：<input type="reset">
-->
<form>账户:<input type="text" name="username" placeholder="请输入账户" value="root"/><br />密码:<input type="password" name="password" placeholder="请输入密码"/><br />性别：<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female"checked="checked"/>女<br />地址：<select name="city"><option value="Wuhan" selected="selected">武汉</option><option value="Xiaogan" >孝感</option></select><br />爱好：<input checked="checked" type="checkbox" name="hobbys" value="basketball"/>篮球 <input checked="checked" type="checkbox" name="hobbys" value="pingpang"/>乒乓球<input checked="checked" type="checkbox" name="hobbys" value="badminton"/>羽毛球<br />照片：<input type="file" name="pic"/><br />介绍：<textarea name="introduce" placeholder="自我介绍，字数为150以内!"></textarea><br /><!--<input type="submit"> ： 将表单中的内容提交到服务器-->    <!--<input type="submit" value="注册"/>--><button type="submit">注册</button><!--   <input type="reset"> : 将表单中的内容重置为原始状态--><!--<input type="reset" value="重置" />--><button type="reset">重置</button>
</form>

一、CSS介绍

含义
CSS指层叠样式表，cascading(层叠) style(样式) sheets(表格)
作用

  • 通过css可以定义html元素如何显示
  • html相当于毛胚房，很多效果达不到，css相当于在毛胚基础上做精装修。
    优点
  • 通过css可以大大提高工作效率，可使html代码与样式代码分离
    书写规范
  • 格式：选择器{属性：属性值；属性：属性值}
    • 选择器：确定当前css修饰的是哪一个元素。

二、CSS和HTML结合

2.1CSS和HTML结合之内联结合

2.11实现

    <div><font style="font-size: 600px;color: #008000;">这是一个div</font></div><!--使用font标签来改变文本的字体大小和字体颜色font标签设置字体大小，最大只能设定为7.css内联代码:所有的符号必须是在英文半角模式下！！！在标签中使用style属性,格式如下：style="属性名1: 属性值1;属性名2: 属性值2"颜色取值：颜色英文单词/颜色16进制    -->

2.12优缺点

  • 优点：简单方便
  • 缺点：复用性差，对少数的特定的元素进行单独设置！

2.2CSS与HTML结合之内部部结合

2.21使用方式

内部结合

  1. 需要在head标签中，使用style标签
  2. 使用选择器选中元素
  3. 编写css代码
  4. 格式：
    选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    }

2.22实现

<head><meta charset="UTF-8"><title>CSS和html结合之内部结合</title><style>font{font-size: 200px;color: darkgreen;}</style></head><body><div><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font1</font><br /><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font2</font><br /><!--字体大小为:200px,字体颜色:红色--><font style="color: red;">这是一个font3</font><br /></div></body>

2.23优缺点

  • 优点：可以对多个标签进行统一样式设置。
  • 缺点：只能作用于当前页面，复用性不高。

2.3CSS和HTML结合之外部结合

2.31使用方法

外部结合方式
1，新建一个css样式文件
2，编写css代码
3，在html文件中引入css外部文件 ,使用link标签引入

2.32实现

 <head><meta charset="UTF-8"><title>CSS和html结合之外部结合</title><!--以上三种结合方式中，推荐用谁？三种都有用！外部结合方式！！html中的相对路径!!!--><link rel="stylesheet" href="css/css01.css" /></head><body>  <div><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font1</font><br /><!--字体大小为:200px,字体颜色:绿色--><font >这是一个font2</font><br /><!--字体大小为:200px,字体颜色:红色--><font >这是一个font3</font><br /></div></body>

2.33优点

优点：复用性高！简单！

三、访问路径

3.1绝对路径

绝对路径：

  • 不带协议的绝对路径
  • 带协议的绝对路径（如http）

3.2相对路径

相对路径：相对于当前文件所在目录的路径

  • ./：当前目录（一般可以省略）
  • …/：上一级目录

3.3实现

 <html><head><meta charset="UTF-8"><title>探讨web中的路径1</title><!--访问路径绝对路径：不带协议的绝对路径/带协议的绝对路径相对路径：相对于demo08.html资源去访问css01.css资源  ,  ./:当前目录  ; ../：上一级目录demo08.html的访问路径:http://127.0.0.1:8020/day47/demo08.htmlcss01.css的访问路径:http://127.0.0.1:8020/day47/css/css01.css在demo08.html的同一个目录(day47)下访问css文件夹下的css01.css在demo08.html的   同一个目录(day47)-> css文件夹 -> css01.css./(可以省略)                    css     css01.css               --><link rel="stylesheet" href="css/css01.css" /></head>

四、选择器

格式

     css使用格式：选择器{属性名:属性值;}

4.1id选择器

概念

使用#引入，引用的是id属性值

实现

<html><head><meta charset="UTF-8"><title>选择器</title><!--id选择器：引用的是id属性值#id属性值{属性名:属性值;}--><style>font{font-size: 200px;}#one{color: greenyellow;}#two{color: limegreen;}#three{color: darkgreen;}</style></head><body><!--字体颜色：淡绿--><font id="one">this is font one</font><br /><!--字体颜色：中绿--><font id="two">this is font two</font><br /><!--字体颜色：深绿--><font id="three">this is font three</font><br /></body>

4.2类选择器

概念

使用.引入，引用的是class属性值

实现

<html><head><meta charset="UTF-8"><title>类选择器</title><!--类选择器:引用的是class属性值格式：.class属性值{属性名:属性值;}处理多个元素有相同样式效果的！！！--><style>font{font-size: 200px;}.one{color: greenyellow;}.two{color: limegreen;}.three{color: darkgreen;}</style></head><body><!--字体颜色：淡绿--><font class="one">this is font one</font><br /><font class="one">this is font two</font><br /><!--字体颜色：中绿--><font class="two">this is font three</font><br /><font class="two">this is font one</font><br /><!--字体颜色：深绿--><font class="three">this is font three</font><br /><font class="three">this is font two</font><br /></body>

4.3标签选择器/元素选择器

概念

使用标签名引入，引用的是标签

实现

 <head><meta charset="UTF-8"><title>标签选择器</title><!--标签选择器/元素选择器格式：标签名{属性名:属性值;}将font标签中的文本颜色修改为红色将span标签中的文本颜色修改为蓝色将div标签中的文本颜色修改为绿色所有的文本大小都为300px--><style>body{font-size: 200px;}font{color: red;}span{color: blue;}div{color: green;}</style></head><body><font>this is a font</font><br /><span>this is a span</span><br /><font>this is a font</font><br /><div>this is a div</div><br /><span>this is a span</span><br /><font>this is a font</font><br /><div>this is a div</div><br /></body>

4.4选择器分组

概念

选择器分组：如果多个选择器中的css代码相同，那么就可以将这多个选择器划为一组。

实现

<head><meta charset="UTF-8"><title>选择器分组</title><!--格式：id选择器,class选择,元素选择器{属性名:属性值;}font/span/div中的文本内容字体大小为200px,字体颜色为绿色--><style>#f1,.s1,div{font-size: 200px;color: green;}</style></head><body><font id="f1">this is a font</font><br /><span class="s1">this is a span</span><br /><div>this is a div</div><br /></body>

4.5衍生选择器

概念

衍生选择器/上下文选择器：依据元素所在的位置进行元素的选择

实现

<head><meta charset="UTF-8"><title>衍生选择器</title><!--格式：父选择器 子选择器{属性名:属性值;}父选择器：可以是id选择器、class选择器、元素选择器子选择器：可以是id选择器、class选择器、元素选择器需求：设置span中的font中内容样式。不准用id选择器、内联、class选择器先找到span,再找到font--><style>span font{font-size: 200px;color: deepskyblue;}   </style>  </head><body><span><font>这是一个font</font></span><div><font>这是一个font</font></div></body>

4.6选择器优先级

总结

优先级:内联样式 > id选择器 > 类选择器 > 标签选择器

规律

规律：作用范围越小，优先级越大

实现

<head><meta charset="UTF-8"><title>选择器的优先级</title><style>/*标签选择器*/font{font-size: 50px;color: yellow;}/*类选择器*/.clazz{font-size: 150px;color: orange;}/*id选择器*/#id1{font-size: 250px;color: orangered;}</style></head><body><!--内联样式--><font id="id1" class="clazz" style="font-size: 350px; color: red;">这是一个font</font></body>

五、CSS伪类

实现

<head><meta charset="UTF-8"><title>css伪类</title><!--a:link {color: #FF0000}    /* 未访问的链接 */a:visited {color: #00FF00}  /* 已访问的链接 */a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */--><style>a:link {/* 未访问的链接 */color: cornflowerblue;}a:visited {/* 已访问的链接 */color: red;}a:hover {/* 鼠标移动到链接上 */color: orange;}a:active {/* 选定的链接 */color: green;}font:hover{color: green;font-size: 100px;}button{background-color: orange;}button:hover{background-color: orangered;}</style></head><body><a href="index.html">this i a super link</a><br /><font>this is a font element</font><br /><button>按钮</button><br /></body>

注意事项

  • a:hover必须被置于a:link 和a:visited之后。
  • a:active必须被置于a:hover之后。

六、CSS字体属性

概念

设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。

实现

<<head><meta charset="UTF-8"><title>css中的字体属性</title><!--font-family:微软雅黑、楷体、宋体、仿宋。如果浏览器不支持字体系列，就会使用默认的字体系列(微软雅黑!)，比如：草书font-size:字体大小font-style:字体倾斜度font-weight:字体的粗细--><style>span{font-family: "草书";font-size: 100px;font-style: oblique;font-weight: bolder;}  </style></head><body><span>这是一个span标签</span></body>

七、CSS文本属性

概念

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

实现

<head><meta charset="UTF-8"><title>css文本属性</title><style>   /*css文本属性direction:ltr: left to rightrtl: right to leftline-height:行高text-align:文本的对齐方式text-decoration文本装饰  underline none line-throughletter-spacing字符间距,字符与字符之间的间距word-spacing:单词间距,单词与单词之间的间距              */div{font-size: 50px;color: gray;direction: ltr;text-align: left;text-decoration: none;}a{font-size: 50px;text-decoration: none;}</style></head><body><div>这是一个div</div><a href="index.html">超链接</a></body>

八、CSS的背景属性

概念：

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

实现

<head><meta charset="UTF-8"><title>css背景属性</title><!--background-color 设置元素的背景颜色 background-image 把图像设置为背景 --><style>body{background-color: burlywood;color: red;font-size: 50px;background-image: url(img/kuli.png);background-size:cover ;}</style></head><body>青青草原</body>

九、CSS的尺寸属性

概念

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

常用属性

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

实现

<head><meta charset="UTF-8"><title>css尺寸</title><!--css尺寸属性对行内元素无效，img例外--><style>img{min-width: 100px;max-width: 300px;min-height: 100px;max-height: 300px;}</style></head><body><img src="img/kuli.png" /></body>

注意

css尺寸属性对行内元素无效，img例外

十、CSS列表属性

概念

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

常用属性

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

实现

<head><meta charset="UTF-8"><title>CSS列表项</title><!--list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 --><style>ul{text-align: center;list-style-image: url(img/kuli.png);/*list-style-type: circle;*/list-style-position: inside;}</style></head><body><ul><li>李小龙</li><li>成龙</li><li>李连杰</li></ul></body>

十一、CSS边框属性

概念

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色

常用属性

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
  • border-radius圆角边框

实现

<head><meta charset="UTF-8"><title>css边框属性</title><style>body{text-align: center;}#d1{width: 300px;height: 300px;border: dotted greenyellow 10px;/** 左边框* 样式：点状* 颜色：淡绿* 宽度：10px*//*border-left-style: dotted;border-left-color: greenyellow;border-left-width: 10px;*//*border-left: dotted greenyellow 10px;*//** 上边框* 样式：虚线* 颜色：中绿* 宽度：15px*//*border-top-style: dashed;border-top-color: mediumseagreen;border-top-width: 15px;*//*border-top: dotted greenyellow 10px;*//** 右边框* 样式：实线* 颜色：绿* 宽度：20px*//*border-right-style: solid;border-right-color: green;border-right-width: 20px;*//*border-right:dotted greenyellow 10px;*//** 下边框* 样式：实线* 颜色：绿* 宽度：20px*//*border-bottom-style: double;border-bottom-color: darkgreen;border-bottom-width: 25px;*//*border-bottom: dotted greenyellow 10px;*/}</style></head><body><img id="d1" src="img/girl04.jpg" /></body>

圆角边框实现

border-radius圆角边框
<head><meta charset="UTF-8"><title>CSS圆角边框</title><style>img{width: 600px;height: 600px;/*border-radius: 300px;*/border-radius: 50%;}</style></head><body><img src="img/kuli.png" /></body>

CSS高级

一、盒子模型

概念

CSS框模型（Box Model）规定了元素处理元素内容、内边距、边框和外边框的方式

术语解释

  • element：元素。
  • padding：内边距，边框距元素的距离。
  • border：边框。
  • margin：外边框，边框距其他元素边框的距离。
  • width：元素内容的宽度
  • height：元素内容的高度

注意事项

  • 内边距和外边距的值可以是负数。
  • 在页面上，设置margin-right无效，因为元素默认是左对齐，不管怎么设置都是左对齐，所以将元素设置为右对齐就可以看到效果，float:right。

实现

<head><meta charset="UTF-8"><title>css盒子模型基本使用</title><!--内边距：边框到元素内容的距离padding:同时设置左上右下内边距padding-left/padding-top/padding-right/padding-bottom外边距：边框到其他元素的距离margin:同时设置左上右下外边距margin-left/margin-top/margin-right/margin-bottom浏览器：元素进行渲染的时候，是从左往右进行渲染，相当于现实生活中，排队买东西，margin-right告诉最后一个人，离下一个人要有200米远--><style>body{float: right;}img{width: 200px;height: 100px;border: 5px solid blue;}#img1{/*padding: 10px;margin: 50px;*/}#img2{/*padding: 15px;margin: 100px;*/}#img3{/*padding-top: 20px;*//*margin-left: 150px;*/margin-right: 200px;}</style></head><body><img id="img1" src="img/girl01.jpg" /><img id="img2" src="img/girl02.jpg" /><img id="img3" src="img/girl03.jpg" /></body>

二、CSS定位

2.1概念

CSS 定位 (Positioning) 属性允许你对元素进行定位。

2.2常用属性

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。固定(fix)、相对relative、绝对absolute、静态static
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。对元素进行左偏移
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

2.3固定定位

2.31实现

<html><head><meta charset="UTF-8"><title>css固定定位</title><!--position:fixed需求：完成小广告--><style>img{position: fixed;width: 350px;height: 200px;right: 0px;bottom: 0px;}p{font-size: 200px;}</style></head><body><a href="https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%CD%C4%D0&fr=ala&ala=1&alatpl=adress&pos=0&hs=2&xthttps=111111"><img src="img/boy01.jpg" /></a><p>这是一个p</p><p>这是一个p</p><p>这是一个p</p> <p>这是一个p</p><p>这是一个p</p><p>这是一个p</p>        <p>这是一个p</p><p>这是一个p</p><p>这是一个p</p><p>这是一个p</p><p>这是一个p</p></body>
</html>

2.4相对定位

2.41概念

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

2.41注意

  • 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。

2.42实现

<html><head><meta charset="UTF-8"><title>css相对定位</title><!--设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。相对于原来的位置进行偏移！！！--><style>#s1{background-color: red;}#s2{background-color: orange;position: relative;top: 20px;left: 20px;}#s3{background-color: cornflowerblue;}</style></head><body><span id="s1">这是span1</span><span id="s2">这是span2</span> <span id="s3">这是span3</span></body>
</html>

2.5绝对定位

2.51概念

  • 绝对定位的元素的位置相对于最近的已定位父元素。
  • 设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

2.52实现

<html><head><meta charset="UTF-8"><title>css绝对定位</title><!--并相对于其包含块定位，元素原先在正常文档流中所占的空间会关闭--><style>body{/*margin: 0px;*/}#s1{background-color: red;}#s2{background-color: orange;position: absolute;top: 50px;left: 50px;}#s3{background-color: cornflowerblue;}</style></head><body><span id="s1">这是一个span1</span><span id="s2">这是一个span2</span><span id="s3">这是一个span3</span>  </body>
</html>

三、块级元素和行内元素

3.1块级元素

  • 块级元素前后会带有换行符，占用一整行。
  • 常见的块级元素：div

3.1行内元素

  • 行内元素前后没有换行符，只包裹内容。
  • 常见的行内元素：span
  • margin-top、margin-bottom、padding-top、padding-bottom设置无效

3.3实现

<html><head><meta charset="UTF-8"><title>css块级元素和行内元素</title><!--1,行内元素:元素仅仅包裹内容,常见：span ， padding-top/padding-bottom , margin-top/margin-bottom 存在问题2,块级元素:占满整一行,常见:div--><style>div{background-color: deepskyblue;display: inline;padding-top: 10px;margin-top: 100px;} span{background-color: orange;margin-top: 100px;display: block;     }   </style></head><body><div>这是一个div</div><span>这是一个span</span></body>
</html>

四、伸缩布局flex

  • CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开发中可以发挥极大的作用。

名词解释

  • 主轴：main axis：主轴，默认是水平方向（row）
  • 侧轴：cross axis：侧轴，默认是垂直方向
  • flex container:伸缩布局
  • flex item:伸缩元素
  • 主轴和侧轴并不是固定不变，可以通过flex-direction进行切换，默认为水平方向（row）

案例一

<html><head><meta charset="UTF-8"><title>css伸缩布局入门案例一</title><!--完成以下图示布局，左边是菜单栏（40%），右边是内容栏（60%），高度填充整个屏幕。浏览器 -> html -> body > container -> left/right--><style>html{height: 100%;}body{/*按照父容器的高度的100%进行设定*/height: 100%;margin: 0px;}/*让id为container的容器为伸缩布局*/#container{display: flex;/*按照父容器的高度的100%进行设定*/height: 100%;}#left{background-color: indianred;width: 40%;/*按照父容器的高度的100%进行设定*/height: 100%;}#right{background-color: cornflowerblue;width: 60%;height: 100%;}</style></head><body><div id="container"><div id="left">left</div><div id="right">right</div></div></body>
</html>

案例二

<html><head><meta charset="UTF-8"><title>css伸缩布局入门案例二</title><!--完成以下图示布局，上边是菜单栏（40%），下边是内容栏（60%），宽度填充整个屏幕。--><style>html{height: 100%;}           body{height: 100%;margin: 0px;}#container{display: flex;/*改变主轴方向*/flex-direction: column;height: 100%;}#top{background-color: orange;height: 40%;}#bottom{background-color: dodgerblue;height: 60%;}    </style></head><body><div id="container"><div id="top">top</div><div id="bottom">bottom</div></div></body>
</html>

tomcat

一、tomcat的配置

A,JAVA_HOME配置

tomcat依赖java的环境变量,JAVA_HOME

B,端口配置

tomcat安装目录  -> conf文件夹 -> server.xml中<Connector port="8080" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443" />

二、tomcat的目录结构

三、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项目

四、tomcat部署项目

A_直接将项目放到webapps下

B_虚拟目录初级版

将tomcat目录以外的资源部署到容器中在tomcat的目录 ->  conf文件夹 -> server.xml中 , 加一个<Contex><Context docBase="项目路径" path="项目访问名称"/>从tomcat6.0开始，以上的配置方案，并不推荐使用!!!改动了tomcat的server.xml文件，一旦出错，tomcat容器裂开了!!!

C_虚拟目录优化版

基于虚拟目录初级版!!1_tomcat安装目录 -> conf文件夹 -> catalina -> localhost2_新建一个任意名称的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.jpg4_注意事项如果访问路径只写到http://localhost:8080/dynamicproject/,默认访问index开头的html文件或jsp文件...

E_总结

tomcat的部署总共是有三种方式，推荐使用第一种和第三种方式!!!而且，idea部署项目使用和第三种方式差不多，要更复杂点!!!

五、web动态项目的相关设置

A_访问网址

http://localhost:8080/dynamicprojecthttp://localhost:8080/dynamicproject/index.htmlhttp://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配置回顾：子父类中的方法重写！！！父类的方法中的功能无法满足子类的需求，就需要进行方法重写！！

验证tomcat启动成功

1,验证tomcat启动成功
打开浏览器,
在网址栏上,输入:htttp://ip:端口号/资源名称

htttp://localhost:端口号/资源名称
ip:tomcat软件所在的设备的ip , localhost(127.0.0.1) / 192.168.50.4
htttp://localhost:8080/资源名称
端口:tomcat的对应的端口，默认是8080
htttp://localhost:8080/
资源名称

六、IDEA部署web应用程序

  1. 创建一个JavaWeb工程，Java Enterprise 、Web Application

  2. 项目名称、工作空间的选择

  3. JavaWeb目录介绍

  4. DEA配置tomcat

    • 选择Edit Configurations，
    • 点击加号 ->tomcat server -> local
    • 点击Configure -> 点击加号 -> 选择tomcat

  5. tomcat配置
    tomcat插件
    on update action:
    Redeploy：重新部署项目
    项目配置:部署项目到tomcat访问名称

七、idea部署Web项目的方式

  1. 概念
    idea部署web项目的方式，本质就是虚拟目录优化版，但是有一些区别!

  2. 步骤

    1. 根据本地安装的tomcat，会给当前项目生成一个tomcat镜像，部署到tomcat镜像相当于部署到本地tomcat中
    2. tomcat镜像部署项目的方式是虚拟目录优化版， 镜像的安装目录 -> conf -> catalina -> localhost ,就找到了day50.xml配置文件
    <Context path="/day50" docBase="F:\workspace\nz2002\day50\out\artifacts\day50_war_exploded" />

以上配置说明,

day50项目，它的访问名称是"/day50"，day50的资源部署路径是:"F:\workspace\nz2002\day50\out\artifacts\day50_war_exploded",这就要求，day50项目中的资源应该都需要放到day50_war_exploded文件夹中!!!

八、idea中的web项目的哪些内容部署到tomcat中

  1. 概念
    根据上一个知识点，只有资源来到了day50_war_exploded文件夹中，才意味着部署成功！！！

  2. 到底有哪些可以部署？

  • src文件夹:

    • 可以部署上去!部署到了项目中的\WEB-INF\classes文件夹中
  • web文件夹：
    • 可以部署上去！部署到了项目目录中!
  • day50项目下：
    • 不可以部署上去

Http协议

  1. 协议
    两个设备进行数据交换的约定!

  2. Http协议

    超文本传输协议(hypertext transfer protocl)

    超文本：字符、音频、视频、图片等等

    基于tcp协议。tomcat服务器底层实现本质上就是TCP(Socket)

一、通过抓包的方式演示http协议

经过演示发现，浏览器和服务器，它们之间进行交互，是一个请求-响应模型!!!

  • 请求：

    • 请求行
    • 请求头
    • 请求正文

  • 响应：

    • 响应行
    • 响应头
    • 响应正文

二、请求的执行流程

  • 发起请求
  • 域名解析
    本地域名解析器(C:\Windows\System32\drivers\etc\host)，
    如果本地解析器无法解析，那么就交给互联网上的DNS解析器
    得到IP
  • 根据ip和端口，可以得到一个Socket对象，执行请求
    携带请求行、请求头、请求正文
  • 服务器响应浏览器
    携带响应行、响应头、响应正文

三、http请求

  • 请求组成
    请求行、请求头、请求正文
  • 请求行
    • Request URL : 请求路径，告诉服务器要请求的资源路径
    • Request Method : 请求方式 , GET/POST
    • protocol : http协议版本
  • GET请求和POST请求：
    • get请求只能携带小数据、get请求下的请求参数会直接拼接到Request URL(请求网址)后面，QueryStringParameters
    • post请求可以携带大数据、post请求下的请求参数会存放到请求正文
    • 请求参数：比如，表单中的输入框中的值.
    • 如果我们要做文件上传，需要用到post请求，文件比较大!!
  • 请求头
    • Content-Type:浏览器告诉服务器，请求正文的数据类型
    • User-Agent:浏览器告诉服务器，我是个什么样的浏览器
  • 请求正文
    • 请求正文，只有当请求方式为post，且有请求参数时才会有请求正文！！！
    • Form Data

四、Http响应

  • Http响应组成
    响应行、响应头、响应正文

  • 响应行

    • Status Code : 响应状态码
    • 常见的有：
      • 200：服务器响应成功
      • 302: 告诉浏览器，进行重定向
      • 304: 页面上的内容没有发生改变，不需要重新请求服务器
      • 404: 没有对应的服务器资源
      • 500:服务器内部错误!

  • 响应头

    • Location：告诉浏览器重定向的资源路径，需要结合响应状态码302使用
    • Content-Type:服务器告诉浏览器，响应正文的数据类型
    • Content-Type:text/html;charset=utf-8; 服务器告诉浏览器，响应正文是文本和html标签；告诉浏览器，应该以utf-8的形式进行解码！浏览器就会以html标签及utf-8的形式对响应正文进行渲染显示！！！
    • refresh:定时跳转
    • Content-Disposition:文件下载

  • 响应正文

    • 浏览器显示的内容

Servlet的概述及入门

  • 概念
    servlet就是一个java程序，可以和浏览器进行交互，servlet的使用需要有服务器编译环境的支持！！
  • 服务器编译环境确认和设置
    Extenal Libaries中必须要有服务器的jar包

    而上述图中，只有java的编译环境!不支持服务器的编译环境，比如：HttpServlet!
  • 得让当前工程支持web服务器的编译环境,解决步骤如下：

Servlet的入门案例

  • 自定义Servlet继承HttpServlet
  • 重写doGet方法和doPost方法
  • 在web.xml配置servlet
    • 声明自定义Servlet
    • 给自定义Servlet配置访问名称
  • Servlet的执行流程
    • 浏览器发起请求: http://localhost:8080/day50/demo01
    • 就会在服务器中找访问名称为demo01的Servlet -> Demo01Servlet
    • 请求的处理就交给了Demo01Servlet的实例,根据请求方式get/post,决定是给doGet还是doPost方法处理!!!
  • 注意事项
    • 不管是get请求还是post请求，对于服务器来说，没差别的！！！
    • get请求将请求参数放到请求网址
    • post请求将请求参数放到请求正文
    • 服务器最终无非就要获取请求参数。getParameter()方法!

Servlet概念

  1. 概念
    HttpServlet继承于GenericServlet、GenericServlet实现于Servlet，也就是说Servlet是顶层接口!!!
  2. 如果要实现Servlet功能

方式一：实现Servlet接口

在servlet接口中，没有doGet和doPost方法，处理请求是service方法(抽象的)

方式二：继承GenericServlet类

在GenericServlet类中，没有doGet和doPost方法，处理请求是service方法(抽象的)

方式三：继承HttpServlet类

猜想，HttpServlet类中重写service方法。根据源码，发现重写service方法中，有将ServletRequest强转为HttpServletRequest, 将ServletResponse强转为HttpServletResponse以上强转是因为,ServletRequest和ServletResponse并没有针对Http协议做优化!!!无法专门针对http协议调用方法!!HttpServletRequest和HttpServletResponse有针对http协议做优化。

学习Java的第十周相关推荐

  1. Java：计算机编程语言Java的简介、安装(编程环境/工具)、学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略

    Java:计算机编程语言Java的简介.安装(编程环境/工具).学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略 目录 Java的简介 1.Java的工作原理--基于Eclipse等编 ...

  2. 学习Java的第三周

    文章目录 前言 正则表达式 1.概述 2.使用正则表达式的目的 3.正则表达式中的符号 4.创建匹配器Matcher类 5.Matcher类方法 异常处理 1.异常的概述 1.异常的继承体系 2.常见 ...

  3. 每日学习-Java基础（十）接口和继承10（内部类）

    一.内部类 内部类 // 内部类有四种类型 // 1-非静态内部类 // 2-静态内部类 // 3-匿名类 // 4-本地类 1.非静态内部类 package ia10_innerClass;publ ...

  4. 小白学习Java第四十天

    今日内容 ES6语法 VUE使用步骤 VUE常见指令 VUE生命周期 VUE组件 ECMAScript语法 ES6概述 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的 ...

  5. 学习Java的第十天

    这周末进行了项目实战,要求写一个小项目,没有多少的笔记: JDBC(Java DataBase Connection)数据库连接: 1.加载驱动-->建立连接-->创建操作对象--> ...

  6. 我在上海乐字节学习java的第二十五天（持续更新中）

    天气预报项目需求 天气预报项目需求 , 具体要求如下: 气象站可以将每天测量到的温度,湿度,气压等等以公告的形式发布出去 ( 比如 发布到自己的网站或第三方 ) . 需要设计开放型 API ,便于其他 ...

  7. 学习java随堂练习-20220624

    目录 第1题 第2题 第3题 第4题 今天是学习Java的第十九天 4道练习题 第1题 题目: 1.多态练习1 笔记本支持用户使用电池 (Battery) 和交流电(AcPower)两种方式进行供电. ...

  8. 学习java随堂练习-20220621

    目录 第1题 第2题 第3题 第4题 第5题 今天是学习Java的第十六天 5道练习题 第1题 题目: 1.定义一个方法,获取传入的邮箱地址的用户名 public String getUsername ...

  9. 学习java随堂练习-20220617

    目录 第1题 今天是学习Java的第十四天 1道练习题 第1题 题目: 运行结果: 代码如下: /*** (1) Student:描述学生类 ① 属性:学号,姓名,性别,电话 ② 方法:显示详细信息* ...

最新文章

  1. GAN（Generative Adversarial Nets）研究进展
  2. Java模式（适配器模式）
  3. Linux下安装配置virtualenv与virtualenvwrapper
  4. objc swift 混编
  5. Lecture 1 Analysis of Algorithms
  6. 字符串驻留机制截图?#注意回顾字符串的深浅拷贝小数据池那节
  7. macaca运行报错之chrome-driver问题处理，关闭 Chrome 的自动更新
  8. 为什么用scrum_为什么Scrum糟糕于数据科学
  9. 指向函数的指针数组（C++)
  10. AttributeError: 'Request' object has no attribute 'is_xhr' 报错的解决办法
  11. Navicat过期问题的解决
  12. php算法不大于n的质数,php求不大于n的质数
  13. 40岁学python怎么样_40岁老男人从0开始学Python实录（第5天）：到底Python是啥东东？...
  14. unity3d 改变脚本名称_Unity3D脚本中文教程
  15. android studio打包h5打包,AndroidStudio将html5打包成apk
  16. Flask 框架的网站实现
  17. java 获取某一天的起始时间
  18. OPCUA标准java实现 Milo库
  19. 手动删除oem 13c
  20. 【报告分享】2021上半年全球手游广告变现报告-TopOn（附下载）

热门文章

  1. python 根据网易云歌曲的ID 直接下载歌曲
  2. 时间管理自我管理的演讲稿
  3. jnz和djnz_单片机的基本指令有哪些
  4. Kaggle提示：TTA（测试时间增加）,小,技巧,TTAtesttimeaugmentation,增强
  5. Django 图书-英雄
  6. 同样的代码不同环境 提示握手失败：ssl_client_socket_impl.cc handshake failed
  7. python判断值是否存在_python如何判断元素是否存在
  8. 【网络工程师路由篇】——华为静态路由基础
  9. Mac下使用item2建立远程连接
  10. C++ as3 socket服务端