导图社区 前端_web 思维导图
- 104
- 11
- 1
- 举报
前端_web 思维导图
觉得“前端_web”晦涩难懂么，难以记忆吗，不用怕了，收藏这个图，包您掌握“前端_web”，本图知识梳理清楚，非常实用，值得收藏。
编辑于2021-06-27 18:25:18- web知识点
- 相似推荐
- 大纲
前端-web核心
HTML
第1章 概述
HTML
超文本标记语言
作用：搭建基础网页结构
第2章 基础
开发工具
idea
搭建 static web 模块
书写规范
文档声明
标签
双标签
单标签
属性
文本
注释
第3章 常用标签
标题
hn
h1~h6
水平线
hr
color
光三原色
段落换行
br
换行
p
段落
特点：上下留白
a
超链接
href
绝对地址
相对地址
./当前目录
../上一级目录
target
_self（默认）
_blank
打开新窗口
img
src
相对地址
./当前目录
../上一级目录
绝对地址
width
纵横比缩放
height
alt
列表
ul
无序
ol
有序
li
容器
div
块级元素，特点：独自占用一行
span
行内元素，特点：内容有多少，就占用多少
转义字符
&XXX;
英文半角
中文汉字
>
<
表格
table
border
bgcolor
cellspacing
cellpadding
width
height
align
tr
height
align
td
width
align
表格合并
colspan
rowspan
th
列标题单元格
特点：居中、加粗
第4章 表单
表单容器
form
action
method
get
post
推荐使用
表单标签
input
name
value
type
text
password
date
radio
checkbox
file
reset
submit
button
checked
用于设置单选和复选默认选中
label
for
表单项辅助标签
需要跟表单项id进行绑定
select
option
selected
默认选中
textarea
css
作用：美化网页
CSS基础语法
HTML引入CSS
行内样式：所有标签都有一个style属性
内部样式：使用style标签
外部样式：通过link标签引入外部样式
书写和规范
选择器{样式名：样式值；}
基本选择器
标签
用于声明html中的标记的样式： p,hl,div等 如： div{ height=30px weigth=20px }
id
只能应用一个元素 例如： #hello{ property:value; }
class
可以应用与所有所有同类标记的显示样式 例如 .hello{ font=50px } nihao
扩展选择器
并集
并集选择器就是对多个选择器的集体声明 用 ， 隔开 例如： p,td,li{ line-height:20px; color:red; }
层级
后代
后代选择器可以对嵌套的标记进行控制 ,外层标记写在前面，内层标记写在后面 例如： div b { color:#060; font-weight:8000; }
父子
子选择器：对下一级标记有效 例如 div>p { font-family:"幼圆"； color：#F00; } 有效 无效
属性
通过一个元素的不同属性，来选择 例如： div[id="first"]{ color:blue; background-color:yellow; } 可以设置id=first的元素背景色，和前景色 input[type="text"] { border:1px dotted blue } 可以设置input元素中的text类型
CSS常用样式
字体文本
背景
background
显示
display
block
块元素
inline
行内元素
none
隐藏
浮动
float
left
right
盒子模型
组成
宽高
边框
border
内边距
padding
外边距
margin
js入门
概述
作用：网页交互
js组成
ECMAScript
基础语法
BOM
浏览器对象模型
DOM
文档对象模型
基础语法
HTML引入JS
内部脚本
外部脚本
JS三种输出方式
alert(）
document.write()
console.log()
JS变量声明
let
const
JS数据类型
基本数据类型
number
string
boolean
undefined
引用数据类型
object
js高级
BOM对象
简介
浏览器对象模型
Window对象
三种弹框
alert()
confim()
prompt()
二种定时器
setTimeout(函数,毫秒)
clearTimeout(定时器)
setInterval(函数,毫秒)
clearInterval(定时器)
Location对象
reload()
href
跳转页面
DOM对象
简介
文档对象模型
获取元素
ES5
getElementById(id属性值)
ES6
querySelector(CSS选择器)
querySelectorAll(CSS选择器)
操作内容
innerText
innerHTML
操作属性
js对象.属性名
原生属性
操作样式
js对象.style.样式名(驼峰格式)
js对象.style.cssText
js对象.className
操作元素
添加元素
js对象.innerHTML +=追加内容
document.createjs对象(标签)
parentNode.appendChild(newNode)
正则表达式
创建
let rege = new RegExp(“正则表达式”);
let regex = /正则表达式/;
验证方法
正则对象.test(字符串)
综合案例
表单校验
发挥大家的想象力
商品全选
省市联动
隔行换色
tomcat&http
web知识概述
架构分类
C/S
客户端专门安装软件
B/S
浏览器作为客户端
web服务器作用
将本地资源发布到互联网，用户可以通过浏览器访问
资源分类
静态
.html .css .js .jpg
动态
.jsp
常见服务器
Tomcat
tomcat服务器
下载
apache-tomcat-8.5.31-windows-x64.zip
安装
解压缩即可
目录结构
bin
startup.bat
启动
shutdown.bat
关闭
conf
server.xml
配置恩建
lib
logs
temp
webapps
存放自己编写web项目，对外发布
work
启停
startup.bat
shutdown.bat
启动有问题
JAVA_HOME环境变量
端口占用
找到占用端口软件，关闭掉，在启动tomcat
修改tomcat在启动
tomcat发布项目方式
webapps目录
热部署
conf/server.xml
不推荐
conf/catalina/localhost
热部署
web项目目录结构
WEB-INF
classes
lib
web.xml
web3.0之后可选
静态资源
index.html或index.jsp
idea中使用tomcat
配置tomcat
创建web项目
启动
重启tomcat
重新部署项目
http协议
概述
在客户端和服务器端通信时，规范了传输数据的格式
构成
请求格式
行
请求方式
get
post
URL
协议
头
请求的描述信息
Referer
User-Agent
体
数据内容
get方式没有，post才有
响应格式
行
协议
状态码
200
302
304
404
405
500
头
响应的描述信息
Location
Content-Type
Content-Disposition
refresh
Last-Modified
体
数据内容
Servlet
一 Servlet概述
运行在服务器端的java程序
一个类要想通过浏览器被访问到,那么这个类就必须直接或间接的实现Servlet接口
二 Servlet快速入门
① 创建web项目
创建java空项目->new moudel 时选择javaee
② 创建普通的java类，实现servlet接口，重写抽象方法
③ 配置web.xml
④ 部署web项目
⑤ 启动测试
三 Servlet相关API
生命周期相关
创建
1)默认情况下，用户第一次访问时创建，执行init方法，只创建一次
2）修改创建时机，在tomcat启动时，创建servlet，执行init方法，只创建一次
运行（提供服务）
用户访问servlet资源时，执行service方法
销毁
服务器正常关闭，销毁servlet，执行destroy方法
ServletConfig接口
加载web.xml配置文件信息，实现参数和代码的解耦
四 Servlet体系结构
Servlet
GenericServlet
HttpServlet
五 Servlet路径
url-pattern
Servlet映射多个url
url映射模式
精确匹配
目录匹配
后缀匹配
相对/绝对路径
绝对路径...
六 Servlet3.0
@WebServlet("/网络访问地址")
一 ServletContext
概述
代表当前web项目对象
主要作用
共享数据（域对象）
获取资源文件在服务器上真实路径
获取全局的配置参数
web.xml中配置<context-param>
获取文件MIME类型
互联网传输数据时，识别文件的类型
案例：统计网站的访问次数
请求和响应
request
一 Request概述
开发人员可以通过request对象方法，来获取浏览器发送的所有信息.
二 Request获取Http请求信息
行
getMethod()
请求方式
get
post
getContextPath()
项目名（虚拟路径）
getRemoteAddr()
客户端的ip地址
头
getHeader(String key)
Referer
防盗链
User-Agent
浏览器兼容器
getHeaderNames()
参数（体）
api
getParameter()
getParameterValues()
getParameterMap()
BeanUtils工具类
封装请求参数到实体类中 用法: 1.要想使用beanutils，需要先导包 Users user = new Users(); BeanUtils.populate(user, request.getParameterMap());//就这一句话
中文乱码
get：tomcat8及以上版本，解决了get方式乱码问题
post：request.setCharacterEncoding("utf-8");
三 Request其他功能
请求转发
一种在服务器内部的资源跳转方式
request.getRequestDispatcher("/内部资源").forward(request,response);
特点
转发是一次请求
浏览器地址栏不发生变化
只能跳转到服务器内部资源
域对象（共享数据）
api
void setAttribute(String name, Object o)
Object getAttribute(String name)
void removeAttribute(String name)
生命周期
何时创建
用户发送请求时
何时销毁
服务器做出响应后
作用范围
一次请求转发中
获取ServletContext
api
ServletContext getServletContext()
二 Response
概述
开发人员可以使用response对象的方法，设置要返回给浏览器的响应信息
Response设置响应消息
设置响应行
void setStatus(int sc)
设置响应头
void setHeader(String name, String value)
设置响应体
ServletOutputStream getOutputStream() 字节输出流
PrintWriter getWriter() 字符输出流
响应重定向
转发与重定向的区别
转发
地址栏： 没有改变
浏览器： 发了一次请求
服务器： 只有一对请求和响应对象
发生的位置： 服务器
重定向
地址栏： 发生了改变
浏览器： 发了两次请求
服务器： 有两对请求和响应对象
发生的位置： 浏览器
响应定时刷新
响应中文
response.setContentType("text/html;charset=utf-8");
会话技术
cookie
一 会话概述
会话
浏览器与服务器的交互称为一次会话，包含多次请求和响应
会话技术作用
存储会话过程中产生的数据
种类
cookie
会话数据保存在客户端
session
会话技术保存在服务器端
二 Cookie
概述
在一次会话的多次请求之间共享数据，将数据保存到客户端（浏览器）
实现原理
基于HTTP协议
请求头
cookie
响应头
set-cookie
常用方法
创建cookie
Cookie cookie = new Cookie(String name,String value)
发送cookie
response.addCookie(cookie)
获取cookie
request.getCookies()
细节
设置cookie存活时间
cookie.setMaxAge()
正数
持久化
负数
默认在内存中
零
自杀
设置cookie携带路径
cookie.setPath()
默认情况下，是当前设置cookie的servlet父路径
通常情况在当前项目共享
cookie.setPath("/项目名")
设置cookie跨域共享
cookie.setDomain()
特点
1. cookie在客户端存储数据
2. cookie存储数据格式只能是字符串
3. 客户端对单个cookie存储数据不能超多4kb
4. 同一个域名下cookie总数量不能超过50个
5. cookie存储数据不安全
6. cookie路径不同，可以重名出现
三 综合案例
用户上次访问记录
servlet版本
jsp版本
Jsp初体验
既可以定义html标签，又可以定义java代码
商品浏览记录
1）goods.html
2）GoodsInfoServlet
3）history.jsp
session
概述
在一次会话的多次请求之间共享数据，将数据保存到服务器端
实现原理
基于Cookie技术
jsessionid=xxxx
常用方法
获取session
request.getSession()
使用session
setAttribute()
getAttribute()
remomveAttribute()
生命周期
何时创建
用户第一次执行getSession()方法时，创建
用户携带的jssionid与服务器不匹配时，创建
何时销毁
1. 服务器非正常关闭时
2. session.invalidate()
3. session默认销毁时间30分钟
tomcat目录/conf/web.xm
作用范围
一次会话中，多次请求之间
特点
1. session在服务器端存储数据
2. session存储数据格式可以是任意类型
3. session存储数据没有大小限制（相对于内存）
4. session存储数据相对安全
三个域对象
ServletContext
创建
销毁
作用域
HttpSession
创建
销毁
作用域
HttpServletRequest
创建
销毁
作用域
综合案例
商品购物车
用户登录（验证码）
jsp&mvc
jsp
概述
运行在服务器的java页面
既可以编写java代码，又可以编写html标签
本质
就是servlet
脚本
注意：servlet是一个单例对象
相当于out.print()方法
注释
html
jsp
java（脚本内部）
// 单行注释
/* 多行注释 */
指令
page：配置jsp页面
contentType
设置响应体的MIME类型和编码方式
language
只能是java语言
import
导包
errorPage
跳转到友情提示页面
isErrorPage
捕获异常信息
true
打开
false
include：页面包含（静态）
生成一个java文件，编译为class，执行
taglib：导入外部资源
apache的jstl标签库
九大内置对象
pageContext
1）当前页面中共享数据（域对象）
2）获取其他八个内置对象
request
response
out
在jsp中，只能使用out输出字符
print()
可以输出一切类型
write()
只能输出字符类型
jsp动作标签
jsp:include
页面包含（动态）
推荐使用静态包含
jsp:forward
请求转发
jsp:param
就是forward子标签，用于数据的传递
可以通过request.getParameter()获取参数
mvc
jsp发展史
早期还有servlet
过度使用jsp
servlet+jsp完成互补
mvc设计模式
高内聚，低耦合
M
model（模型）
javaBean（1.处理业务逻辑 2.封装实体）
V
view（视图）
jsp（展示数据）
C
controller（控制器）
servlet（1.接收请求 2.调用模型 3.转发视图）
el&jstl&三层架构
el
概述
专门从域中获取数据
作用
1.可以获取"域对象"中存储的数据 2.可以运算
语法
从指定域中获取
了解
从最小域开始查找，若匹配上则停止
1.值为基本类型或者字符串类型
语法: ${键} 例如: req.setAttr("aaa",123); ${aaa} 注意: 当键比较特殊的时候, 需要用完整格式来获取 req.setAttr("123",123); ${123} ---> 错误方式获取方式,因为el可以向页面输出内容 完整格式: ${域对象的代号['特殊的键']}
2.值为对象
语法: ${键.属性名} 例如: User user = new User(); req.setAttr("user",user) ${user.name} ----> 取到user对象, 通过getName方法得到name OGNL表达式: 对象导航语言, 其实底层调用对象的"属性", getXxx或者setXxx的方法 我们操作"属性",定义"逻辑视图", 其实就指的get方法和成员变量没有对应的情况, 为了让页面效果更好看
3.值为数组或者list集合
语法: ${键[索引]} 例如: String[] arr = {"aaa","bbb"}; req.setAttr("arr",arr) ${arr[0]}
4.值为map
语法: ${键.key} 例如: Map map = new HashMap(); map.put("itcast001",user1); map.put("itcast002",user2); req.setAttr("map",map) ${map.itcast001.name} 注意: 如果map的key比较特殊,也需要完整格式: ${域对象的代号.键['map特殊的key']}
运算符
非空判断
${not empty 键名}
字符串、对象、集合（非空和长度）
隐式对象
有11个隐式对象
${pageContext.request.contextPath}
动态获取项目名（虚拟路径）
注意:
可以动态获取虚拟路径 ----> 可以编写跳转的绝对路径!!!!!!!! ${pageContext.request.contextPath} 总结: el中内置11个对象, 但是其中有10个没什么卵用, 只有pageContext.request.contextPath
jstl
概述
apache提供的jsp标准标签库
作用
作用: 用来替代绝大部分的, 但是随着历史的长流, 只剩下一个标签库有用 core(核心库), 提供"流程控制"以及"循环"
使用
使用步骤
1.导入标签库
if标签
为真，显示标签体的内容
为假，不显示内容
通常与el表达式结合使用
没有else功能，需要通过条件取反模拟
forEach标签
1）普通for
begin 起始值
end 结束值
step 步长
var 临时变量
例如
var : 给变量起的名字 begin:指定从几开始 end: 指定到几结束 step: 步长,默认值是1
2）增强for
items 被遍历的集合
var 临时变量
varStatus 遍历状态
index 索引
count 计数器
遍历容器
var: 给遍历出来的起的变量名 items: 放置要遍历的容器, 通过通过el获取域中存储的集合 varStatus: 用来记录遍历的状态, index: 从0开始 count: 从1开始
choose标签
....
相当于switch语句
三层架构
在mvc设计模式基础之上，进行了细化
在程序的设计过程中，分层三块
表示层
web层
与浏览器交互
业务层
service层
处理业务逻辑
持久层
dao层
与数据库交互