详细描述JavaWeb 思维导图模板_ProcessOn思维导图、流程图

客户端

简介

在浏览器中运行的部分，就是用户看到并与之交互的界面程序，使用HTML、CSS、JavaScript构建

在web中是以request对象存在的，就是发送了一个需求给服务器端处理，具体的使用方法可以查找JavaEE的ServletRequest以及其子类

服务器端

简介

在服务器中运行的部分，负责存储数据和处理应用逻辑

客户端发送的需求交给服务器端处理，是以response对象存在

Node 网站服务器

能够提供网站访问服务的机器就是网站服务器，它能够接受客户端的请求，能够对请求作出响应

下边各概念的例子

http://mail.163.com:80/index.html

http://  协议名

mail  服务器名

www也是服务器名

163.com  域名

可以用IP地址代替域名

:80  端口号

mail.163.com  网站名，由服务器名加域名组成

/（index.html前的斜杠） 根目录

index.html  根目录下的默认网页

http://mail.163.com/index.html  URL

到访问http://mail.163.com/时及访问根目录，但服务器不会把整个目录都返回， 于是会在自己的目录下寻找默认的网页，一般是index.html

各种不同的传输协议分类

IP地址

Internet Protocol Address，互联网中设备的唯一标识

域名

由于 IP 地址难于记忆，所以就产生了域名的概念，所谓域名就是平时上网所使用的网址。

虽然在地址栏中输入的是网址，但是最终还是会将域名转换为IP才能访问到指定的网站服务器， 互联网运营商（如移动）会将域名转化为IP，这也就是访问不到外网（如谷歌）的原因，应为运营商没有帮你转IP

各种不同翻墙机制的原理

端口

端口是计算机与外界通讯交流的出口，用来区分服务器提供的不同服务

默认端口号

通常我们遇到的URL都没有端口号是因为协议带有的默认端口号， 如上别的例子可以不写端口号，因为http的默认端口号就是20

http

20

https

443

ftp

21

URL

统一资源定位符，又叫URL（Uniform Resource Location），是专为标识 Internet 网上资源位置而设的一种编址方式。我们平时所说的网页地址指的即是URL。

开发过程中访问本机的域名/IP

域名

localhost

IP

127.0.0.1

HTTP 协议

简介

超文本传输协议HTTP（HyperText Transfer Protocol）

超文本

HyperText及超文本：不仅仅能表示文本信息，还能表示音视频、格式等等信息

HTTP规定了如何从网站服务器传输超文本到本地浏览器。它基于客户端服务器架构工作， 是客户端（用户）和服务器端（网站）请求和应答的标准。

报文

在 HTTP 请求和响应的过程中传递的数据块就叫报文， 包括要传送的数据和一些附加信息，并且要遵循规定好的格式。

表现数据

通过浏览器将数据表现出来

标记语言

HTML

概念

超文本标记语言（HyperText Markup Language）

基本结构

主要标记(标签)

一般标签(包含开始标签和结束标签)

语义标签

<h1~h2> 标题

字号越来越小

有加粗的效果

会自动换行

段落

有行高

自动换行

文本语义标签

（被强调的文本）emphasis

（重要的文本）

（被标记的/高亮显示的文本）

<cite> （作品的标题）

（定义与文本中其余部分不同的部分）

<q> 标签定义一个短的引用。

短语标签

如：<dfn> （一个定义项目）

：粗体

<a> 超链接

href属性

超文本引用（hypertext reference)：描述链接的地址

将正斜杠添加到子文件夹,如：href="https://www.runoob.com/html/"，html后加/

target 属性

定义被链接的文档在何处显示

常用的target属性值

_blank( 在新窗口中打开被链接文档。)

_self(默认。在相同的框架中打开被链接文档。)

锚点的定义

在herf属性中添加"锚点名"，后面的文档内容中添加属性id="锚点名"；如果无锚点名，只写"#"，有置顶的功能

<table> 表格

table常用的一些标签

<thead>

<th>

colspan(合并列)

rowspan(合并行)

<tbody>

<tr> table row

<td> table data

table常用的一些属性

border

cellspacing

cellpadding

<form>表单

空标签<input>

type属性一些常用的值

text：默认单行文本

password

radio：单选

checkbox：复选框

date：日期

color：颜色

submit：表单提交按钮

reset：表单重置按钮

button：普通菜单

hidden：隐藏域

不显示在浏览器中，但只有写了name属性，就会提交

file：文件上传

搭配<form encype="mutipart/form-data" method="post">

<input>其他常用的属性

placeholder：提示性短语

readonly

required

disabled：禁用状态

<textarea>：多行文本

<select>：下拉菜单

属性

method：表单提交方式

get

表单默认提交方式，参数由name属性的值来提供

会携带参数的值，并显示在url中

post

会携带参数，但不显示在url中，比较安全

列表标记

<ul> unordered list

<ol> ordered list

<li> list item

<dl> definition list

<dt> definition term

<dd> definition description

无语义标签

<div>

division(block-level)

当前标记可设置宽高，默认宽度为视口的100%宽度

Specifies an inline text container，及行内容器，不可设置宽高

空标签

概念

(只包含属性,空元素,没有闭合标签)：在开始标签中进行关闭(以开始标签的结束而结束)

常用的空标签

HTML <!DOCTYPE> 声明

告知 Web 浏览器页面使用了哪种 HTML 版本。

br标签换行

<img> 导入图片

源属性(src)

图像的 URL 地址

Alt属性(alt)

为图像定义一串预备的可替换的文本(在浏览器无法载入图像时，替换文本属性 告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。)

height(高度) 与 width(宽度)属性

加载图片是需要时间的，建议：慎用图片。

作用：1. 定义文档与外部资源的关系；2. 链接样式表(最常用)。

rel属性：(relation)设置对象和连接资源间的关系

type属性：规定被链接文档/资源的 MIME(Multipurpose Internet Mail Extensions)类型

实例：<link rel="stylesheet" type="text/css" href="style_sheet_name.css">

属性

一般描述于开始标签

一些全局属性

class

为html元素定义一个或多个类名（classname）(类名从样式文件引入)

id

定义元素的唯一id

style

规定元素的行内样式（inline style）

title

描述了元素的额外信息 (作为工具条使用):鼠标悬浮时提示

字符实体

&entity_name; 或 &#entity_number;

常用的一些字符实体

空格 &nbsp; Non-breaking Space

大于 &gt; greater than

小于 &lt; less than

乘号&times;

CSS

由来

随着 HTML 的发展，HTML 增加了很多功能，代码也越来越臃肿，HTML 就变得越来越乱。网页也失去了语义化， 维护代码很艰难，因为代码很混乱于是装饰网页样式的 CSS诞生了。

概念

层叠样式表 (Cascading Style Sheets)：多个样式定义可层叠为一个，定义 如何显示 HTML 元素，实现了内容与表现的分离，极大提高了工作效率

语法

选择器{     声明 }

选择器(需要改变样式的 HTML 元素)

id选择器：#id_name

class选择器：.class_name

伪类(Pseudo-classes)选择器

selector:pseudo-class {property:value;}

标签(元素)选择器：tag_name

伪元素选择器

属性选择器

attribute 属性中包含 value　

~=

[attribute~=value] 属性中包含独立的单词为 value

*=

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行

attribute 属性以 value 开头

|=

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开

^=

[attribute^=value] 属性的前几个字母是 value 就可以

attribute 属性以 value 结尾

$=

[attribute$=value] 属性的后几个字母是 value 就可以

通配选择器：*

选择器的优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并 应用到该元素上的。优先级仅由选择器组成的匹配规则决定

详细见链接评论处

声明

每条声明由一个属性和一个值组成。属性（property）是希望设置的样式 属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

插入样式表

外部样式表(External style sheet)

内部样式表(Internal style sheet)

使用 <style> 标签在文档头部定义内部样式表

内联样式(Inline style)

在相关的标签内使用样式（style）属性，Style 属性可以包含任何 CSS 属性

多重样式优先级

一般情况下，优先级如下： （内联样式）Inline style > （内部样式）Internal style sheet > （外部样式）External style sheet > 浏览器默认样式

单位

绝对长度

px

像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器 上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

此像素非彼像素：CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系

cm

相对单位

脚本语言

简介

脚本语言（Script languages）是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言， 脚本语言又被称为扩建的语言，或者动态语言，脚本语言是解释行语言，不需要编译直接运行

脚本语言是读一行执行一行、而无需关注下一行的语言，非脚本语言则是必须读取整个源程序内容、建立完执行环境后执行的语言。

JS（JavaScript）

简介

给HTML网页加入动态功能

JQuery

为简化JS冗余代码的框架。

方便创作

各种前端框架

Layui

Bootstrap

ECharts

涵盖各行业图表，满足各种需求

总结

HTML 定义了网页的内容

CSS 描述了网页的布局

JavaScript 网页的行为

JQuery：为了简化JS冗余代码而生

方便创作：如果不是追求创新，使用独特新颖的网页界面，网上有很多模板：前端框架（前面只列出了当前比较流行的框架）

储充/传输数据

标记语言

简介

ML（Makeup Language），将文本以及文本相关的其他信息结合起来， 展现出关于文档结构和数据处理细节的计算机文字编码

例子

在记事本中输入“带你出师、闯荡江湖！”，并设置相应的格式，但是在其它电脑上打开并没有显示同样的格式， 说明其不包含任何格式信息。查看文件大小显示20字节； 在word中输入同样的内容，同时设置格式，在另一个电脑上看到的是同样的内容和同样的格式， 同时查看文件的大小为12kb，好家伙，一下大了600多倍 说明word文档中除了存储内容，还存储了格式等信息（document.xml,）ml就是标记语言（Markup Language）的缩写

XML（可扩展标记语言）

简介

“当 XML（扩展标记语言）于 1998 年 2 月被引入软件工业界时，它给整个行业带来了一场风暴。有史以来第一次，这个世界拥有了一种用来结构化文档和数据的通用且适应性强的格式，它不仅仅可以用于 WEB，而且可以被用于任何地方。” ---《Designing With Web Standards Second Edition》, Jeffrey Zeldman

XML被设计用来结构化、存储以及传输信息。

例

<note>     <to>George</to>     <from>John</from>     <heading>Reminder</heading>     <body>Don't forget the meeting!</body> </note>

详细介绍

<ul><li>XML 指可扩展标记语言（EXtensible Markup Language）</li><li>XML 是一种标记语言，很类似 HTML</li><li>XML 的设计宗旨是传输数据，而非显示数据</li><li>XML 标签没有被预定义。您需要自行定义标签。</li><li>XML 被设计为具有自我描述性。</li><li>XML 是 W3C 的推荐标准</li></ul>

XML 仅仅是纯文本

XML 没什么特别的。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理 XML。 不过，能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。

XML 无所不在

当我们看到 XML 标准突飞猛进的开发进度，以及大批的软件开发商采用这个标准的日新月异的速度时，真的是不禁感叹这真是令人叹为观止。 目前，XML 在 Web 中起到的作用不会亚于一直作为 Web 基石的 HTML。 XML 是各种应用程序之间进行数据传输的最常用的工具，并且在信息存储和描述领域变得越来越流行。

用途

XML 应用于 web 开发的许多方面，常用于简化数据的存储和共享。

XML 把数据从 HTML 分离

如果你需要在 HTML 文档中显示动态数据，那么每当数据改变时将花费大量的时间来编辑 HTML。 通过 XML，数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示，并确保修改底层数据不再需要对 HTML 进行任何的改变。 通过使用几行 JavaScript，你就可以读取一个外部 XML 文件，然后更新 HTML 中的数据内容。

XML 简化数据共享

XML 简化数据传输

XML 简化平台的变更

XML 使您的数据更有用

XML 用于创建新的 Internet 语言

DTD

简介

文档类型定义（DTD：Document Type Definition）可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。 DTD 可被成行地声明于 XML 文档中，也可作为一个外部引用

XSD

简介

XML Schema Definition，DTD的替代者

非标记语言

YML

简介

YAML （YAML  Ain't a Markup Language）不是一种标记语言，通常以.yml为后缀的文件，是一种直观的能够被电脑识别的数据序列化格式，并且容易被人类阅读，容易和脚本语言交互的，可以被支持YAML库的不同的编程语言程序导入，一种专门用来写配置文件的语言。可用于如： Java，C/C++, Ruby, Python, Perl, C#, PHP等。

语法

k: v 表示键值对关系，冒号后面必须有一个空格

使用空格的缩进表示层级关系，空格数目不重要，只要是左对齐的一列数据，都是同一个层级的

大小写敏感

缩进时不允许使用Tab键，只允许使用空格

松散表示，java中对于驼峰命名法，可用原名或使用-代替驼峰， 如java中的lastName属性,在yml中使用lastName或 last-name都可正确映射

键值关系

普通值(字面量)

字符串默认不用加上单引号或者双引号

单引号：不会转义字符串里面的特殊字符

双引号：会转义特殊字符

name1: zhangsan name2: 'zhangsan \n lisi' name3: "zhangsan \n lisi" age: 18 flag: true

日期

date: 2019/01/01

对象(属性和值)、Map(键值对)

分行写法

people:     name: zhangsan     age: 20

行内写法

people: {name: zhangsan,age: 20}

数组、list、set

分行写法

用- 来表示数组中的一个元素

pets:     - dog     - pig     - cat

行内写法

pets: [dog,pig,cat]

对象数组、对象list、对象set

peoples:     - name: zhangsan       age: 22     - name: lisi       age: 20     - {name: wangwu,age: 18}

文档块

对于测试环境，预生产环境，生产环境可以使用不同的配置，如果只想写到一个文件中，yml与是支持的，每个块用---隔开

JSON

简介

JS Object Notation(JavaScript 对象表示法)，和YML类似

Servlet

简介

sun公司制订的一种用于扩展web 服务器功能的组件规范，Servlet 为创建基于 web 的应用程序提供了基于组件、独立于平台的方法

Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。

前面这么多其实就是：Servlet中可以写HTML然后放到客户端（浏览器），客户端想要一个数据可以通过Servlet获取， 如果只是改变一个数据，Servlet也是直接将HTML网页传入客户端，就导致客户端重新刷新，于是AJAX技术诞生了

Servlet生命周期

init()

执行必需的初始化

getServletConfig()

service(ServletRequest req, ServletResponse res)

getServletInfo()

destroy()

配置Servlet

在WEB-INF/web.xml里创建以下条目

<web-app>     <servlet>         <servlet-name>HelloWorld</servlet-name>         <servlet-class>HelloWorld</servlet-class>     </servlet>     <servlet-mapping>         <servlet-name>HelloWorld</servlet-name>         <url-pattern>/HelloWorld</url-pattern>     </servlet-mapping> </web-app>

在servlet3.0以后，我们可以不用再web.xml里面配置servlet，只需要加上@WebServlet注解就可以修改该servlet的属性了。

表单数据

GET 方法

GET 方法向页面请求发送已编码的用户信息。页面和已编码的信息中间用 ? 字符分隔，如下所示： http://www.test.com/hello?key1=value1&key2=value2

GET 方法是默认的从浏览器向 Web 服务器传递信息的方法，它会产生一个很长的字符串，出现在浏览器的地址栏中。如果您要向服务器传递的是密码或其他的敏感信息，请不要使用 GET 方法。GET 方法有大小限制：请求字符串中最多只能有 1024 个字符。 这些信息使用 QUERY_STRING 头传递，并可以通过 QUERY_STRING 环境变量访问，Servlet 使用 doGet() 方法处理这种类型的请求。

POST 方法

另一个向后台程序传递信息的比较可靠的方法是 POST 方法。POST 方法打包信息的方式与 GET 方法基本相同，但是 POST 方法不是把信息作为 URL 中 ? 字符后的文本字符串进行发送，而是把这些信息作为一个单独的消息。消息以标准输出的形式传到后台程序，您可以解析和使用这些标准输出。Servlet 使用 doPost() 方法处理这种类型的请求。

使用 Servlet 读取表单数据

Servlet 处理表单数据，这些数据会根据不同的情况使用不同的方法自动解析： <ul><li>getParameter()：您可以调用 request.getParameter() 方法来获取表单参数的值。</li><li>getParameterValues()：如果参数出现一次以上，则调用该方法，并返回多个值，例如复选框。</li><li>getParameterNames()：如果您想要得到当前请求中的所有参数的完整列表，则调用该方法。</li></ul>

AJAX

AJAX：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一个不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容的技术

JSP

简介

Java Server Pages，为简化Servlet诞生，在Servlet中写HTML很不方便，于是JSP诞生了， 在Servlet中是：Java中有HTML，JSP是HTML中有Java； 最后运行时Servlet容器会先把JSP转化为Serclet，也就是说JSP本质还是Servlet。

语法

使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束

JSTL

（JSP Standarded Tag Library），即JSP标准标签库，是由JCP（Java community Proces）所制定的标准规范，它主要提供给Java Web开发人员一个标准通用的标签库，并由Apache的Jakarta小组来维护。开发人员可以利用这些标签取代JSP页面上的Java代码，从而提高程序的可读性，降低程序的维护难度。

运行Web应用

方法一：在IDE工具中配置Web应用服务器

方法二：在pom.xml文件中配置Web应用服务器插件（推荐）

web.xml

存放位置

web.xml文件放在WEB-INF的根目录下

web.xml的加载过程

1. 启动一个web项目，web容器（如tomcat）先读取web.xml文件，读取其中的配置信息

2. 容器创建一个servlet上下文（servletContext），这个web项目所有部分共享这个上下文

3. 容器将<context-param>转换为键值对，交给servletContext

4. 容器创建<listener>中的监听器实例

5. 触发contextInitialized方法，listener被调用（当Servlet 容器启动或终止Web 应用时，会触发ServletContextEvent 事件，该事件由 ServletContextListener 来处理。在ServletContextListener 接口中定义了处理ServletContextEvent 事件的两个方法 contextInitialized、contextDestroyed，web.xml有contextLoaderListener监听器，spring等框架实现了本监听器的接口方法）

6. 调用完contextInitialized方法后，容器再对filter初始化

7. 容器对web.xml中的指定load-on-startup的值为正数Servlet初始化（优先级1,2,3...->递减），负数或不指定则在该Servlet调用时初始化， springMVC的初始化为此阶段

ServletContext -> context-param（无顺序）-> listener（无顺序）-> filter（书写顺序） -> servlet（load-on-startup优先级）

初学者容易困惑的关系

Servlet和Servlet容器的关系

Servlet是用于扩展web 服务器功能的组件规范（及Servlet-api中的接口，抽象类等制定的规范，它就是JavaSE的一个扩展包），因为只是规范所以必须有一个容器来实现，也正是由于容器使得无需建立main函数，new对象，调方法也可以运行Java代码；

Servlet和Java的关系

Servlet是一个三方包（jsp-api），也就是说其实是Java里的一些类，只是因为不在JavaSE中所以使用时需要导包

Servlet和JSP的关系

为了解决Servlet的开发效率低下,不方便开发人员开发，JSP诞生了，JSP经编译后就变成了Servlet，JSP本质就是Servlet，jvm只能识别java的类，不能识别jsp代码，web容器将jsp的代码编译成jvm能够识别的java类（其实就是Servelt接口的实现类）；

常用的servlet容器

Jetty