文章目录
一、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应用