web基础与http

目录

一、DNS与域名

1.1、域名概述

1.2、域名小结

1.3、DNS解析

1.4、域名

二、网页的概念

2.1、网页

2.2、HTML概述

2.2.1、HTML超文本标记语言

2.2.2、HTML文档的结构

2.2.3、网页基本标签

2.2.4、标题标签类型

三、Web

3.1、Web概述

[3.2、Web1.0 vs Web2.0](#3.2、Web1.0 vs Web2.0)

3.3、静态页面与动态页面

四、HTTP协议概述

4.1、HTTP协议简介

4.2、cookie和session扩展

4.2.1、cookie

4.2.2、session

4.2.3、cookie和session的区别

4.3、HTTP协议的版本

[4.4、HTTP请求格式(GET /POST方式)](#4.4、HTTP请求格式(GET /POST方式))

4.4.1、GET方式

4.4.2、POST请求方式

4.4.3、GET与POST的区别

4.4.4、HTTP状态码

一、DNS与域名

1.1、域名概述

  1. 网络是基于 TCP/IP 协议进行通信和连接的,每一台主机都有一个唯一的标识(固定的 IP地址), 用以区别在网络上成千上万个用户和计算机。网络在区分所有与之相 连的网络和主机时,均采用一种唯一、通用的地址格式,即每一个与网络相连接的计算机和服务器都被指派一个独一无二的地址
  2. 为了保证网络上每台计算机的 IP 地址的唯 一性,用户必须向特定机构申请注册,分配 IP 地址
    网络中的地址方案分为两套:IP 地址系统和域名地址系统。这两套地址系统其实是一一对应的关系由于 IP 地址是数字标识,使用时难以记忆和书写,因此在 IP 地址的基础上又发展出一种符号化的地址方案,来代替数字型的 IP 地址 。

1.2、域名小结

1 、网络上交互是基于 TCP/IP 协议的,每个主机在逻辑上有一个唯一位置标识( IP 地址),物理地址为MAC地址
2 、为了保证地址唯一性,用户协议向特地给机构申请注册,分配 IP 地址网络中的地址有两套方案: ① IP 地址系统
② 域名地址系统
而由于 IP 是由 32 位二进制数字标识,不方便记忆,所以 以 IP 地址为基础发展出了符号化地址来代替解决 方案,也是是域名

1.3、DNS解析

DNS 解析方式,三种 :
① /etc/hosts
linux 系统中负责快速解析的文件,包含了 ip 与主机名的映射关系,在没有 DNS 服务器的情况下,使用本 地/etc/hosts 完成解析 / 映射,实现快速访问
PS: 主要用于主机之间( IP 和主机名)的映射 / 解析关系,示例:
192.168.226.128 master
192.168.226.129 node1
192.168.226.130 node2
② /etc/resolv.conf
DNS 客户端配置文件,主要用于设置 DNS 服务器的 IP 和域名,还包含了主机域名的搜索顺序等等,这个
文件是由域名解析器( resolver ,一个根据主机名解析 IP 地址的库)使用的配置文件。
PS: 主要用与匹配 DNS 服务器,示例:
nameserver 114.114.114.114
nameserver 8.8.8.8
nameserver 218.2.135.1
③ /etc/sysconfig/network-scripts/ifcfg-ens33
我们也可以在网卡配置文件中定义 DNS1= DNS2=
生效顺序 1 hosts文件 2 网卡配置文件 3 /etc/resolv.conf

1.4、域名

1 、定义: 标识一组主机并提供它们的有关信息的树形结构(主要确定了根在哪,就可以确定每个分
支)
www.baidu.com
域名服务器(分布式,每台主机维护一个部分):
① 保持和维护域名空间的程序
② 响应解析器的请求
解析端(客户端)
向 DNS 服务器发出请求的设备
2 、域名空间结构 ( 从右往左看 )
① 根域 位于域名空间最顶层,一般用一个 "." 表示
基础单位,除了根域 其他都只有一个上级域,有 0 或多个子域,同层域不可重复的子域或域名
② 顶级域
一般代表一种类型的组织机构或国家地区(主要有此两种类型构成),如 net (网络公司)、 com (商
业)、 org (民间团体组织)、 edu (教育)、 gov (政府)、 mil (军事)、 cn (中国)、 jp (日本)、
hk (中国香港)
③ 二级域
用来标明顶级域内的一个特定的组织,国家顶级域下面的二级域名由国家网络部门统一管理,如 .cn 顶
级域名下面设置的二级域名: .com.cn 、 .net.cn 、 .edu.cn ...
④ 子域
子域名(或子域;英语: Subdomain )是在域名系统等级中,属于更高一层域的域。比如,
mail.example.comcalendar.example.comexample.com 的两个子域,而 example.com 则是顶级
域 .com 的子域。凡顶级域名前加前缀的都是该顶级域名的子域名,而子域名根据技术的多少分为二级子域名,三级子域名以及多级子域名主机
主机位于域名空间最下层,就是一台具体的计算机,如 www 、 mail 、都是具体的计算机名字,可用 www.sina.com.cn . 、 mail.sina.com.cn. 来表示,这种表示方式称为 FQDN ( 完全合格域名 ) ,也是这台主机在域名中的全名

二、网页的概念

2.1、网页

1 、网页基本概念
① 网页
纯文本格式文件
编写语言为 HTML
在用户的浏览器中被 " 翻译 " 成网页形式显示出来 ② 网站
由一个一个页面构成的,是多个网页的结合体
主页:打开网站后出现的第一个网页称为网站主页(或首页)
③ 域名
浏览网页时输入的网址
④ HTTP/HTTPS
用来传输网页的通信协议(是否加密),是一种通讯 / 交互的标准 / 规范
⑤ URL
是一种万维网寻址系统
扩展: URI : Uniform Resource Identifier 统一资源标识,分为 URL 和 URN
URN : Uniform Resource Naming ,统一资源命名 这个资源叫什么具体的名字
示例: P2P 下载使用的磁力链接是 URN 的一种实现
magnet:?xt=urn:btih:660557A6890EF888666 (只是描述了资源的名字,并没有明确该资源在
哪里) mac 地址全球唯一
URL : Uniform Resorce Locator ,统一资源定位符,用于描述某服务器某特定资源位置 资源的具
体位置
⑥ HTML
用来编写网页的超文本标记语言
⑦ 超链接
超链接是将网站中不同网页链接起来的功能
⑧ 发布
将制作好的网页上传到服务器供用户访问的过程

2.2、HTML****概述

2.2.1 HTML****超文本标记语言

前端 html css javascript
http Hyper Text Markup Language
网页的 " 源码 "
浏览器: " 解释和执行 "HTML 源码的工具

2.2.2 HTML****文档的结构

HTML 网页
头部部分
标题部分
主体部分
网页内容,包括文本、图像等

  • 头标签中常用标签

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

  • 内容标签中常用标签

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

2.2.3网页基本标签2-1

网页摘要信息的作用
有利于浏览器解析
有利于搜索引擎搜索

2.2.4****标题标签类型

行控制相关标签
范围标签
图像标签
超链接标签
特殊符号

三、Web

3.1Web概述

互联网:是网络的网络,是所有类型网络的母集
因特网:世界上最大的互联网网络。即因特网概念从属于互联网概念。习惯上,大家把连接在因特网上 的计算机都成为主机。
Web ( World Wide Web )即全球广域网,也称为万维网 一种分布式图形信息系统建立在Internet 上的一种网络服务
万维网并非某种特殊的计算机网络,是一个大规模的、联机式的信息贮藏库,使用链接的方法能非常方便地从因特网上的一个站点访问另一个站点(超链技术),具有提 供分布式服务的特点。万维网是一个分布式的超媒体系统,是超文本系统的扩充,基于B/S 架构实现

URL :万维网使用统一资源定位符( Uniform Resource Locator )来标志万维网上的各种文档,并使每个文档在整个因特网的范围内具有唯一的标识符URL 。
HTTP :为解决 " 用什么样的网络协议来实现整个因特网上的万维网文档 " 这一难题,就要使万维网客户程 序(以浏览器为主,但不限于浏览器)与万维网服务器程序之间的交互遵守严格的协议,即超文本传送协议(HyperText Transfer Protocol )。 HTTP 是处于应用层的协议,使用 TCP 传输层协议进行可靠的传送。因此,需要特别提醒的是,万维网是基于因特网的一种广泛因特网应用系统,且万维网采用的是HTTP( 80/TCP )和 HTTPS ( 443/TCP )的传输协议,但因特网还有其他的网络应用系统(如: FTP 、SMTP等等)。
HTML :为了解决 " 怎样使不同作者创作的不同风格的万维网文档,都能在因特网上的各种主机上显示出来,同时使用户清楚地知道在什么地方存在着链接" 这一问题,万维网使用超文本标记语言( HyperTextMarkup Language),使得万维网页面的设计者可以很方便地用链接从页面的某处链接到因特网的任何一个万维网页面,并且能够在自己的主机品目上将这些页面显示出来。HTML 与 txt 一样,仅仅是是一种 文档,不同之处在于,这种文档专供于浏览器上为浏览器用户提供统一的界面呈现的统一规约。且具备 结构化的特征,这是txt 所不具备的强制规定。

3.2 Web1.0 vs Web2.0

Web1.0

以编辑为特征,网站提供给用户的内容是编辑处理后的,然后用户阅读网站提供的内容这个过程是网站到用户的单向行为Web1.0以静态 单向阅读为主 Web2.0
更注重用户的交互作用,用户既是网站内容的消费者(浏览者),也是网站内容的制造者加强了网站与用户之间的互动,网站内容基于用户提供,网站的诸多功能也由用户参与建设,实现了网站与用户双向的交流与参与
Web2.0 特征
用户分享、以兴趣为聚合点的社群、开放的平台,活跃的用户

3.3****静态页面 与动态页面

(1) 静态页面定义:

① 静态网页是标准的 HTML 文件
② 扩展名是 .htm 、 .html
例如文本、图像、声音、 Flash 动画、客户端脚本和 ActiveX 控件及 Java 小程序等
③ 是网站建设的基础,早期网站一般都由静态网页制作
④ 没有后台数据库、不含程序和不可交互的网页
⑤ 相对更新起来比较麻烦,适用于一般更新较少的展示型网站
(2)静态页面特点:
① 每个静态网页都有一个固定的 URL ,且 URL 以 .htm 、 .html 、 .shtml 等常见形式为后缀,而不含有 "?"
② 网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页都是保存在网站服务器上的
③ 静态网页的内容相对稳定,容易被搜索引擎检索
④静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难
⑤ 静态网页的交互性较差,在功能方面有较大的限制
⑥ 页面浏览速度迅速,过程无需连接数据库,开启页面速度快于动态页面
(3 ) 动态页面
① 网页 URL 不固定,能通过后台与用户交互
② 在动态网页网址中有一个标志性的符号 ------"?"
③ 常用的语言有 PHP 、 JSP 、 Python 、 Ruby 等
(4) 动态页面特点:
① 交互性
网页会根据用户的要求和选择而动态改变和响应,将浏览器作为客户端界面,这将是今后 WEB 发展的大势所趋
② 自动更新
无须手动地更新 HTML 文档,便会自动生成新的页面,可以大大节省工作量
③ 因时因人而变
当不同的时间,不同的人访问同一网址时会产生不同的页面

四、HTTP协议概述

4.1、HTTP协议简介

  • HTTP(超文本传输协议HyperText Transfer Protocol)协议是互联网上应用最为广泛的一种网络协议,它是基于TCP协议的应用层传输协议,简单来说就是客户端和服务端进行数据传输的一种规则。
  • HTTP/HTTPS是应用层上的协议,建立在传输层TCP之上,客户端通过与服务端进行TCP连接(三次握手),之后发送HTTP请求与接收HTTP响应都是通过访问Socket接口来调用TCP协议实现。
  • HTTP 是一种无状态 (stateless) 协议, HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理(存储,保存)。这样做的目的是为了保持HTTP协议的简单性,从而能够快速处理大量的事务, 提高效率

4.2 cookiesession****扩展

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

cookie产生流程:

  • 用户请求网页

    • 用户通过浏览器请求访问某个网站。
  • 服务器响应

    • 服务器响应用户的请求,并在响应头中包含 Set-Cookie 字段,将一个或多个 Cookie 发送到浏览器。
  • 浏览器保存 Cookie

    • 浏览器接收到 Cookie,并将其保存到本地。
  • 用户访问相同网站

    • 当用户再次访问同一网站时,浏览器会自动将之前保存的 Cookie 发送到服务器。
  • 服务器读取 Cookie

    • 服务器接收到请求,并从请求头中读取 Cookie 信息,以识别用户的身份或处理其他功能。
  • 服务器响应处理

    • 服务器根据 Cookie 的信息处理请求,并生成新的响应。可能会更新 Cookie,或者在响应头中包含新的 Set-Cookie 字段。
  • 浏览器更新 Cookie

    • 浏览器接收到响应后,根据需要更新本地保存的 Cookie。
  • 重复过程

    • 用户继续与网站交互,浏览器和服务器会继续按照上述步骤交换 Cookie 信息。

4.2.2 session

Session(会话)用于在客户端和服务器之间维持状态,通常用于跟踪用户的登录状态或保存其他用户特定的信息。以下是 Session 产生和管理的基本流程:

  1. 用户发起请求
  • 用户通过浏览器向服务器发起请求,通常是访问一个需要身份验证的页面。
  1. 服务器检查 Session
  • 服务器检查请求中是否包含有效的 Session ID。如果没有 Session ID,或 Session ID 无效,服务器将创建一个新的 Session。
  1. 创建 Session
  • 生成 Session ID:服务器生成一个唯一的 Session ID,用于标识这次会话。这个 ID 通常是一个随机生成的字符串。
  • 存储 Session 数据:服务器在内存、数据库或文件系统中创建一个新的 Session 数据存储区,并将与用户相关的信息存储在其中(如用户身份、购物车内容等)。
  1. 发送 Session ID 到客户端
  • 服务器将生成的 Session ID 通过 Set-Cookie 头部发送到客户端浏览器。浏览器将这个 Session ID 存储在 Cookie 中。
  1. 客户端存储 Session ID
  • 浏览器收到 Session ID 后,将其保存为 Cookie,以便在后续的请求中发送回服务器。
  1. 用户后续请求
  • 当用户再次发起请求时,浏览器会自动将保存的 Session ID 通过 Cookie 发送到服务器。
  1. 服务器验证 Session
  • 服务器接收到请求后,从请求中提取 Session ID,并在存储中查找相应的 Session 数据。如果找到有效的 Session 数据,服务器将继续处理请求。
  1. 更新 Session
  • 根据用户的操作,服务器可能会更新 Session 数据(如更改用户设置、添加购物车商品等)。
  1. 用户登出或 Session 超时
  • 当用户登出时,服务器可以选择删除 Session 数据,并通过 Set-Cookie 头部将过期的 Session ID 发送到客户端,使浏览器删除对应的 Cookie。
  • 如果 Session 超时(即 Session 数据在一定时间内未被访问),服务器将删除过期的 Session 数据,并可能使 Session ID 失效。

4.2.3 cookiesession****区别

主要区别总结

  • 存储位置:Cookie 存储在客户端(浏览器中),Session 存储在服务器端。
  • 数据量和安全性:Cookie 的数据量较小且安全性较低,而 Session 数据量较大且更安全。
  • 生命周期:Cookie 可以是持久的或会话性的,而 Session 通常是临时的,取决于会话管理策略。

4.3 HTTP****协议的版本

  1. HTTP/0.9: 已过时。只接受GET一种请求方法,没有在通讯中指定版本号,且不支持请求头。由于该版本不支持POST方法,所以客户端无法向服务器传递太多信息。
  2. HTTP/1.0: 这是第一个在通讯中指定版本号的HTTP协议版本,至今仍被广泛采用,特别是在代理服务器中。PV(访问量): 即Page View, 页面浏览量或点击量,用户每次刷新即被计算一次,PV反映的是浏览某网站的页面数,PV与来访者的数量成正比,PV并不是页面的来访者数量,而是网站被访问的页面数量
  3. HTTP/1.1: 引入了持久连接,即TCP连接默认不关闭,可以被多个请求复用,能很好地配合代理服务器工作。还支持管道方式机制,即在同--个TCP连接里面,客户端可以同时发送多个请求,以便降低线路负载,提高传输速度
  4. HTTP/2.0:完全多路复用,在一个连接里,客户端和浏览器都可以同时发送多个请求或回应,而且不用按照顺序.对应。引入了头信息压缩机制,使用gzip或compress压缩后再发送。支持服务端推送,允许服务器未经请求,主动向客户端发送资源。

4.4 HTTP请求格式( GET / POST方式)

4.4.1 GET****方式

① 请求行
请求的方式
请求的资源路径
请求的版本协议号
② 请求头(描述信息 / 标准化信息)
Accept :客户端可以接受的数据类型
Accept-Language :客户端可以接受的语言类型
User-Agent :浏览器的信息
Accpect-Encoding :客户端可以接受的编码格式
Host :表示请求的 ip 和端口号
Connection :告诉服务器请求连接如何处理
Keep-Alive :通知服务器回传数据不要马上关闭,保持一小段的连接
Closed :马上关闭

4.4.2 POST****请求方式

① 请求行
请求的方式
请求的资源路径
请求的协议的版本号
② 请求头
Accept :客户端可以接受的数据类型
Accept-Language :客户端可以接受的语言类型
Referer :表示请求发起时,浏览器地址栏中的地址
User-Agent :浏览器的信息
Content-Type :发送的数据类型
Content-Length :发送的数据长度
③ 请求体:就是发送给服务器的数据

4.4.3 GETPOST****区别

① 区别一 : 语义上的区别
Get 向服务器请求数据,依照 HTTP 协议, get 是用来请求数据。
Post 向服务器发数据,依照 HTTP 协议, Post 的语义是向服务器添加数据,也就是说按照 Post 的语义,该操作是会修改服务器上的数据
② 区别二:服务器请求的区别Get请求是可以被缓存,示例:访问百度,访问的方式就是GET ,此时访问后的内容会缓被存在浏览器中,短时间再次访问,其实是拿到的浏览器中的缓存内容。另外Get 请求只能接收 ASCII 码的回复
Post 请求是不可以被缓存的。对于 Post 方式提交表单,刷新页面浏览器会弹出提示框 " 是否重新提交表单" ,Post可以接收二进制等各种数据形式,所以如果要上传文件一般用 Post 请求
③ 区别三 : 参数放请求头和请求体的差别
Get 请求通常没有请求体(当然这也是可以由程序猿心情改变的),在 TCP 传输中只需传输一次(而不是一个包),所以Get 请求效率相对高。Post请求将数据放在请求体中,而实际传输中,会先传输完请求头,再传输请求体,是分为两次传输的(而不是两个包)。Post请求头会比 Get 更小(一般不带参数),请求头更容易在一个 TCP 包中完成传输,更何况请求头中有Content-Length的标识,可以更好地保证 Http 包的完整性。

4.4.4 HTTP状态码*

当使用浏览器访问某一个 URL ,会根据处理情况返回相应的处理状态
通常正常的状态码为 2xx , 3xx (如 200 )
如果出现异常会返回 4xx , 5xx (如 404 )
状态码首位 已定义范围 分类
1xx 100-101 信息提示
2xx 200-206 成功
3xx 300-305 重定向
4xx 400-415 客户端错误
5xx 500-505 服务器错误
生产环境常见的 HTTP 状态码
消息 描述
200 OK 请求成功(其后是对 GET 和 POST 请求的应答文档)
301 Moved Permanently 请求的永久页面跳转
403 Forbidden 禁止访问该页面
404 Not Found 服务器无法找到被请求的页面
500 Internal Server Error 内部服务器错误
502 Bad Gateway 无效网关 503 Service Unavailable 当前服务不可用
504 Gateway Timeout 网关请求超时

相关推荐
diandian~1 天前
[N1CTF 2018]eating_cms
web
IDC02_FEIYA1 天前
Discuz论坛网站管理员的默认用户名admin怎么修改啊?
服务器·web
Dovir多多3 天前
Linux守护Pythom脚本运行——Supervisor学习总结
linux·运维·服务器·python·安全·云计算·web
墨渊君9255 天前
CSS 技巧:如何让 div 完美填充 td 高度
前端·javascript·css·web
OEC小胖胖5 天前
深入理解 Vue 3 中的 emit
前端·javascript·vue.js·前端框架·web
LLLLLindream5 天前
11.15 HTML
java-ee·web
OEC小胖胖6 天前
Vue 3 插槽详解
前端·javascript·vue.js·web
OEC小胖胖6 天前
Vue 3 中的 ref 完全指南
前端·javascript·vue.js·前端框架·web
曾经的三心草6 天前
JavaWeb之AJAX
java·ajax·json·axios·web
kali-Myon7 天前
ctfshow-web入门-JWT(web345-web350)
前端·学习·算法·web安全·node.js·web·jwt