WEB基础

WEB基础

WEB是什么

web是互联网的总称，全称为World Wide Web，缩写WWW ，即全球广域网，也称为万维网，它是一个可以自由访问的数字空间，通过超链接相互连接的文件和其他资源可以在互联网中访问。
WWW 采用的是客户/服务器结构，用来整理和储存各种资源，把客户所需的资源传送到 Windows、UNIX 或 Linux 等平台上。

万维网的重要性毋庸置疑。如今我们过着丰富多彩的网络生活，要感谢一个人,他在 32 年前「发明」了万维网。他就是伟大的蒂姆伯纳斯李爵士。

---

互联网之父

万维网的重要性毋庸置疑。如今我们过着丰富多彩的网络生活，要感谢一个人,他在 32 年前「发明」了万维网。他就是伟大的蒂姆伯纳斯李爵士。

蒂姆·伯纳斯·李（Tim Berners-Lee）爵士（1955年出生于英国）
是万维网的发明者，互联网之父，“千年技术奖”首位获奖者，
2016年度图灵奖获得者…
他是关注万维网发展的万维网联盟的创始人，
并获得世界多国授予的各个荣誉。
他最杰出的成就，是免费把万维网的构想推广到全世界，
让万维网科技获得迅速的发展，深深改变了人类的生活面貌。

发明web的初衷是因为李爵士在欧洲研究中心工作时，经常要与全世界各地的科学家们沟通联系，和他们交换、分析数不清的报告和数据，经常不得不重复回答一些问题，繁琐的过程实在令人烦恼，他希望能够有一种工具，让大家能够不管身处何地，都能够简单快捷地访问其他人的数据。

于是在1989 年，他发明了万维网，1991 年，他做出第一个图形界面网页浏览器；1994 年，他确定了超链接的标准。
互联网经济也是后来的故事。比如说：
1995 年，年轻的贝索斯在万维网上做了一个书店，同一年，英语教师马云做了一个“中国黄页”网站。现在，前者的亚马逊市值已经 17500亿美元，后者的阿里巴巴市值已经 4500 亿美元。
照理说李爵士发明了www，他的财富应该可以和比尔盖茨一决雌雄，但是为了互联网的普及，他没有为www申请专利，而是无偿地向全世界开放，让互联网走进千家万户。
李爵士是开放精神的坚定拥护者，他没有收取版税和许可费创办了一个制定网络标准的非赢利组织----万维网联盟（W3C），去推动万维网在全世界各地的发展。
2012年伦敦奥运上开幕式上有一个“感谢蒂姆”的环节，伯纳斯·李爵士坐在他熟悉的“电脑”前，用一句“This is for everyone”完美诠释了他将万维网无私贡献给世界人民的初衷——他的发明，是献给生活在地球上每一个人的。他是英国人的骄傲，并在那一刻接受到了来自全世界的感谢。

---

WEB常见概念

HTTP：超文本传输协议（HyperText Transfer Protocol）
通过浏览器和服务器进行数据交互，进行超文本（文本、图片、视频等）传输的规定。

HTTP协议：Hyper Text Transfer Protocol（超文本传输协议）的缩写,它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

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

请求行分为三个部分：请求方法、请求地址URL和HTTP协议版本，它们之间用空格分割。

http请求方法：根据HTTP标准，HTTP请求可以使用多种请求方法。
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

请求地址URL：统一资源定位符


请求行的第二部分是请求地址url，译成中文即“统一资源定位符”。就像每家每户都有一个门牌地址一样，每个网页也都有一个互联网地址。这是一个完整的url，我们来逐个看一下
http为协议头，协议头用来指定使用的传输协议，用于告诉浏览器如何处理将要打开的文件。不同的协议表示不同的资源查找以及传输方式。
其他常用协议还有

域名：www.example.com为域名,标明了需要请求的服务器的地址.
域名要先转换为ip地址，才可以访问服务器

端口：
:80是端口号,标明了获取服务器资源的入口
一台拥有IP地址的服务器可以提供许多服务，比如Web服务、FTP服务、SMTP服务等.服务器的资源通过“IP地址+端口号”来区分不同的服务.
如果把服务器比作房子,端口号可以看做是通向不同服务的门
文件路径：表示服务器上资源的路径,过去这样的路径标记的是服务器上文件的物理路径,但是现在,路径表示的只是一个抽象地址,并不指代任何物理地址

参数：请求里提供的额外参数.这些参数是以键值对的形式,通过&符号分隔开来,前面提到的http方法中的get就是在url中传参给服务器。

信息片段：指资源的 URL 会指向整个文本文档，但是我们可以根据片段来显示我们感兴趣的章节，片段表示一小片或一部分资源的名字，用 # 与其他组件隔开

服务器处理请求后会返回HTTP响应报文
响应状态行由三部分组成：服务器HTTP协议版本，响应状态码，状态码的文本描述

HTTP状态码
访问网页时有时会遇到404页面,404就是http的响应状态码。

服务器向我们返回状态码，就是告诉我们服务器目前响应的状态。通过它，我们就可以知道当前请求是成功了还是出现了什么其他问题。

1xx 类状态码属于提示信息，是协议处理中的一种中间状态，实际用到的比较少。
2xx 类状态码表示服务器成功处理了客户端的请求，也是我们最愿意看到的状态。
「200 OK」是最常见的成功状态码，表示一切正常。
「204 No Content」也是常见的成功状态码，与 200 OK 基本相同，但响应头没有 body 数据。
「206 Partial Content」是应用于 HTTP 分块下载或断电续传，表示响应返回的 body 数据并不是资源的全部，而是其中的一部分，也是服务器处理成功的状态。
3xx 类状态码表示客户端请求的资源发送了变动，需要客户端用新的 URL 重新发送请求获取资源，也就是重定向。
「301 Moved Permanently」表示永久重定向，说明请求的资源已经不存在了，需改用新的 URL 再次访问。
「302 Found」表示临时重定向，说明请求的资源还在，但暂时需要用另一个 URL 来访问。
301 和 302 都会在响应头里使用字段 Location，指明后续要跳转的 URL，浏览器会自动重定向新的 URL。
「304 Not Modified」不具有跳转的含义，表示资源未修改，重定向已存在的缓冲文件，也称缓存重定向，用于缓存控制。
4xx 类状态码表示客户端发送的报文有误，服务器无法处理，也就是错误码的含义。
「400 Bad Request」表示客户端请求的报文有错误，但只是个笼统的错误。
「403 Forbidden」表示服务器禁止访问资源，并不是客户端的请求出错。
「404 Not Found」表示请求的资源在服务器上不存在或未找到，所以无法提供给客户端。
5xx 类状态码表示客户端请求报文正确，但是服务器处理时内部发生了错误，属于服务器端的错误码。
「500 Internal Server Error」与 400 类型，是个笼统通用的错误码，服务器发生了什么错误，我们并不知道。
「501 Not Implemented」表示客户端请求的功能还不支持，类似“即将开业，敬请期待”的意思。
「502 Bad Gateway」通常是服务器作为网关或代理时返回的错误码，表示服务器自身工作正常，访问后端服务器发生了错误。
「503 Service Unavailable」表示服务器当前很忙，暂时无法响应客户端，类似“网络服务正忙，请稍后重试”的意思。

---

WEB工作流程

这个工作流程可以看做去吃饭时点餐的流程，web浏览器就是服务员，而服务端就是厨房。你给服务员说你要点什么菜，然后服务员将你点的菜端上来，其实web服务器就相当于厨师，有着各种各样的技能，根据你的成菜要求，为你进行服务，数据库在这里可以认为是个菜窖，需要什么菜去拿什么菜。

Dns解析过程
当我们在浏览器中输入url后，浏览器通过DNS服务器进行域名解析，查找域名的IP地址
打开浏览器，输入一个域名。比如输入www.163.com，这时，你使用的电脑会发出一个DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。
查询www.163.com的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果。如果没有，本地DNS服务器还要向DNS根服务器进行查询。
根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。
本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。
最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

【域名代替ip地址的好处：
1、域名的形式易记忆，比数字的IP地址有更多的选择。
2、一个域名还可以和多个IP建立关系，多线路或多服务器IP时可以进行一对多绑定。
3、服务器IP地址改变时，直接更改域名解析即可，无需告诉访问用户新的IP地址。】

拿到服务器ip地址之后，浏览器与目标服务器建立TCP连接（3次握手）
【第一次握手：客户端向服务器端发送请求（SYN=1） 等待服务器确认；
第二次握手：服务器收到请求并确认，回复一个指令（SYN=1，ACK=1）；
第三次握手：客户端收到服务器的回复指令并返回确认（ACK=1）。】

三次握手连接成功后，浏览器通过http协议发送请求，服务器端响应http请求
释放TCP连接 浏览器解析html代码，对页面进行渲染呈现给用户

三次握手：

四次挥手

为什么“握手”是三次，“挥手”却要四次？
TCP建立连接时之所以只需要"三次握手"，是因为在第二次"握手"过程中，服务器端发送给客户端的TCP报文是以SYN与ACK作为标志位的。SYN是请求连接标志，表示服务器端同意建立连接；ACK是确认报文，表示告诉客户端，服务器端收到了它的请求报文。
即SYN建立连接报文与ACK确认接收报文是在同一次"握手"当中传输的，所以"三次握手"不多也不少，正好让双方明确彼此信息互通。
TCP释放连接时之所以需要“四次挥手”,是因为FIN释放连接报文与ACK确认接收报文是分别由第二次和第三次"握手"传输的。为何建立连接时一起传输，释放连接时却要分开传输？
建立连接时，被动方服务器端结束CLOSED阶段进入“握手”阶段并不需要任何准备，可以直接返回SYN和ACK报文，开始建立连接。
释放连接时，被动方服务器，突然收到主动方客户端释放连接的请求时并不能立即释放连接，因为还有必要的数据需要处理，所以服务器先返回ACK确认收到报文，经过CLOSE-WAIT阶段准备好释放连接之后，才能返回FIN释放连接报文。
所以是“三次握手”，“四次挥手”

总结过来就是DNS域名解析拿到对应的ip地址，服务器端和客户端的三次握手建立数据传输通道，四次挥手关闭数据传输通道，客户端根据自己拿到的数据开始渲染页面。

---

WEB开发

web开发分为前端开发和后端开发。
前端开发是创建Web页面或app等前端界面呈现给用户的过程，来实现产品的用户界面交互。
根据 W3C 标准,一个网页主要由三部分组成:结构(HTML)、表现(CSS)和行为 (Javascript)

一个形象的比喻：
HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，再加上javascript， 这个植物人就可以对外界刺激做出反应，可以思考、运动、化妆等，成为一个活生生的人。

html

html也就是超文本标记语言，顾名思义，它超越了普通文本。它能够描述文字，图形，动画，声音，表格，链接等，独立于各种操作系统。
一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。正是它们构成了HTML的骨架结构。
第一行是文档声明，文档声明必须是HTML文档的第一行。

右边的HTML的文档声明很长而且复杂，但左边HTML5的文档声明相对来说更为简便。
很多人误以为HTML5（以下简称h5）是指用HTML5+CSS3+Javascript实现的综合网页效果，
但实际上H5仅仅是一套新的HTML标准，是对HTML及XHTML的继承与发展。本质上并不是什么新的技术，只是在功能特性上有了极大的丰富。简单来说就是升级为功能丰富的一个版本。
H5除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket、本地存储等。这些新增的技术都是使用JavaScript来操作的。

从新增的标签上来看，H5有以下几个特点。
除文档声明的化繁为简之外，标签不再区分大小写
这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。
允许属性值不加引号
这种写法也是完全符合H5规范的。但是在实际开发中，建议标签所有属性值都加引号，单引号或双引号都可以。
允许部分属性的属性值省略

H5增加了很多元素，比如用于媒介播放的 video 和 audio 元素
以往在网页上插入视频或音频要通过插件，比如flash来实现的，但HTML5 使这件事情变简单了，只需要一行代码就能实现。

css

随着HTML的成长，为了满足设计者的要求，HTML添加了很多显示功能，它变的越来越杂乱，并且页面也越来越臃肿。于是CSS便诞生了。
俗话说得好，没有不漂亮的女人，只有不会打扮的女人。
没有不好看的网页，只有不会CSS的前端。
CSS于1996年由W3C组织制定，最新的版本为CSS3，主要用于美化网页。如果需要修改HTML中的部分显示风格，只要修改对应的CSS文件即可，极大地提高了工作效率。
Css的核心就是盒子模型
盒模型可以分为两种：标准盒子模型与IE盒模型，IE盒模型只出现在IE5.5以及更早版本，所以
今天我们只讲标准盒模型

它包括：
内容（content），内边距(padding用于控制内容与边框之间的距离)，边框(border)，和外边距(margin用于控制元素与元素之间的距离)

简单来说，它可以看成是一片太阳吐司…
任何html元素都可以看做一个盒子，它占据一定的页面空间
理解了盒子模型和其中每个元素的用法，才能熟练使用css的定位方法和技巧,对网页布局、字体、颜色和其它文图效果实现更加精确的控制。
有了html+css的网页还只是静态网页，现在我们需要js实现页面动态效果。

javascript

JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有相对安全性的客户端脚本语言。常用来给HTML网页添加动态功能，比如响应用户的各种操作。
1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。
由于网景公司希望能在静态HTML页面上添加一些动态效果，于是布兰登花了十天的时间设计出了javascript语言。

为什么叫javascript，由于当时Java语言特别火，所以为了蹭热点借java的名气帮助推广。
经常有人问java和javascript是什么关系，他们俩就像张三和张三丰，雷锋和雷峰塔一样没有半毛钱关系。

JavaScript主要由三部分组成：ECMAScript、DOM（文档对象模型）以及BOM（浏览器对象模型）。ECMAScript是JavaScript的核心，它描述了该语言的语法和基本对象，包括语法类型、语句、关键字、保留字、运算符、对象。

DOM将整个页面规划成由节点层级构成的文档，通过DOM可访问JavaScript HTML文档的所有元素。DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点（getElementById、childNodes、appendChild、 innerHTML）。
浏览器对象模型（BOM）对浏览器窗口进行访问和操作。它使JavaScript有能力与浏览器进行交互。
例如：弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。

Js的代码可使用任何文本编辑器编写，易于学习和执行，有界面效果，它基于对象并且是弱类型语言，变量只需要用var来声明。
比如c中需要定义变量如图，而JavaScript中，只用定义一个变量：var a;

再来了解一下ajax，ajax是js的一个应用

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，能实现网页的局部刷新。
传统的静态网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
但是使用AJAX 可以使网页实现异步更新，在后台与服务器进行少量数据交换。这意味着在不重新加载整个网页的情况下，对网页的某部分进行更新。
它的工作流程是这样：
1.网页中发生一个事件（如页面加载、按钮点击）
2.由 JavaScript 创建 XMLHttpRequest 对象
3.XMLHttpRequest 对象向 web 服务器发送请求
4.服务器处理该请求
5.服务器将响应发送回网页
6.由 JavaScript 读取响应
7.由 JavaScript 执行正确的动作（比如更新页面）

ajax有一些应用场景，比如，当我们在百度搜索框搜文字时，输入框下面的智能提示

刚才的例子可以看出，将数据传送到后端后，后端需要读取数据更改数据并存入数据库更新数据，简单来说，后端需要做这些工作

1. 编写逻辑业务关系代码
2. 数据的读取和存储以及操作
3. 确保服务器端代码是安全的，没有漏洞
4. 确保服务器端代码优化到足以处理大量流量
5. 在线部署代码

后端语言

后端处理数据的语言数不胜数。我们可以看到这是一群风格不同各有千秋的后端女孩子
她们各有各的特点
ruby 开发速度快，使用者多，开发控件非常丰富
C 简洁紧凑、灵活方便，数据类型丰富，可移植性好
Java 性能好，适合大中项目，跨平台，安全性高，稳定可靠
Php 灵活，上手快，易修改，发布快捷，环境好部署
python简单易学，开发快，语言简洁，易于维护，可移植可扩展等等。
语言只是工具，不同的语言有不同特点，针对的场景也不同，我们应该合理选择，使他们发挥最大价值

数据库

要对数据进行处理更新删除等就需要用到数据库
数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。
在诸多数据库中，最常见的是关系型数据库和非关系型数据库。今天讲的是关系型数据库
关系型数据库有MySQL、Oracle、SQL Server等等，其中最常见的是MySQL。

关系型数据库，是一种基于实体联系模型的数据库。世间万物都是通过实体与属性、实体与实体之间的关系折射出的关系模型。关系型数据库定义的就是实体与属性的集合。
比如一个人是一个实体，一辆车、一栋房子都可以表达成一个实体。

实体是一系列属性的集合，人作为一个实体有姓名、年龄、性别等基本属性，人还可以有职业、爱好等附加属性，这些属性的集合构成人这个实体。
与此同时，一个属性也可以单独成为一个实体。
例如，性别就可以成为一个单独的实体，这个实体里的属性包括两种，男和女。人这个实体和性别这个实体之间存在一个关系，一个人只能有一种性别，所以人和性别这两个实体之间的关系是一对一的。

职业也可以构成一个实体，职业的属性包括医生、警察、工程师等很多种，人作为实体与职业这个实体的关系是一对多的，也就是说一个人可以拥有多个职业，是老师的同时也可能是画家。

关系模型本质上就是若干个存储数据的二维表，可以把它们看作很多Excel表。
和Excel表有所不同的是，关系数据库的表和表之间需要建立“一对一”，“一对多”和“多对一”的关系，这样才能够按照应用程序的逻辑来组织和存储数据。
比如：用户表中的姓名和身份证，他们是一对一的关系，一个用户有多个职业则是一对多的关系，
一个用户有多个职业，一个职业又可以匹配多个用户，这时候产生了多对多的关系，就需要一张中间表来转换。

事务

事务主要用于处理操作量大，复杂度高的数据。比如说，在人员管理系统中，你删除一个人员，你既需要删除人员的基本资料，也要删除和该人员相关的信息，如信箱，文章等等，这样，这些数据库操作语句就构成一个事务！
事务就是一组严密的逻辑操作，所有操作必须全部执行成功，否则将会撤销所有操作。
一般来说，事务必须满足4个特性（ACID）
原子性 事务是一个不可分割的工作单位，事务中的操作 要么都发生，要么都不发生
一致性则是，在一系列数据库行为的前后两个时间点上，数据的完整性必须保持一致。
举个例子，我银行账户有200块，小明银行账户为0，如果我把200块钱一次性
转到小明账户后，最终我的账户为0，小明的账户为200，总额不变，不会出现我的账户扣了200后小明的账户没有+200的情况，否则就不是一致性了。
隔离性是指多个用户并发访问数据库时，每一个用户开启的事务，相互隔离，不被其他事务的操作所干扰。
假设有两个事务，分别是事务1和事务2 ，那么两个事务不能相互影响 ，也就是说，要么事务1在开始之前，事务2已经结束了，要么事务1在结束之前事务2还没开始。
持久性，事务一旦被提交，它对数据库的改变是持久性的。
对表做增删改操作，并提交事务后，增删改操作的结果将存在表中，只要不被其他事务做增删改操作，那么改变后的表数据将保持不变。