Web前端开发思维导图模板_ProcessOn思维导图、流程图

HTML5

页面结构

常见标签

HTML 标题（Heading）是通过<h1></h1> - <h6></h6> 标签来定义的。

HTML 段落是通过标签 <p></p> 来定义的。

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

HTML 链接是通过标签 <a href="https://www.runoob.com" title="鼠标悬浮提示">这是一个链接</a> 来定义的

锚点

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>

target属性

target="_blank" ：新窗口打开链接

target="_self" ：当前窗口打开链接

HTML 图像是通过标签 <img src="/images/logo.png" /> 来定义的.

alt属性：为图像定义一串预备的可替换的文本

height（高度）与 width（宽度）

HTML 换行是通过标签 <br> 来定义的.

<hr> 标签在 HTML 页面中创建水平线.

HTML 注释 

HTML <div> 元素

块级元素(宽度占父级标签100%，可以设定宽高)，它可用于组合其他 HTML 元素的容器

display: inline 转换为行内元素

HTML <span> 元素

行内元素（内容多大就多大，不可以设置宽高），可用作文本的容器

display: block 转换为块级元素

格式化问题

显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格

粗体：<b></b> 或者 <strong></strong>

斜体：<i></i> 或者 <em></em>

放大/缩小：

<big>这个文本字体放大</big>

<small>这个文本是缩小的</small>

上标/下标：

HTML表格

HTML 表格由 <table></table> 标签来定义

每个表格均有若干行（由 <tr></tr> 标签定义）

表格可以包含标题行（<th></th>）用于定义列的标题

每行被分割为若干单元格（由 <td></td> 标签定义）

神器：HTML 表格生成器

HTML列表

有序列表

列表项目使用数字进行标记

有序列表始于 <ol> 标签

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

list-style: none;

HTML 表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

action : 提交到服务器的地址

method ：提交方式

get（默认，不支持文件上传，低版本服务器端不可以处理中文）

post（可以处理中文）

输入标签 <input type="text">

type类型

文本域（text）

密码字段（password）

单选按钮（radio）

name

value ：传递到服务器的值

复选框（checkboxes）

提交文件(file)

提交按钮(submit)

重置按钮(reset)

name属性

placeholder属性

readonly ：只读

required ：必填

pattern : 正则表达式

下拉框：<select name=" "></select>

文本域： <textarea name=" "></textarea>

CSS3

内联样式- 在HTML元素中使用"style" 属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件（最好的方式）

<link rel="stylesheet" type="text/css" href="mystyle.css">

选择器

元素/标签选择器

class选择器

id选择器

优先级：!important > id > class > 元素 > 浏览器默认

分组选择器（，）

包含选择器（空格）

div p {
font-weight: bold;
}

div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

子代选择器（>）

div>p{
background-color:yellow;
}

选择了<div>元素中所有直接子元素 <p>

文本属性：

color

font-size

font-family

font-style

italic

font-weight

bold

lighter

text-shadow

h-shadow

v-shadow

blur

color

text-decoration

underline

line-through

overline

text-align

center

right

left(default)

justify

text-overflow

clip

This is some long text that w

ellipsis

This is some long text that w...

同时设置三个属性

white-sapce：nowrap；

overflow：hidden；

text-overflow：ellipsis；

链接（伪类选择器）

a:linked 正常，未访问过的链接

a:visited 用户已访问过的链接

a:hover 用户已访问过的链接

a:active 链接被点击的那一刻

2D 转换（transform）

translate() 方法:根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate() 方法:在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale()方法:该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

CSS尺寸

CSS Display（显示）

display:none；可以隐藏某个元素，且隐藏的元素不会占用任何空间。

visibility：hidden；可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

display:inline; 显示为内联元素

display:block; 作为块元素

display: inline-block; 作为行内块元素：

Position(定位)

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

Fixed定位使元素的位置与文档流无关，因此不占据空间

relative

相对定位元素的定位是相对其正常位置。（相对于自身原始位置移动）

移动相对定位元素，但它原本所占的空间不会改变。

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

弹性盒子模型

父项目属性

display：flex；

flex-direction(主轴方向)

row

row-reverse

column

column-reverse

flex-wrap(换行)

nowrap

wrap

wrap-reverse

justify-content（主轴方向对齐方式）

flex-start

center

flex-end

space-between

space-around

align-items（交叉轴方向布局对齐方式）

stretch：未设置高度（或height: auto）的项目占满整个容器高度

flex-start

flex-end

center

baseline

项目属性

order（优先级排序）

元素按照 order 属性的值的增序进行布局。
拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

flex-grow（放大）

flex-shrink（缩小）

flex-basis(定义在分配多余空间之前，项目占据的主轴空间)

尽可能使主轴（交叉轴）的份数总和为12

神器：渐变工具

线性渐变：background： linear-gradient(direction, color-stop1, color-stop2, ...);

径向渐变：background: radial-gradient(shape size at position, start-color, ..., last-color);
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

过渡（transition）

指定要添加效果的CSS属性

指定效果的持续时间

动画

@keyframes 动画名称{
from {} to {} 或者
0% {} 50%{} 100%{}
}

规定动画的时长

animation-iteration-count 属性定义动画应该播放多少次

n

infinite

简写：animation: mymove 5s infinite

JavaScript

JavaScript特点

解释型脚本语言，可以直接执行

基于对象，可以创建对象，也能使用现有对象

跨平台，通过js引擎就可以运行js代码

嵌入式，调用浏览器提供的操作html元素的接口操作html元素（DOM）

基本结构：<script type="text/javascript' language="JavaScript"></script>

在页面中的位置

head部分中（head会先加载，所以进行页面初始化的js需放在head里）

body部分中（顺序执行）

变量声明
数据类型由所赋值的类型来决定

let 变量名 = 变量值

var 变量名 = 变量值

数据类型

基本数据类型

number：任何数字

boolean

string

null

undifined：未被复制的变量

引用数据类型

function

object

Date

Array

获取变量数据类型：typeof 变量名

数据类型转换

减、乘、除可以自动隐式转换

强制类型转换parseInt（）、parse Float（）

函数

函数声明

function functionName (parm，parm) {
函数体
}

let functionName = function (parm, parm) {
函数体
}

数组

创建

let arr=[1, , 2, 'hello', function]; / ~~let arr=new Array[1, , 2, 'hello', function]~~

let arr=[] / ~~let arr=new Array();~~

数组存储的数据可以是任何类型

splice（）删除：splice（开始位置,删除元素长度）

splice（）插入：splice（开始位置,删除元素长度,新插入元素… …）

splice（）替换：splice（开始位置,要替换的元素长度,替换元素… …）

字符串

日期

BOM（浏览器对象模型）
& DOM（文档对象模型）

BOM

window（核心）

alert('warning message')

confirm('Hello') 确认框

prompt('请输入信息') 用户输入弹窗，返回值为输入的内容

setTimeout(functionName, millionsecond) 制定豪秒后调用指定函数一次

setInterval(functionName, millionsecond) 间隔制定毫秒调用指定函数

location用于获取或设置地址栏中的url

location.reload(); 刷新

location.href = 'url'; 跳转

history

history.back()

history.forward()

history.go()

DOM

获取DOM对象

getElementById() 通过元素的ID属性获取DOM对象

getElementsByTagName() 通过元素的标签名获取DOM对象

getElementsByClassName() 通过元素的class属性获取DOM对象

getElementsByName() 通过元素的name属性获取DOM对象

给DOM对象设置CSS样式: DOM对象.style.样式属性名 = '样式值'

javaScript代码要写在body的最后，必须要保证html代码全部加载完毕之后，才执行javaScript代码获取DOM对象

Servlet

servlet工作原理

建立连接：浏览器根据IP地址和端口号（port）和服务器建立连接

打包：浏览器将请求数据按HTTP协议打成http请求数据包，http 请求数据包包含请求资源路径

发送请求：浏览器向服务器发送请求数据包

创建Request对象

创建Response对象

创建Servlet实例

调用Servlet 实例的service(request , response)方法

访问参数

处理结果

取数据：Servlet引擎从Response 对象中取出数据

打包：Servlet引擎将取出的数据打包，该数据包符合http 协议要求

发送响应：浏览器将响应数据包中的数据取出，生成界面

HTML状态消息

404找不到资源(访问路径错误)

500系统错误(即程序代码有误）

200访问成功

http状态码分类

转发&重定向

重定向

服务器向浏览器发送一个状态码302及一个消息头location，
浏览器收到后，会立即向location所指向的地址发送请求。

response.sendRedirect(String url);

重定向之前，不能够有out.close()或者out.flush()操作

重定向之前，如果response对象缓存有数据，则这些数据会被清空。

客户端浏览器中进行的

转发的地址必须是同一个应用内部的某个组件（不能跨应用，不能跨服务器）

转发可以共享request对象

浏览器地址栏的地址不会发生变化

服务器内部完成的

servlet生命周期

Servlet加载

Servlet实例化

初始化

在Servlet的生命周期中，仅执行一次init()方法

服务

当一个客户请求一个HttpServlet对象，该对象的service()方法就要调用

销毁

在服务器端停止且卸载Servlet时执行destroy（）方法

Servlet本身就是一个单例设计模式

重写构造方法和初始化方法证明

注意

1、单例类只能有一个实例。

2、单例类必须自己创建自己的唯一实例。

3、单例类必须给所有其他对象提供这一实例。

为什么要设计成单例

节省资源：每个Servlet实例都需要占用内存和其他系统资源。如果每个请求都创建一个新的Servlet实例，将会导致资源的浪费。通过使用单例模式，Servlet容器可以在启动时创建一个Servlet实例，并在请求到达时重用该实例，从而节省了资源。

提高性能：创建和销毁Servlet实例需要一定的时间和开销。如果每个请求都创建一个新的Servlet实例，将会增加服务器的负载和响应时间。而使用单例模式，Servlet容器可以维护一个池化的Servlet实例，通过重用实例来处理多个请求，从而提高了性能和响应速度。

状态共享：Servlet通常需要在多个请求之间共享状态信息，例如数据库连接、缓存等。如果每个请求都创建一个新的Servlet实例，那么状态信息将无法在请求之间共享。而使用单例模式，Servlet实例可以在多个请求之间共享状态，从而方便数据的传递和共享。

状态管理（解决http协议无状态特性）

使用cookie（在客户端管理用户的状态）

浏览器在访问服务器时，服务器将一些数据以set-cookie 消息头的形式发送给浏览
器。浏览器会将这些数据保存起来。当浏览器再次访问服务器时，会将这些数据以
cookie 消息头的形式发送给服务器。通过这种方式，可以管理用户的状态。

Cookie cookie = new Cookie(String name,String value);
response.addCookie(cookie);

启动浏览器后，操作系统会为浏览器开辟一块内存空间，在浏览器访问服务器时，
服务器生会成消息头set-Cookie 发回给浏览器，浏览器将服务器生成的消息头保
存到内存区域，当浏览器关闭后，系统回收为浏览器分配的内存，Cookie 也相应消失

设置cookie保存时间
c.setMaxAge(second);

seconds > 0 浏览器会将cookie 以文件的方式保存在硬盘上。在超过指定的时间以后，会删除该文件。

seconds < 0 默认值，浏览器会将cookie 保存在内存里面。只有当浏览器关闭之后，才会删除

seconds = 0 立即删除该Cookie

cookie的特性

cookie 可以禁止

cookie 的大小有限制（≈4k）

cookie 的数量也有限制（≈300）

cookie 的值只能是字符串

cookie 不安全

浏览器禁用cookie后session也会失效（session依赖cookie机制）

使用session（在服务器端管理用户的状态）

浏览器访问服务器时，服务器会创建一个session对象(该对象有一个唯一的id, 一般
称为sessionId)。服务器在默认情况下，会将sessionId 以cookie 机制发送给浏览器。
当浏览器再次访问服务器时，会将sessionId 发送给服务器。服务器依据sessionId就可
以找到对应的session对象。通过这种方式，就可以管理用户的状态。

HttpSession session = request.getSession();

一些方法

String session.getId();

session.setAttribute(String name,Object obj);

session.getAttribute(String name);

session.invalidate();

服务器在对session 进行持久化操作时，为什么obj 最好实现Serializable 接口

obj进行序列化的原因是可以写到硬盘上。
服务器上一般会保存中许多的Session对象，里面存放了大量用户状态的数据（比
如网上购物信息），通常情况下内存是有限的，对于海量的访问，这些Session是不够
的，所以一般情况下，我们配备一些数据库（也可以文件的方式保存到硬盘），用于保
存Session中的数据。Session中某个用户的数据进行序列化保存到数据库（或硬盘）
时，该Session就可以空闲出来用于新用户的连接。

http协议

HTTP 协议是超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传送协议。
是一个基于 TCP/IP 通信协议来传递数据

注意：

HTTP 是无连接：无连接的含义是限制每次连接只处理一个请求，服务器处理完客户的请求，
并收到客户的应答后，即断开连接，采用这种方式可以节省传输时间。

HTTP 是媒体独立的：只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送

HTTP 是无状态的：无状态是指协议对于事务处理没有记忆能力，缺少状态意味着如果后续处理需要前面的信息，
则它必须重传，这样可能导致每次连接传送的数据量增大，另一方面，在服务器不需要先前信息时它的应答就较快。

通讯过程

浏览器向服务器发送建立连接的请求

浏览器将请求数据打包，向服务器发送请求。

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：
请求行（request line）、请求头部（header）、空行和请求数据四个部分组成

服务器处理完请求，然后将数据打包，发送给浏览器。

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

服务器发送完数据，关闭连接

get/post请求

提交数据大小

get携带数据有大小限制，不适合提交大量的数据

post无限制，适合大量数据的提交（post方式是将请求参数及参数值放在实体内容里面）

安全性

get会将请求参数及值显示在浏览器地址栏

post请求参数及值存放在实体内容里面，但式并没有将数据加密

有非latin1字符的数据用post，提交文件必须用post

中文乱码处理

html文件中：<meta charset="utf-8">

servlet访问参数：request.setCharacterEncoding("utf-8");

servlet取数据：response.setContentType("text/html;charset=utf-8");

JSP

九大内置对象

HttpServletRequest request

HttpServletResponse response

JSPWriter out

HttpSession session

ServletContext application

Throwable exception

需指定当前页面isErrorPage=“true”

Object page

PageContext pagecontext

ServletConfig config

四大作用域

pageScope：作用于当前页面

requestScope：作用于一次请求过程

sessionScope：作用于一次会话期（30分钟/关闭浏览器）

applicationScope：作用于整个服务器（服务器关机）

JSON轻量级
数据交换格式

我们需要这样一种对象，来存储一个实体数据来作为前端与服务器端进行数据交互的载体

JSON对象形式

键值对形式

let user = {
  userId:1,
  userName:'张三',
  userSex:'男'
}

JSON数组

一个json数组中包含多个json对象

let userArr = [
{
    userId:1,
    userName:'张三',
    userSex:'男'
  },
{
    userId:2,
    userName:'李四',
    userSex:'女'
  }]

JSON对象获取： let user = userArr[0];

JSON属性获取：let userName = userArr[0].userName;

JSON & 字符串

javaScript中内置了一个JSON对象，可以用来进行json与字符串之间的转换

JSON转字符串： JSON.stringify(jsonObject)

字符串转JSON ： JSON.parse(str)

与xml相比，JSON优势

XML 是一种纯文本格式，格式比较复杂，解析困难

JSON是一种轻量级的数据交换格式

JSON易于阅读和编写，也易于机器解析和生成

JSON采用完全独立于语言的文本格式

jQuery（JavaScript库）

jQuery引入：百度CDN，减少加载时间，提高加载速度
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

jQuery语法

基本语法：$(selector).action()

文档就绪事件：
$(document).ready(function(){
// 开始写 jQuery 代码...
});

jQuery选择器

标签选择器 $("p")

#id选择器 $("#test")

.class选择器 $(".test")

选取第一个元素 $("p:first")

属性选择器

$("[href]")

$("a[target='_blank']")

jQuery事件

举个栗子：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});

Ajax

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

工作原理

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML(作为转换数据的格式)

创建XMLHttpRequest对象：var xmlhttp = new XMLHttpRequest();

向服务器发送请求

xmlhttp.open（method, url, async）

method：get/post

url：xmlhttp.open("GET","ajax_test.html",true);
可以是任何类型的文件

async：通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

xmlhttp.send（string）

服务器响应

如果来自服务器的响应并非 XML，使用 responseText 属性返回字符串形式的响应。

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性

XMLHttpRequest 对象的三个重要的属性

onreadystatechange

readyState

等于 4 且状态为 200 时，表示响应已就绪

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}