Java基础知识（四）（WEB）
文章目录
- Java基础知识（四）
- 1.Web概念概述
- 2.HTML搭建基础网页，展示页面内容
- 3.CSS页面美化和布局控制
- 4.JavaScript
- 4.1 ECMAScript
- 4.1.1 基本语法
- 4.1.2 基本对象
- 4.2 BOM
- 4.3 DOM
- 事件监听机制
- 5.Bootstrap
- 5.1 响应式布局
- 5.2 全局CSS样式和JS插件
- 6.XML
- 7.web服务器软件：Tomcat
- 8.Servlet：
- 9.HTTP：
- 10.Request对象
- 11.Respose对象
- 12.会话技术
- 12.1 Cookie：小甜点
- 12.2 Session：主菜
- 13.JSP
- 14.MVC：开发模式
- 15.EL表达式
- 16.JSTL
- 17.三层架构：软件设计架构
- 18.Filter：过滤器
- 19.Listener：监听器
- 20.JQuery
- AJAX
- JSON
- Redis
- Jedis
- Maven
Java基础知识（四）
1.Web概念概述
-
JavaWeb：使用Java语言开发基于互联网的项目
-
软件架构：
1. C/S：Client/Server 客户端/服务器端
在用户本地有一个客户端程序，在远程有一个服务器程序
优点：用户体验好
缺点：开发、安装、部署、维护麻烦
2. B/S：Browser/Server 浏览器/服务器端
只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：开发、安装、部署、维护简单
缺点：如果应用过大，用户体验可能会受到影响；对硬件要求过高 -
B/S架构详解
- 资源分类：
- 静态资源：使用静态网页开发技术发布的资源
特点：所有用户访问，得到的结果是一样的
如：文本、图片、音频、视频，HTML（用于搭建基础网页，展示页面内容），CSS（用于美化页面，布局页面），JavaScript（控制页面的元素，让页面有一些动态效果）
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以来展示静态资源 - 动态资源：使用动态网页及时发布的资源
特点：所有用户访问，得到的结果可能不一样
如：jsp/servlet，php，asp…
如果用户请求的是动态资源，那么服务器会执行动态资源，转换成静态资源，再发送给浏览器。
- 静态资源：使用静态网页开发技术发布的资源
- 资源分类：
2.HTML搭建基础网页，展示页面内容
HTML属性
-
概念：Hyper Text Markup Language 超文本标记语言，是最基础的网络开发语言
-
语法：
1. html文档后缀名 .html或 .htm
2. 标签分为
围堵标签：有开始标签和结束标签。如
自闭和标签：
3. 标签可以嵌套
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号引起来（单双都可）
5. html不区分大小写，但建议小写 -
form：用于表单的定义。可以定义一个范围，范围代表采集用户数据的范围
属性：
1. action：指定提交数据的URL
2. method：指定提交方式
分类：一共7种，2种比较常用
get：参数会在地址栏中显示，会封装到请求行中；请求参数的长度是有限制的；不太安全
post：参数不会在地址栏中显示，会封装在请求体中；请求参数的大小没有限制；较为安全
表单项中的值要想被提交：必须指定其name属性 -
一些零碎的知识（当初没记住的）
1. 单选框radio，复选框checkbox，一般会提供一个value值，指定其被选中后提交的值，checked属性可以指定默认值，要想让多个单选框实现单选的效果，name必须一致
2. label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点
3. 取色器color
4. textarea文本域，cols指定列数，每一行有多少字符，rows默认有多少行
3.CSS页面美化和布局控制
- 概念：Cascading Style Sheets 层叠样式表
- 好处：
1. 功能强大
2. 将内容展示和样式控制分离：降低耦合度，解耦；让分工协作更容易；提高开发效率 - 选择器：筛选具有相似特征的元素
1. 基本选择器
id选择器：建议id值唯一，#id属性值{}
元素选择器：标签名称{}，id选择器高于元素选择器
类选择器：选择具有相同class属性值的元素，.class属性值{}，id>类>元素
2. 扩展选择器：
选择所有元素 *{}
并集选择器：选择器1,选择器2
子选择器：选择器1 选择器2{} （1下的2）
父选择器：选择器1>选择器2{}（2的父1）
属性选择器（选择元素名称，属性名=属性值的元素）：元素名称[属性名=”属性值“]{}
伪类选择器：元素:状态{} - 盒子模型：控制布局
1. margin：外边距
2. padding：内边距
默认情况下内边距会影响整个盒子的大小
解决：设置盒子的属性 box-sizing:border-box
<html>
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/1.jpg") no-repeat center;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #f0f0ff;
background-color: rgba(255,255,255,0.8);
/*s水平居中*/
margin: auto;
margin-top: 90px;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left p:first-child{
color:#ffdf26;
font-size: 20px;
}
.rg_left p:last-child{
color:#a6a6a6;
font-size:20px;
}
.rg_center{
float: left;
width: 450px;
margin-top: 45px;
margin-left: 35px;
}
.rg_right{
float: right;
margin: 13px;
}
.rg_right p:first-child{
font-size: 15px;
}
.rg_right p a{
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday{
width: 250px;
height: 29px;
border: 1px solid #a6a6a6;
/*设置圆角*/
border-radius: 5px;
padding-left: 15px;
}
#checkcode{
width: 110px;
height: 29px;
border: 1px solid #a6a6a6;
/*设置圆角*/
border-radius: 5px;
padding-left: 15px;
}
#img_check{
height: 29px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #ffdf26;
border: 1px solid #ffdf26;
margin-left: 50px;
}
style>
head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_center">
<div class="rg_form">
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名label>td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">td>
tr>
<tr>
<td class="td_left"><label for="password">密码label>td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td>
tr>
<tr>
<td class="td_left"><label for="email">Emilelabel>td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入Emile">td>
tr>
<tr>
<td class="td_left"><label for="name">姓名label>td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td>
tr>
<tr>
<td class="td_left"><label for="tel">手机号label>td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="手机号">td>
tr>
<tr>
<td class="td_left"><label>性别label>td>
<td class="td_right"><input type="radio" name="gender" id="male">男
<input type="radio" name="gender" id="femal">女
td>
tr>
<tr>
<td class="td_left"><label for="birthday">出生日期label>td>
<td class="td_right"><input type="date" id="birthday" placeholder="请输入出生日期">td>
tr>
<tr>
<td class="td_left"><label for="checkcode">验证码label>td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"/>
<img src="img/0.png" id="img_check">td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub">td>
tr>
table>
form>
div>
div>
<div class="rg_right">
<p>已有账号<a href="#">立即登录a>p>
div>
div>
body>
html>
4.JavaScript
- 概念：一门客户端脚本语言
运行在客户端浏览器；每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行 - 功能：
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验 - 发展史：
1992年，Nombase公司开发出第一门客户端脚本语言，专门用于表单的校验。命名为：c–，后来改名为ScriptEase
1995年，Netscape公司开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript：JavaScript
1996年，微软抄袭JavaScript开发出JScript
1997年，ECMA（欧洲计算机制造商协会），ECMAScript所有客户端脚本语言的标准
*JavaScript=ECMAScript+JavaScript（BOM+DOM）
4.1 ECMAScript
4.1.1 基本语法
1. 与html的结合方式：
内部JS：定义`