文章目录
一、Web基础知识详解
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。1960年美国人Ted Nelson构思了一种通过计算机处理文本信息的方法，并称之为超文本（hypertext）,这成为了HTTP超文本传输协议标准架构的发展根基。
1.1 HTML
http://www.w3school.com.cn
HyperText Markup Language
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言(markup language)
HTML 标签通常是成对出现的，比如<b> 和</b>
1.1.1 标签
| 标签 | 描述 |
|---|---|
<!DOCTYPE> | 定义文档类型。 |
<html> | 定义 HTML 文档。 |
<title> | 定义文档的标题。 |
<body> | 定义文档的主体。 |
<h1>to<h6> | 定义 HTML 标题。 |
<p> | 定义段落。 |
<br> | 定义简单的折行。 |
<hr> | 定义水平线。 |
<!--...--> | 定义注释。 |
1.1.2 HTML 属性
属性总是以名称/值对的形式出现，比如：name=“value”
属性总是在 HTML 元素的开始标签中规定。
例
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 属性：https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
1.1.3 HTML 引用
HTML <q>元素定义短的引用。
浏览器通常会为 <q>元素包围引号。
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
HTML<abbr>元素定义缩写或首字母缩略语。
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<dfn>定义项目或缩略词的定义。
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
我觉得<abbr>和<dfn>结合会好一点
<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>
效果
1.1.4 HTML 计算机代码元素
| 标签 | 描述 |
|---|---|
<code> | 定义计算机代码文本 |
<kbd> | 定义键盘文本 |
<samp> | 定义计算机代码示例 |
<var> | 定义变量 |
<pre> | 定义预格式化文本 |
<code> 元素不保留多余的空格和折行：
例子
<p>Coding Example:</p>
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
用<pre> 元素中包围代码：
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
效果
1.1.5 HTML 表格与列表
表格由<table> 标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由 <td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
例
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
无序列表
无序列表始于 <ul>标签。每个列表项始于<li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
有序列表始于<ol>标签。每个列表项始于 <li>标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1.1.6 HTML5 语义元素
| 元素 | 描述 |
|---|---|
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
1.1.7 HTML 响应式 Web 设计
- RWD 指的是响应式 Web 设计（Responsive Web Design）
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
垂直框架
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
水平框架
<frameset row="25%,50%,25%">
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
内联框架
<iframe src="URL"></iframe>
1.1.8 HTML 脚本
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”：
<script type="text/javascript">
document.write("Hello World!")
</script>
1.1.9 HTML 颜色
| 颜色 | Color HEX | Color RGB |
|---|---|---|
| 黑色 | #000000 | rgb(0,0,0) |
| 红色 | #FF0000 | rgb(255,0,0) |
| 绿色 | #00FF00 | rgb(0,255,0) |
| 蓝色 | #0000FF | rgb(0,0,255) |
| 黄色 | #FFFF00 | rgb(255,255,0) |
| 浅蓝色 | #00FFFF | rgb(0,255,255) |
| 紫色 | #FF00FF | rgb(255,0,255) |
| 灰色 | #C0C0C0 | rgb(192,192,192) |
| 白色 | #FFFFFF | rgb(255,255,255) |
1.1.10 HTML表单
<input>元素是最重要的表单元素。
<input>元素有很多形态，根据不同的 type 属性。
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
例子
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
1.2 http版本
主流版本1.1
1.2.1 HTTP/0.9
已过时。只接受 GET 一种请求方法，没有在通讯中指定版本号，且不支持请求头。由于该版本不支持 POST 方法，所以客户端无法向服务器传递太多信息。
仅能请求访问HTML格式的资源。
1.2.2 HTTP/1.0
这是第一个在通讯中指定版本号的HTTP 协议版本，特别是在代理服务器中。
变化：
请求行必须在尾部添加协议版本字段（http/1.0）；必须包含头消息 ；
增加了请求方式POST和HEAD；
多格式：MIME多用途互联网邮件扩展；
支持cache；
不支持keepalive，所以用了非标准：Connection: keep-alive；
1.2.3 HTTP/1.1
当前主流版本。持久连接被默认采用，并能很好地配合代理服务器工作。还支持以管道方式同时发送多个请求，以便降低线路负载，提高传输速度。
变化：
引入了持久连接（persistent connection），一个TCP连接可以允许多个HTTP请求；
加入了管道机制，同一个TCP连接里，允许多个请求同时发送，增加了并发性，进一步改善了HTTP协议的效率；
请求的头信息新增了Host字段
新增了请求方式PUT、PATCH、OPTIONS、DELETE等；
支持只发送header信息(不带任何body信息)
身份认证机制
支持文件断点续传
新增了24个错误状态响应码
1.2.4 1.1比1.0主要优化
1.缓存处理
2.带宽优化及网络连接的使用
3.错误通知的管理
4.消息在网络中的发送
5.互联网地址的维护
6.安全性及完整性
1.2.5 HTTP/2.0
HTTP2.0是SPDY（谷歌公司研发的https的一种协议）的升级版
变化：
HTTP请求和响应中，状态行和请求/响应头都是些信息字段，并没有真正的数据
将所有的信息字段建立一张表，为表中的每个字段建立索引，客户端和服务端共同使用这个表，他们之间就以索引号来表示信息字段
增加双工模式（不仅客户端能够同时发送多个请求，服务端也能同时处理多个请求，解决了队头堵塞的问题）
增加服务器推送的功能（不经请求服务端主动向客户端发送数据）
http各版本：https://blog.csdn.net/qq_22238021/article/details/81197157
1.2.6 面试题：http1.0和http1.1的区别
1.长连接
HTTP 1.1支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，弥补了HTTP1.0每次请求都要创建连接的缺点
2.缓存处理
在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略
3.带宽优化和网络连接的使用
HTTP1.0中，存在一些浪费带宽的现象，例如：客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），方便了开发者自由的选择以便于充分利用带宽和连接
4.错误通知的管理
在HTTP1.1中新增24个状态响应码，如
409（Conflict）表示请求的资源与资源当前状态冲突；.
410（Gone）表示服务器上的某个资源被永久性的删除
5.Host头处理
在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）
1.3 http报文结构
1.3.1 请求报文
1.结构
2.实例
3.请求方法
-
GET 客户端请求指定资源,服务端返回指定资源
-
PUT 通常用于向服务器发送请求，如果URI不存在，则要求服务器根据请求创建资源，如果存在，服务器就接受请求内容，并修改URI资源的原始版本。
-
POST 将客户端的数据提交到服务器
-
OPTION 请求服务器支持的方法
-
HEAD 只请求响应报文的头部信息
-
DELETE 请求服务器删除指定资源
4.常见的请求头部属性
-
Accept 请求报文可通过一个 Accept 报文头属性告诉服务端 客户端接受什么类型的响应。
-
Cookie 客户端的Cookie就是通过这个报文头属性传给服务端
-
Referer 表示这个请求是从哪个URL过来的，假如你通过baidu搜索出一个商家的广告页面，你对这个广告页面感兴趣，鼠标一点发送一个请求报文到商家的网站，这个请求报文的Referer报文头属性值就是 http://www.baidu.com。
-
Cache-Control 对缓存进行控制，如一个请求希望响应返回的内容在客户端要被缓存一年，或不希望被缓存就可以通过这个报文头达到目的。
-
其他属性参考 –HTTP标头字段列表： http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
其他属性
-
Connection 当前连接的控制选项以及逐跳请求字段列表，不得与HTTP / 2一起使用
-
Expect 指示客户端需要特定的服务器行为。
-
From 发出请求的用户的电子邮件地址
-
HTTP2-Settings 从HTTP / 1.1升级到HTTP / 2的请求
1.3.2 响应报文
1.结构
2.实例
3.响应状态码
1xx:信息响应类，表示接收到请求并且继续处理
- 100继续
- 101交换协议
- 102处理
- 103早期提示
2xx:处理成功响应类，表示动作被成功接收、理解和接受
- 200 OK
- 201 创建了新资源
- 202 接受
- 203 非权威信息
- 204 没有内容
- 205 重设内容
- 206 部分内容
- 207 多状态
- 208 已报告
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
- 300 多种选择
- 301 永久重定向（永久移动）
- 302 临时重定向 （临时移动）302已被303和307取代（不推荐）
- 303 查看其他 GET方法
- 304未修改
- 305 使用代理
- 306 切换代理
- 307 临时重定向
- 308 永久重定向
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
- 400 错误的要求
- 401 未经授权
- 402 需要付款
- 403 禁止
- 404 找不到
- 405 方法不允许
- 406 不可接受
- 407 代理身份验证
- 408 请求超时
- 409 冲突
- 410 不可用
5xx:服务端错误，服务器不能正确执行一个正确的请求
- 500 内部服务器错误
- 501 未实施
- 502 错误的网关
- 503 服务不可用
- 504 网关超时
- 505 不支持HTTP版本
HTTP状态代码列表：https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
4.响应头部属性
-
Cache-Control
响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
eg:Cache-Control: max-age=3600
-
Set-Cookie
服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的
-
其他响应头部属性
1.4 URL(Uniform Resource Locator)
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序
URL 也被称为网址
- URL结构
1.协议://[用户名:密码@]主机名.域名.顶级域名[[:端口号]/目录/文件名.文件后缀?参数=值#标志]
2.协议
http http://www.pl.com/index.html
https
ftp ftp://test:password@10.1.1.251
telnet
| Scheme | 访问 | 用于… |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
URL编码：
URL 只能使用 ASCII 字符集来通过因特网进行发送。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
1.5 MIME类型
（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化。浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理URL，因此Web服务器在响应头中添加正确的MIME类型非常重要。如果配置不正确，浏览器可能会曲解文件内容，网站将无法正常工作，并且下载的文件也会被错误处理。
- text/html html页面
- text/plain 纯文本文件
- text/css 层级样式表
- text/xml 标记语言
- image/gif gif图片
- image/jpeg jpg图片
- application/javascript js
- video/mp4 mp4
- video/x-flv flv
1.6 http事务
http事务：https://www.jianshu.com/p/c69c8c597ef5
1.6.1 域名解析
1.浏览器检查缓存； 有就结束，没有就下一步
2.浏览器检查操作系统缓存；/etc/hosts 有就结束，没有就下一步
3.请求网络配置中的DNS服务器； /etc/resolv.conf DNS服务器
4.Root Server域名服务器中解析；LDNS
5.根据域名服务器返回给本地域名服务器一个主域名服务器地址（gTLD）
6.本地域名服务器像gLTD发送请求。
7.gTLD服务器查询并返回此域名对应的NameServer域名服务器地址，这个NameServer服务器就是注册的域名服务器。
8.发送请求到NameServer，根据域名ip映射关系表，找到目标ip。
9.返回该域名对应的ip和ttl值，LDNS会缓存这个域名和ip的对应关系，缓存时间由TTL控制。
10.把解析结果返回用户，用户根据TTL值缓存在本地系统缓存，解析过程结束。
1.6.2 发起TCP的3次握手
不过多介绍
1.6.3 建立TCP连接后发起http请求
1.6.4 服务器端响应http请求，浏览器得到html代码
| 请求头名 | 描述 |
|---|---|
| Accept | 就是告诉服务器端，我接受那些任何类型 |
| Accept-Encoding | 这个看起来是接受那些压缩方式的文件 |
| Accept-Lanague | 告诉服务器能够发送哪些语言 |
| Connection | 告诉服务器支持keep-alive特性 |
| Cookie | 每次请求时都会携带上Cookie以方便服务器端识别是否是同一个客户端 |
| Host | 用来标识请求服务器上的那个虚拟主机，比如Nginx里面可以定义很多个虚拟主机，那这里就是用来标识要访问那个虚拟主机。 |
| User-Agent | 用户代理，一般情况是浏览器 |
1.6.5 浏览器解析html代码，并请求html代码中的资源
1.6.6 浏览器对页面进行渲染呈现给用户
1.7 静态资源
1.7.1 纯粹的html网页,不包含后台数据库及动态程序(php,jsp,asp等)
图片、视频、JS、CSS
1.7.2 静态网页url
www.pl.com/a.jpg
1.7.3 优缺点
1.优点
- 内容由客户端浏览器解析,服务端只需要将内容发送给客户端
- 不需要读写数据库,性能和效率很高
2.缺点
- 后端没有数据库支持,用户体验差,功能少
1.8 动态资源
包含动态程序(php,jsp,asp等),一般需要与后台数据库交互,可以实现比静态更多的功能,如用户注册,用户登录,论坛,排行榜等
1.9 网站流量度量术语
1.9.1 IP
internet protocol
指独立IP数。00:00-24:00内相同IP地址值被计算一次。
1.9.2 PV
即Page View, 即页面浏览量或点击量，用户每次刷新即被计算一次。
1.9.3 UV
即UniQue Visitor,访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。
1.9.4 并发量
同一时间点用户请求数
1.10 主流的web服务器介绍
1.10.1 apache
中小企业主流的web服务器
1.10.2 nginx
nginx,当今的主流,nginx的分支tengine也被大量使用,高并发,低内存开销
1.10.3 lighttpd
静态资源解析效率很高,不温不火的web服务器
1.10.4 IIS
微软下的web服务器
1.10.5 tomcat
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。对于一个初学者来说，可以这样认为，当在一台机器上配置好Apache 服务器，可利用它响应HTML（标准通用标记语言下的一个应用）页面的访问请求。实际上Tomcat是Apache 服务器的扩展，但运行时它是独立运行的，所以当你运行tomcat 时，它实际上作为一个与Apache 独立的进程单独运行的。
1.11 提供动态页面解析的服务
1.11.1 php
在apache中以模块形式存在(mod_php5.so)被apache加载
在nginx中以fastcgi守护进程来处理php解析工作
1.11.2 tomcat
解析Jsp应用
1.11.3 python
django
flask
解析python应用
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
