前端_web 思维导图

觉得“前端_web”晦涩难懂么，难以记忆吗，不用怕了，收藏这个图，包您掌握“前端_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层
          • 与数据库交互