Web基础与HTTP协议

52 阅读19分钟

HTML

HTML叫做超文本标记语言,是一种规范,也是一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。 HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML文件可以使用任何能够生成txt文件的文本编辑器来编辑,生成超文本标记语言文件,只用修改文件名后缀为“.html”或“.htm”即可。

HTML基本标签

HTML 语法规则

HTML标签采用双标记符的形式,前后标记符对应,分别表示标记开始和结束,标记符中间的内容被标签描述。前标记符由“< XXX>”表示,结尾标记符多了一个“/”,由“< /XXX>”表示。

HTML 文件结构

HTML文件最外层由< html> < /html>表示,说明该文件是用HTML语言描述的。在它里面是并列的头标签(< head>)和内容标签(< body>)。

头标签中常用标签

标签描述
< title>定义了文档的标题
< base>定义了页面链接标签的默认链接地址
< link>定义了一个文档和外部资源之间的关系
< meta>定义了HTML文档中的元数据
< script>定义了客户端的脚本文件
< style>定义了HTML文档的样式文件

内容标签中常用标签

标签描述
< table>定义一个表格
< tr>定义了表格中的一行
< td >定义了表格中某一行的一列
< img >定义了一个图像
< a >定义了一个超链接
< p >定义了一行
< br >定义了换行
< font >定义了字体

静态网页与动态网页

静态网页

在网站设计中,纯粹HTML格式的网页通常被称为“静态网页”,静态网页是标准的HTML文件,它的文件扩展名是.htm、.html。静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的。

静态网页也可以出现各种动态的效果,如.GIF格式的动画、FLASH、滚动字幕等。这些“动态效果”只是视觉上的,与下面将要介绍的动态网页是不同的概念。

静态网页只要不修改代码,是不会改变的,每天展示的内容是一样的。静态网页只使用html语言,不使用其他高级程序语言。

动态网页

所谓的动态网页,是指跟静态网页相对的一种网页编程技术。静态网页,随着HTML代码的生成,页面的内容和显示效果就基本上不会发生变化了——除非是修改页面代码。而动态网页则不然,页面代码虽然没有变,但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

动态网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见网页制作格式,而是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀,并且在动态网页网址中有一个标志性的符号——“?”。

动态网页是基本的html语法规范与Java、PHP、C#等高级程序设计语言、数据库编程等多种技术的融合,以期实现对网站内容和风格的高效、动态和交互式的管理。因此,从这个意义上来讲,凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

静态网页和动态网页之间如何区分

内容生成方式

  • 静态网页: 静态网页的内容在服务器上预先生成,当用户请求访问时,服务器直接将存储在服务器上的静态HTML文件发送给用户的浏览器。这意味着每个用户访问同一个静态网页时,看到的内容都是一样的,无论是谁访问。
  • 动态网页: 动态网页的内容是在用户请求时由服务器生成的。服务器使用后台的编程语言(如PHP、Python、Ruby等)和数据库等数据来动态地生成HTML内容。因此,不同用户访问同一动态网页可能会看到不同的内容,因为页面内容是根据用户请求和数据状态而变化的。

交互性

  • 静态网页: 静态网页通常缺乏交互性。它们的内容在用户访问时是固定的,不能根据用户的操作或输入做出实时的响应。
  • 动态网页: 动态网页可以具有更高的交互性。由于内容是在服务器端生成的,网页可以根据用户的操作、输入和其他因素动态地更新内容,例如在线购物网站的购物车功能或社交媒体的实时更新。

性能和扩展性

  • 静态网页: 静态网页通常加载速度较快,因为服务器只需提供静态HTML文件。然而,更新内容时需要手动编辑HTML文件。
  • 动态网页: 动态网页的加载速度可能相对较慢,因为服务器需要在用户请求时生成内容。但是,它们更灵活,可以通过后台代码轻松地更新内容,而无需手动编辑每个页面。

总之,静态网页适合展示不经常更改的内容,而动态网页更适合需要交互性和实时更新的场景,例如社交媒体、电子商务平台等。实际应用中,通常会结合两种方法,使用静态网页来展示稳定的内容,使用动态网页来实现交互和实时更新。

HTTP协议

HTTP(HyperText Transfer Protocol,超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础设计HTTP最初的目的是为了提供一种远距离共享知识的方式,借助多文档进行关联实现超文本,连成相互参阅的WWW(world wide web,万维网)

HTTP 已经演化出了很多版本,它们中的大部分都是向下兼容的:

  • HTTP/0.9:已过时。只接受 GET 一种请求方法,没有在通讯中指定版本号,且不支持请求头,无状态。由于该版本不支持 POST 方法,所以客户端无法向服务器传递太多信息。
  • HTTP/1.0:这是第一个在通讯中指定版本号的 HTTP 协议版本,至今仍被广泛采用,特别是在代理服务器中。
  • HTTP/1.1:引入了持久连接,即TCP连接默认不关闭,可以被多个请求复用,能很好地配合代理服务器工作。还支持管道方式机制,即在同一个TCP连接里面,客户端可以同时发送多个请求,以便降低线路负载,提高传输速度。
  • HTTP/2.0:完全多路复用,在一个连接里,客户端和浏览器都可以同时发送多个请求或回应,而且不用按照顺序一一对应。引入了头信息压缩机制,使用gzip或compress压缩后再发送。支持服务端推送,允许服务器未经请求,主动向客户端发送资源。

HTTP 方法

HTTP 支持几种不同的请求命令,这些命令被称为 HTTP 方法(HTTP method)。每条 HTTP 请求报文都包含一个方法, 告诉服务器要执行什么动作,包括:获取一个页面,运行一个网关程序,删除一个文件等。最常用的获取资源的方法是 GET、POST、PUT。

HTTP方法描述
GET对服务器资源获取的简单请求
PUT向服务器提交数据,以修改数据
POST用于发送包含用户提交数据的请求
DELETE删除服务器上的某些资源
HEAD请求页面的首部,获取资源的元信息
CONNECT用于ssl隧道的基于代理的请求
OPTIONS返回所有可用的方法,常用于跨域
TRACE追踪 请求--响应的传输路径

HTTP方法介绍

  • GET请求会向数据库发索取数据的请求,从而来获取信息,该请求不会产生副作用。无论进行多少次操作,结果都是一样的。
  • 与GET不同的是,PUT请求是向服务器端发送数据的,从而改变信息,无论进行多少次PUT操作,其结果并没有不同。
  • POST请求同PUT请求类似,都是向服务器端发送数据的,但是该请求会改变数据的种类等资源,几乎目前所有的提交操作都是用POST请求的。
  • DELETE请求顾名思义,就是用来删除某一个资源的。

GET 和 POST 比较

GET 方法

  • 从指定的服务器上获得数据
  • GET请求能被缓存
  • GET请求会保存在浏览器的浏览纪录里
  • GET请求有长度的限制
  • 主要用于获取数据
  • 查询的字符串会显示在URL后缀中,不安全

POST 方法

  • 提交数据给指定服务器处理
  • POST请求不能被缓存
  • POST请求不会保存在浏览器的浏览纪录里
  • POST请求没有长度限制
  • 查询的字符串不会显示在URL中,比较安全

HTTP 状态码

HTTP 状态码(HTTP Status Code)是用以表示网页服务器 HTTP 响应状态的 3 位数字代码,当浏览器请求某一 URL 时, 服务器根据处理情况返回相应的处理状态。

通常正常的状态码为2xx,3xx(如200),如果出现异常会返回4xx,5xx(如404)。

状态码分类:

状态码首位已定义范围分类
1xx100-101信息提示
2xx200-206成功
3xx300-305重定向
4xx400-415客户端错误
5xx500-505服务器错误

常见状态码

状态码功能描述
200一切正常
301永久重定向
302临时重定向
401用户名或密码错误
403禁止访问
404请求的文件不存在
414请求URL头部过长
500服务器内部错误
502无效网关
503当前服务不可用
504网关请求超时

HTTP 请求流程分析

请求报文

用户在浏览器输入URL访问时,发起HTTP请求报文,请求中包括请求行、请求头、请求体,服务器收到请求后返回响应报文,包括状态行、响应头、响应体。

image.png

请求报文四部分

  • 请求行:请求行由请求方法、URL 以及协议版本三部分组成。
  • 请求头:请求头为请求报文添加了一些附加信息,由“名/值”对组成,每行一对,名和值之间使用冒号分隔。
  • 空行:请求头部的最后会有一个空行,表示请求头部结束,接下来为请求体,这一行非常重要,必不可少。
  • 请求体:请求体是请求提交的参数,GET 方法已经在 URL 中指明了参数,所以提交时没有数据。POST 方法提交的参数在请求体中。
请求头描述
Host接受请求的服务器地址,可以是 IP:端口号 ,也可以是域名
User-Agent发送请求的应用程序名称
Connection指定与连接相关的属性,如Connection:Keep-Alive
Accept-Charset通知服务端可以发送的编码格式
Accept-Encoding通知服务端可以发送的数据压缩格式
Accept-Language通知服务端可以发送的语言

响应报文

image.png

响应报文四部分

  • 状态行:状态行由协议版本,状态码,状态码描述三部分组成。
  • 响应头:响应头与请求头部类似,为响应报文添加了一些附加信息。
  • 空行:响应头部的最后会有一个空行,表示响应头部结束。
  • 响应体:服务器返回的相应 HTML 数据,浏览器对其解析后显示页面。
响应头描述
Server服务器应用程序软件的名称和版本
Content-Type响应正文的类型(是图片还是二进制字符串)
Content-Length响应正文长度
Content-Charset响应正文使用的编码
Content-Encoding响应正文使用的数据压缩格式
Content-Language响应正文使用的语言

HTTP访问的过程

  • 建立连接

接收或拒绝连接请求

  • 接收请求

接收客户端请求报文中对某资源的一次请求的过程

  • 处理请求

服务器对请求报文进行解析,并获取请求的资源及请求方法等相关信息,根据方法,资源,首部和可选的主体部分对请求进行处理

  • 访问资源

服务器获取请求报文中请求的资源web服务器,即存放了web资源的服务器,负责向请求者提供对方请求的静态资源,或动态运行后生成的资源

  • 构建响应报文

一旦Web服务器识别除了资源,就执行请求方法中描述的动作,并返回响应报文。响应报文中 包含有响应状态码、响应首部,如果生成了响应主体的话,还包括响应主体

  • 发送响应报文

Web服务器通过连接发送数据时也会面临与接收数据一样的问题。服务器可能有很多条到各个客户端的连接,有些是空闲的,有些在向服务器发送数据,还有一些在向客户端回送响应数据。服务器要记录连接的状态,还要特别注意对持久连接的处理。对非持久连接而言,服务器应该在发送了整条报文之后,关闭自己这一端的连接。对持久连接来说,连接可能仍保持打开状态,在这种情况下,服务器要正确地计算Content-Length首部,不然客户端就无法知道响应什么时候结束

  • 记录日志

最后,当事务结束时,Web服务器会在日志文件中添加一个条目,来描述已执行的事务

Cookie和session

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

HTTP是超本文传输协议,顾名思义,这个协议支持超文本的传输。什么是超文本?说白了就是使用HTML编写的页面。通常,我们使用客户端浏览器访问服务器的资源,最常见的URL也是以html为后缀的文件,因此可以说超文本是网络上最主要的资源。

既然HTTP协议的目的是在于支持超文本的传输,也就是资源的传输,那么客户端浏览器向HTTP服务器发送请求,继而HTTP服务器将相信资源发回给客户端这样一个过程中,无论对于客户端还是服务器,都没有必要记录这个过程,因为每一次请求和响应都是相对独立的,一般而言,一个URL对应着一个唯一的超文本,正是因为这样的唯一性,使得记录用户的行为状态变得毫无意义,所以,HTTP协议被设计为无状态的连接协议符合它本身的需求。

HTTP协议这种特性有优点也有缺点,优点在于解放了服务器,每一次请求"点到为止",不会造成不必要的连接占用,缺点在于如果为了保留状态,每次请求都会传输大量的重复信息内容。

可是随着 Web 的不断发展,很多业务都需要对通信状态进行保存.如果是一次性会话的过程: 打开浏览器 -> 访问一些服务器内容 -> 关闭浏览器但目前有很多WEB访问场景,并不是一次性会话,而是多次相关的会话,比如:

  • 登录场景:

打开浏览器 -> 浏览到登陆页面 -> 输入用户名和密码 -> 访问到用户主页(显示用户名) -> 修改密码(输入原密码)-> 修改收货地址.......

问题:在此处登录会话过程中产生的数据(用户会话数据)如何保存下来呢?

  • 购物场景:

打开浏览器 -> 浏览商品列表 -> 加入购物车(把商品信息保存下来) -> 关闭浏览器打开浏览器-> 直接进入购物车 -> 查看到上次加入购物车的商品 -> 下订单 -> 支付

问题: 在购物会话过程中,如何保存商品信息?

以上场景都需要保留会话数据,需要会话管理机制。

会话管理: 管理浏览器客户端和服务器端之间会话过程中产生的会话数据。

为了会话管理,HTTP就需要传输大量重复信息内容的问题,造成大量的网络带宽消耗。于是 Cookie 和Session 技术闪亮登场了,它们可以为用户进行会话管理,实现保存状态。

Cookie

Cookie 又称为"小甜饼”。类型为"小型文本文件”,指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。由网景公司的前雇员卢·蒙特利在1993年3月发明

因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两瓶饮料。最后结帐时,由于HTTP的无状态性,不通过额外的手段,服务器并不知道用户到底买了什么,所以Cookie就是用来绕开HTTP的无状态性的"额外手段”之一。服务器可以设置或读取Cookies中包含信息,借此维护用户跟服务器会话中的状态。

在上面的购物场景中,当用户选购了第一项商品,服务器在向用户发送网页的同时,还发送了一段Cookie,记录着那项商品的信息。当用户访问另一个页面,浏览器会把Cookie发送给服务器,于是服务器知道他之前选购了什么。用户继续选购饮料,服务器就在原来那段Cookie里追加新的商品信息。结帐时,服务器读取发送来的Cookie就行了。

Cookie基于HTTP协议,也叫Web Cookie或浏览器Cookie,是服务器发送到用户浏览器并保存在客户端本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie主要用于以下三个方面

  • 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
  • 个性化设置(如用户自定义设置、主题等)
  • 浏览器行为跟踪(如跟踪分析用户行为等)

Cookie 技术通过在请求和响应报文中写入 Cookie 信息来控制客户端的状态。当服务器收到HTTP请求时,服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie,之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。服务器端发现客户端发送过来的 Cookie 后,会去检查究竟是从哪一个客户端发来的连接请求,然后对比服务器上的记录,最后得到之前的状态信息.另外,Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

Session

cookie和session的相同和不同:

  • cookie通常是在服务器生成,但也可以在客户端生成,session是在服务器端生成的
  • session 将数据信息保存在服务器端,可以是内存,文件,数据库等多种形式,cookie 将数据保存在客户端的内存或文件中
  • 单个cookie保存的数据不能超过4K,每个站点cookie个数有限制,比如IE8为50个、Firefox为50个、Opera为30个;session存储在服务器,没有容量限制
  • cookie存放在用户本地,可以被轻松访问和修改,安全性不高;session存储于服务器,比较安全
  • cookie有会话cookie和持久cookie,生命周期为浏览器会话期的会话cookie保存在缓存,关闭浏览器窗口就消失,持久cookie被保存在硬盘,知道超过设定的过期时间;随着服务端session存储压力增大,会根据需要定期清理session数据
  • session中有众多数据,只将sessionID这一项可以通过cookie发送至客户端进行保留,客户端下次访问时,在请求报文中的cookie会自动携带sessionID,从而和服务器上的的session进行关联

cookie缺点

  • 使用cookie来传递信息,随着cookie个数的增多和访问量的增加,它占用的网络带宽也很大,试想假如cookie占用200字节,如果一天的PV有几个亿,那么它要占用多少带宽?
  • cookie并不安全,因为cookie是存放在客户端的,所以这些cookie可以被访问到,设置可以通过插件添加、修改cookie。所以从这个角度来说,我们要使用sesssion,session是将数据保存在服务端的,只是通过cookie传递一个sessionId而已,所以session更适合存储用户隐私和重要的数据

session 缺点

  • 不容易在多台服务器之间共享,可以使用session绑定,session复制,session共享解决
  • session存放在服务器中,所以session如果太多会非常消耗服务器的性能cookie和session各有优缺点,在大型互联网系统中,单独使用cookie和session都是不可行的