学习心得--CSS、Tomcat、Servlet

最新推荐文章于 2024-05-01 16:40:22 发布

Mr_luhonglin

最新推荐文章于 2024-05-01 16:40:22 发布

阅读量309

点赞数

文章标签： css html tomcat java web

本文链接：https://blog.csdn.net/Mr_luhonglin/article/details/105454681

版权

本周学习了CSS的一些基本属性，盒子模型；Tomcat的安装和配置，部署项目的三种方式，以及如何修改web.xml文件改变默认欢迎界面；在IDEA下创建web项目，配置tomcat服务器，详细地讲述了将IDEA中web项目的哪些内容部署到tomcat中；还有http协议，请求和响应的执行过程；简单地编写了一个Servlet入门案例，以及创建Servlet的三种方式。

CSS

CSS：cascading(层叠)、style(样式)、sheets(表格)，指层叠样式表
CSS作用：通过CSS可以定义html元素(标签)如何显示
CSS的优点：通过css可以大大提高工作效率，可以让我们将html代码与样式代码分离

CSS和HTML的三种结合方式

内联结合：在标签中使用style属性（style=“属性名1: 属性值1;属性名2: 属性值2”）
内部结合：需要在head标签中，使用style标签；使用选择器选中元素
外部结合：在外部新建一个css样式文件，在html中使用link来引用

相对路径和绝对路径

绝对路径：不带协议的绝对路径/带协议的绝对路径
相对路径：相对于demo08.html资源去访问css01.css资源
./:当前目录 (可以省略) ； …/：上一级目录

CSS选择器

ID选择器：引用的是id属性值(在标签中设定id)；#id属性值{ 属性名 : 属性值; }
类选择器：引用的是class属性值；.class属性值{
属性名 : 属性值; }
标签选择器/元素选择器：标签名{ 属性名 : 属性值; }
选择器分组：如果多个选择器中的css代码相同，那么就可以将这多个选择器划为一组。
衍生选择器：依据元素所在的位置进行元素的选择
选择器的优先级：内联样式 > id选择器 > 类选择器 > 标签选择器

CSS伪类

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
a:hover 必须被置于 a:link 和 a:visited 之后
a:active 必须被置于 a:hover 之后

CSS字体属性

CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）
font-family：微软雅黑、楷体、宋体、仿宋。如果浏览器不支持字体系列，就会使用默认的字体系列(微软雅黑!)
font-size：字体大小
font-style：字体倾斜度
font-weight：字体的粗细

CSS文本属性

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
direction：ltr: left to right、rtl: right to left
line-height：行高
text-align：文本的对齐方式
text-decoration：文本装饰（underline none line-through）
letter-spacing：字符间距，字符与字符之间的间距
word-spacing：单词间距,单词与单词之间的间距

CSS背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
background：简写，顺序为background-repeat、background-attachment、background-position
background-color：将颜色作为背景
background-image：将图片作为背景
background-size：照片尺寸(cover覆盖)

CSS尺寸属性

CSS 尺寸 (Dimension)属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
height：设置元素的高度
width：设置元素的宽度
line-height：设置行高
max-height/width：设置元素的最大高度/宽度
min-height/width：设置元素的最小高度/宽度
css尺寸属性对行内元素无效！

CSS列表属性

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志
list-style-image：将图象设置为列表项标志
list-style-position：设置列表中列表项标志的位置
list-style-type：设置列表项标志的样式

CSS边框属性

CSS边框属性允许你规定元素边框的样式、宽度和颜色。
border-style:dotted solid double dashed：上边框是点状、右边框是实线、下边框是双线、左边框是虚线
border-width:thin medium thick 10px：上边框是细边框、右边框是中等边框、下边框是粗边框、左边框是10px宽的边框
圆角边框：border-radius: 50%（圆角半径是图片宽度的50%）

CSS盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
element : 元素
padding : 内边距,边框距元素的距离
border : 边框
margin : 外边距，边框距其他元素边框的距离
内边距和外边距的值可以是负数
在页面上，设置margin-right无效，因为元素默认是左对齐，不管怎么设置元素都是左对齐，所以将元素设置为右对齐就可以看到效果，float:right

CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位
position:固定(fix)、相对relative、绝对absolute、静态static
left:对元素进行左偏移
top:对元素进行上偏移
right:对元素进行右偏移
bottom:对元素进行下偏移
相对定位：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
绝对定位：绝对定位的元素的位置相对于最近的已定位父元素。

伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开发中可以发挥极大的作用。
主轴(main axis)：flex容器的主轴主要用来分配flex子元素，默认是水平方向。
侧轴(cross axis)：与主轴垂直的轴称为侧轴，默认是垂直方向。
主轴和侧轴并不是固定不变的，可以通过flex-direction进行切换,默认为水平方向(row)。

Tomcat

Tomcat的配置

JAVA_HOME配置：如果没有配置，执行startup.bat文件时会出现闪退效果
端口配置：tomcat默认使用的8080端口，可以进行端口号的修改,修改tomcat的端口号,在 tomcat/conf/server.xml文件

Tomcat的目录结构

bin：存放tomcat的可执行文件，比如：startup.bat
conf：tomcat的配置文件，比如：server.xml
lib：tomcat运行时所依赖的核心jar包，比如：server-api.jar
logs：存放tomcat的执行日志
temp：存放临时文件
webapps：部署web资源
work：存放jsp转义之后的java文件

Web项目

Web静态项目：包含都是静态资源：html、js、css、图片、音频等等
Web动态项目: 不是必须包含动态资源，可以有静态资源：html、js、css、图片、音频…，WEB-INF文件夹、web.xml文件
动态项目里有动态资源及WEB-INF文件夹、web.xml文件；一个静态web项目，肯定都是静态资源；一个动态web项目，可以有静态资源，可以有动态资源，必须有WEB-INF文件夹及web.xml工作中使用动态web项目

Tomcat部署项目

直接将项目放到webapps文件夹下
虚拟目录初级版：
1、将tomcat目录以外的资源部署到容器中
2、在tomcat的目录 -> conf文件夹 -> server.xml中 , 加一个
3、
从tomcat6.0开始，以上的配置方案，并不推荐使用，改动了tomcat的server.xml文件，一旦出错，tomcat容器裂开了。
虚拟目录升级版：
1、tomcat安装目录 -> conf文件夹 -> catalina -> localhost
2、新建一个任意名称的xml文件
3、需要到xml文件中编写如下代码：

<?xml version="1.0" encoding="utf-8" ?>
<Context docBase="C:\Users\qiuzhiwei\Desktop\dynamicproject"/>

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

Web动态项目的相关设置

无论输入什么网址，工程都默认访问index.html / 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容器中，那么就会遵守上述规定
修改工程的默认访问页面
1、直接修改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>

但是这样处理存在问题，所有的项目的欢迎页面都会跟随改变
2、直接修改项目自带的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>

以上配置仅针对当前项目有效

IDEA下部署Web项目

创建web工程

创建一个JavaWeb工程，Java Enterprise 、Web Application
项目名称、工作空间的选择
JavaWeb目录介绍：
src：存放java代码
web：存放web资源，比如：html、js、css、图片、jsp等
WEB-INF：存放java文件转译之后的class文件

IDEA配置tomcat

选择右上角Edit Configurations
点击加号 ->tomcat server -> local
点击Configure -> 点击加号 -> 选择tomcat
找到Application server，点击Configure -> 点击加号 -> 选择tomcat

tomcat的配置

On ‘Update’ action选项下选择Redeploy（重新部署项目）
On frame deactivation选项下选择Update classes and resources
找到Deployment选项，选择"+"号，External Source选择项目

IDEA部署web项目的方式

idea部署web项目的方式，本质就是虚拟目录优化版，但是有一些区别
步骤：
根据本地安装的tomcat，会给当前项目生成一个tomcat镜像，部署到tomcat镜像相当于部署到本地tomcat中
tomcat镜像部署项目的方式是虚拟目录优化版，镜像的安装目录 -> conf -> catalina -> localhost ,就找到了day50.xml配置文件

<Context path="/day50" docBase="F:\workspace\out\artifacts\day50_war_exploded" />

只有资源来到了day50_war_exploded文件夹中，才意味着部署成功。

Http协议

Http协议：超文本传输协议(hypertext transfer protocl)
基于tcp协议。tomcat服务器底层实现本质上就是TCP(Socket)

http请求的执行过程

根据windows系统的域名解析文件将域名解析成对应的本地ip,如果没有找到对应的IP,那么就将域名放到DNS服务器上就解析找到互联网上的对应IP
经过三次握手建立TCP连接（也可以是四次握手，但是浪费资源）
发起HTTP请求,包含请求行,请求头,请求正文
服务器返回HTTP响应,包含响应行,响应头,响应正文
浏览器解析响应正文并展示

http请求

请求组成：请求行、请求头、请求正文
请求行：
1、Request URL：请求路径，告诉服务器要请求的资源路径
2、Request Method：请求方式 , GET/POST
3、protocol：http协议版本
请求头：
1、Content-Type：浏览器告诉服务器，请求正文的数据类型
2、User-Agent：浏览器告诉服务器，我是个什么样的浏览器
请求正文：
1、只有当请求方式为post，且有请求参数时才会有请求正文

http响应

响应组成：相应行、响应头、相应正文
响应行：
在响应行中最重要的是响应状态码（Status Code）
200：服务器响应成功
302: 告诉浏览器，进行重定向
304: 页面上的内容没有发生改变，不需要重新请求服务器
404: 没有对应的服务器资源
500:服务器内部错误
响应头：
Location：告诉浏览器重定向的资源路径，需要结合响应状态码302使用（response对象）
Content-Type：服务器告诉浏览器，响应正文的数据类型；例：Content-Type:text/html;charset=utf-8; 服务器告诉浏览器，响应正文是文本和html标签；告诉浏览器，应该以utf-8的形式进行解码！浏览器就会以html标签及utf-8的形式对响应正文进行渲染显示
refresh：定时跳转
Content-Disposition：文件下载
响应正文：
对于http响应正文，它是真正被浏览器解析并显示在浏览器上的

Servlet

Servlet是运算在服务器上的一个java程序，简单说，它就是一个java类。我们要使用servlet,需要导入servlet的api
Servlet主要功能在于能够和浏览器进行交互，是一个动态资源。

** 编译环境确认和设置**

Extenal Libaries中必须要有服务器的jar包（Tomcat）
鼠标右键单机项目，点击Open Module Settings，找到Modules -> 项目名 -> Dependencies -> 点击加号 -> Library -> Java -> 勾选Tomcat -> Apply

Servlet入门案例

自定义Servlet继承HttpServlet
重写doGet方法和doPost方法
在web.xml配置servlet

<!--3.1，声明Servlet-->
    <servlet>
        <!--servlet的名称-->
        <servlet-name>Demo01Servlet</servlet-name>
        <!--servlet的全类名-->
        <servlet-class>servlet.Demo01Servlet</servlet-class>
    </servlet>

给自定义Servlet配置访问名称

<!--3.2，给Servlet设置访问名称
        Servlet should have a mapping-->
    <servlet-mapping>
        <!--servlet的名称-->
        <servlet-name>Demo01Servlet</servlet-name>
        <!--servlet的访问名称-->
        <url-pattern>/demo01</url-pattern>
    </servlet-mapping>

Servlet执行流程

浏览器发起请求: http://localhost:8080/day50/demo01
就会在服务器中找访问名称为demo01的Servlet -> Demo01Servlet
请求的处理就交给了Demo01Servlet的实例,根据请求方式get/post,决定是给doGet还是doPost方法处理
不管是get请求还是post请求，对于服务器来说，没差别的；

创建Servlet的三种方式

1、实现Servlet接口：在servlet接口中，没有doGet和doPost方法，处理请求是service方法(抽象的)
2、继承GenericServlet类：在GenericServlet类中，没有doGet和doPost方法，处理请求是service方法(抽象的)
3、继承HttpServlet类：HttpServlet类中重写service方法、将ServletRequest强转为HttpServletRequest、将ServletResponse强转为HttpServletResponse；以上强转是因为ServletRequest和ServletResponse并没有针对Http协议做优化，无法专门针对http协议调用方法，而HttpServletRequest和HttpServletResponse有针对http协议做优化