本周学习了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协议做优化