分类
网络相关源码

易语言HTML解析源码

无模块,原生易语言写成的HTML解析。起因是朋友要用html解析,但是取文本中间没法处理带换行符的文本(据他所说)。所以就写了一个类来解决问题

回复里面有源码(其实就是一个类),该公开的方法都公开了。如果嫌复制麻烦,我提供了模块版本的。两个没什么区别。还有一个示例程序。

有问题回复,我尽量修复。

Q:为什么子成员是文本型,理论上来说html的子成员还是html啊?

A:易语言不支持(以我的能力)

Q:开源吗?

A:开,都可以开。下面第一个回复是三个文件分开来的,这个下面附的是三个一起的压缩包。

Q:用了模块了是吧!

A:没用,而且这个东西说到底就是一个类,我只是方便起见提供模块封装的版本。你可以自己把那个类拷到你自己的程序里面

*无需授权,随意使用。在可以注明作者的地方注明。

分类
HTML

HTML学习笔记(html教学)

1.标题标签:<h1> </h1>

2.段落标签:<p> </p>

3.水平线标签:<hr/>

4.换行标签:<br/>

5.div span标签:两者无语义,相当于一个盒子,用来布局。两者区别:<div></div>会自动换行。

6.文本格式化标签:<b> </b> <strong> </strong> 粗体

<i> </i> <em> </em> 斜体

<s> </s> <del> </del> 加删除线

<u> </u> <ins> </ins> 加下划线

7.标签属性:<标签名 属性1="属性值1" 属性2="属性值2">内容</标签名>

8.图像标签:<img />

属性 属性值

src 路径

alt 文本(图片不显示时显示的文本)

title 鼠标经过时的悬浮文本

width 宽度

height 高度

border 边框宽度

9.链接标签:<a href="目标" target="窗口弹出方式"> </a>

瞄点定位:<a herf="#id名"> </a> <h3 id="文本"> </h3>

target="-self"本窗口弹出

target="-blank"打开新窗口弹出

class与id区别:class不唯一,id唯一

10.base标签:<base target="-blank">

此标签必须放在<head> </head>里

11.常见特殊字符:&nbsp 空格

&lt 小于号

&gt 大于号

&copy 版权

12.注释标签:<!–注释的文本 –>

13.路径:

相对路径:同一级 <img src="文件名" />

下一级<img src="下一级文件名/文件名">

上一级<img src="../文件名"/>(上两级../../,依次类推)

绝对路径:"D:wen\word"或"http://www.baidu.com"

14.列表

无序列表:<ul>

<li>列表项1</li>

<li>列表项2</li>

……

</ul>(ul里不可放其他标签,li里可以放其他标签,后者同理)

有序列表:<ol>

<li> </li>

<li> </li>

……

</ol>

自定义列表:术语,名词的解释描述

<dl>

<dt>名词1</dt>

<dd>解释1</dd>

<dt>名词2</dt>

<dd>解释2</dd>

……

</dl>

分类
HTML

记录:学习html(一):概念(html笔记)

//一、网页

//a:什么是网页?

网站是指因特网根据一定规则,使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站的一‘页’,通常是HTML格式的文件,它要通过浏览器阅读。

网页是构成网站的基本元素,它通常由图片,链接,文件,声音,视频等元素组成,通常我们看到的网页。

常以.htm 或 .html后缀结尾的文件,因此将其俗称为HTML文件

//b:什么是html?

HTML指的是超文本标记语言,它是用来描述网页的一种语言。

HTML不是一种编程语言,而是一种标记语言

标记语言是一套标记标签

所谓超文本,有2层含义

1、它可以加入图片,声音,动画,多媒体等内容(超越了文本限制)。

2、它还可以从一个文件跳转到另外一个文件,与世界各地主机的文件连接(超级链接文本)。

//c:网页的形成?

网页是由元素组成,这些元素利用html标签描述出来,然后通过浏览器解析来显示给用户的

网页总结:网页是图片,链接,文字,声音,视频等元素组成,其实就是一个html文件(后缀名为html )

//d:常用的浏览器

网页是通过浏览器来展示的,关于浏览器我们要介绍下面两点:

1、常用浏览器

浏览器是网页显示,运行平台,常用的浏览器有IE、火狐、谷歌、safari和Opera等。平时称为五大浏览器。

2、浏览器内核

浏览器内核:负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。

//e:Web标准

Web标准是由W3C组织和其他标准化组织制定一系列标准的集合,W3C(万维网联盟)是国际最著名的标准化组织。

接下来围绕web标准,我们学习以下两点:

1、我们需要web标准

浏览器不同,它们显示页面或者排版有些许差异

遵循Web标准除了可以让不同的开发人员写出的页面更加标准,更统一外,还有以下优点:

让Web的发展前景更广阔

内容能被更广泛的设备访问

更容易被搜索引擎搜索

降低网站流量费用

使网站更易于维护

提高页面浏览速度

2、Web标准的构成

主要包括结构,表现和行为三个方面

  • 结构结构用于对网页元素进行整理和分类,现阶段主要学的是HTML
  • 表现表现用于设置网页元素的版式,颜色,大小等外观样式,主要指的是CSS
  • 行为行为是指网页模型的定义及交互的编写,现阶段主要学的是javascript

Web标准提出的最佳体验方案:结构,样式,行为相分离。

简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到JavaScript文件中。

分类
HTML

HTML文件的标准结构(html文件是标准的什么文件)

上篇文章中只是简单的通过记事本实现了文本加粗,但万事万物都有规则和标准HTML也不例外。

HTML页面的固定结构

网页类似于一篇文章:

每一篇的文章都是有固定的结构的,如:标题、开头、正文、落款等等……

页面中也是存在固定的结构的,如:整体、头部、标题、主体。

网页中的固定结构是通过特定的HTML标签进行描述的文件

结构如下:

<html>———————————————–>整体

<head>———————————————–>头部

<title>网页的标题</title>————————->标题

</head>

<body>网页的主体内容</body>—————->主体

</html>

了解了结构就要选择工具了,工欲善其事必先利其器。

在实际开发中注重效率和便捷性,这里并不强制使用什么工具,自己用的习惯就好。

目前常用的开发工具有:

Visual Studio Code | Webstorm | Sublime | Dreamweaver |Hbuilder

分类
HTML

HTML基本标记的使用方法(html中的标记)

1.注释标记(<!–…–>)

语法: <!–注释内容–>

2.文件标记(<html>…</html>)

语法: <html>…</html>

说明:<html>这对标记是HTML文件的标记。<html>处于文件的最前面,表示HTML文件的开始。即浏览器从<html>标记开始解释,直到遇到</html>标记为止。

3.文件头标记(<head>…</head>)

语法: <head>…</head>

说明:

①由head这组标记定义的元素中,并不放置网页的任何内容,是放置关于这份HTML文件的信息。就是说,它并不属于HTML文件的主体,它包含文件的标题、编码方式和URL等。这些信息大部分用于提供索引、辨认或其他应用。

②这对标记在HTML文件中并不是必需的。如果某个HTML文件并不需要提供相关信息,则可省略<head>标记。

4.文件标题标记(<title>…</title>)

语法: <title>文件标题文字</title>

说明:此标记用于设定HTML文件的标题名称,它将显示在浏览器的标题栏中。

注意:<title>标记用于<head>标记中。但如果HTML文件中没有使用<head>标记,则<title>标记仍然起作用。

5.文件主体标记(<body>…</body>)

语法: <body>…</body>

说明:

①由<body>标记所建立的元素是HTML文件的内容主体,也是HTML文件的重点所在。HTML文件中要显示在网页上的所有内容,也都放置在这个元素中。

②<body>具有一些特殊的属性,可以设定背景及字符颜色等。

分类
HTML

Html常用单词(htmlcss常用单词)

day01

  • form:表单
  • action:行动(提交的路径)
  • method:方法(提交的方式)
  • input:输入
  • type:类型
  • text:文本(文本输入项)
  • password:密码
  • radio:单选按钮
  • checkbox:复选框
  • file:文件(文件上传项)
  • hidden:隐藏字段
  • reset:重置(重置按钮)
  • button:按钮(普通按钮)
  • name:名称(元素名称)
  • value:值(输入项的内容)
  • size:大小(可以是文字字体的大小,也可以是输入框的宽度)
  • checked:被选中
  • readonly:只读
  • disabled:不可用的
  • maxlength:最大长度(输入框可以输入的最大长度)
  • select:选择(下拉列表项)
  • option:条目(下拉列表项)
  • textarea:区域(文本输入域)
  • submit:提交(提交按钮)
  • selected:选择(下拉列表被选中)

day02

  • style:样式
  • color:颜色
  • font-size:字体大小
  • pink:粉红色
  • gold:金黄色
  • gray:灰色
  • blue:蓝色
  • red:红色
  • yellow:黄色
  • black:黑色
  • white:白色
  • background-color:背景颜色

day03

  • border:边框
  • width:宽度
  • height:高度
  • margin:外边距
  • padding:内边距
  • float:浮动
  • clear:清除
  • none:无(元素不浮动)
  • left:左边
  • right:右边
  • both:都(同时)
  • display:显示方式
  • block:显示的(显示为块级元素)
  • inline:在一行(显示为内联元素)
  • div:块级元素的区域
  • span:内联元素的区域
  • element:元素
  • top:顶部
  • bottom:底部
  • product:产品,商品
  • header:头部信息
  • menu:菜单
  • show:显示
  • father:父亲
  • big:大的
  • small:小的

day04

  • document:文档
  • check:检查
  • change:改变
  • init:初始化
  • history:历史
  • alert:警告框
  • confirm:确认框
  • prompt:输入框
  • function:功能(函数)
  • click:点击
  • back:返回
  • tips:提示
  • info:信息
  • onfocus:聚焦
  • onblur:离焦
  • location:位置
  • screen:屏幕
  • navigator:导航(浏览器相关信息)

day05

  • onmouseover:鼠标移入
  • onmouseout:鼠标移出
  • attribute:属性
  • node:节点
  • document:文档
  • element:元素
  • textNode:文本节点
  • append:追加
分类
HTML

HTML语言简介(html基本语言)

视频加载中…

分类
HTML

HTML基础入门教程,web前端初学者速成必备(web前端怎么入门)

HTML5是什么?

HTML5是超文本标记语言的最新版本,也就是描述网页的代码,html5实际上是三种代码形式,首先是HTML提供结构,其次是层叠样式表负责网站的样式和布局,最后是JavaScript是给网站添加动态功能。

HTML它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML5有什么好处?

HTML5主要是提供您想要的网站效果,而无需其他软件,如浏览器插件。它可以完成从动画到应用程序,从音乐到电影的各种操作,还可以用于构建在浏览器中运行的极其复杂的应用程序。

HTML5能做什么?

HTML可以处理简单的页面布局,HTML5可用于编写在您未连接到网络时仍可使用的Web应用程序;告诉网站您所在的位置;处理高清视频;并提供非凡的图形。

HTML特点

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

  • 简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
  • 可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
  • 平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
  • 通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

创建HTML5网站需要哪些工具?

Aptana这个HTML5编辑器是一个开源的开发工具,支持开放的Web开发。开发者可以使用单一的设置来测试他们的Web应用程序。很多人更喜欢Adobe的Dreamweaver等工具,因为它在2010年获得了HTML5包。

编辑方式

HTML其实是文本,它需要浏览器的解释,它的编辑器大体可以分为以下几种:

  1. 基本文本、文档编辑软件,使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS来编写,也可以。不过存盘时请使用.htm或.html作为扩展名,这样就方便浏览器认出直接解释执行了。
  2. 半所见即所得软件,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。
  3. 所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe)。

Microsoft Visual Studio(出品公司:微软):其中所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。

HTML入门学习教程

动力节点老杜讲解的html,可以说是非常详细全面了,完事适合小白去学,主要讲解了HTML基础语法,内容主要包括:HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等知识点。

通过html视频的学习之后,就可以开发基本的网页,并且可以看懂别人编写的HTML页面。

HTML学习资料:http://www.bjpowernode.com/?toutiaoweb.chai

HTML学习目录

1.课程内容概述

2.BS结构介绍

3.软件环境准备

4.HTML概述

5.我的第一个HTML

6.HTML的基本标签

7.HTML的实体符号

8.HTML的表格

9.HTML的单元格合并1

10.HTML的单元格合并2

11.thead tbody tfoot

12.背景色和背景图片

13.HTML图片img标签

14.HTML超链接

15.超链接的作用-request和response的概念

16.HTML列表

17.form表单初步

18.用户注册表单的实现

19.下拉列表支持多选

20.form的file控件

21.隐藏域hidden控件

22.隐藏域hidden控件2

23.readonly和disabled

24.控件的maxlength属性

25.HTML文档中节点的id属性

26.div和span在网页中的应用

分类
HTML

1. 「Web前端开发」-1-什么是HTML(1+web前端初级)

本节课介绍Web前端开发中的HTML相关知识,这一节讲为您介绍什么是HTML。

视频加载中…

分类
HTML

超大型集群第六篇(HTTP协议)(http协议系列1)

一、HTTP协议简介

1. 什么是http协议?具体是干什么用的
 http又称之为超文本传输协议,主要用来从服务器传输超文本到本地浏览器的传送协议
    
2. 什么又是超文本?
 超文本最大的特征就是可以超链接文本文档or图片等内容(超链接即通过点击进行跳转网页)

'http协议是基于TCP协议来传递数据的,另外我们现在常用的http协议版本号为1.1'

二、HTTP/1.1说明

针对于http1.1版本主要需要说明两点内容—-HTTP无连接以及HTTP无状态

2.1 HTTP无连接

# http无连接是什么意思?
(1)无连接指的是tcp三次握手后建立的双向链接只能支持一次数据的传输,即使用一次就断开
(2)如果一直处于无连接状态那么用户每次请求就会重新建立tcp的双向链路,此时的访问速度就有优化的空间


'解决办法即需要在服务端开启长链接'
1. 长链接意思为http数据传输后将tcp链接保持在打开的状态,以便未来的http请求继续使用。
2. 长链接即需设置服务器的keepalive(保持链接)选项
'个人感觉应该是要改nginx配置文件里的keepalive有效,具体就不晓得改哪个了'
[[email protected] ~]# vim /proc/sys/net/ipv4/tcp_keepalive_time   # 更改里面数值即可



'有益就有弊,简单看下长链接的优点以及缺点'
优:  keepalive长链接模式更加高效,避免了链接建立和释放的资源开销
缺: 长时间的tcp链接容易导致系统资源无效占用,浪费系统资源,所以上面的配置根据自身情况来就好

2.2 HTTP无状态

# http无状态又是什么意思?
(1) 官方定义: http无状态是指协议对于交互性场景没有记忆能力
(2) 白话解释: 其实就是默认情况下http没有缓存功能,假设此时我们输入账户密码,刷新一次又需要重新输入


# http无状态的解决办法是什么?
'最主要的目的就是让服务器有记忆能力-----现在我们较为常用的方法为Cookie+Session'
1.  Cookie
 'cookie的工作方式'
 (1) cookie其实是一小段的文本信息,客户端请求服务器,如果服务器需要记录该用户状态,就会在响应请求是使用set-cookie将用户状态信息写入到客户端浏览器文件中去
 (2) 当浏览器下次请求访问该网站时会将cookie信息添加到request请求的数据当中来代替用户验证
    
    'cookie的弊端'
     (1) 由于cookie保存的数据信息是存在于客户端的浏览器目录下,所以此文件会有被篡改的风险,基于此种原因,出现了一种基于cookie的机制Session.


2. Session
 (1) Session是另外一种记录客户端状态的机制,不同的是cookie保存在客户端浏览器中,而Session保存在服务器上
 (2) 客户端浏览器访问服务器时,服务器把客户端信息以某种形式记录在服务器上。这就是Session
       
     '为什么说Session基于cookie呢?'
   # session不仅会将客户端信息存储在服务器上,还会有一小部分信息存储在浏览器的cookie中,此时存储在cookie的内容相当于一把用来打开服务器对应信息的钥匙
    
 '再来说说Seesion的优缺点。。'
    优: 解决了纯cookie可能被篡改文件的风险(就算你要改,改的也就是开锁的内容,并不触及到真正的用户信息)
    缺: 在集群环境下读取服务器存储的信息会有速度问题(存放到数据库--硬盘速度不够,存放到缓存服务器---内存空间不够....)
    

3. jwt
 # 简单粗暴,对cookie所产生的客户端本地文件进行加密即可,使用服务器的私钥进行解密即可
 # 听说暂时用的较少
    
4. 番外
 'Session和Cookie的关系'
 (1) cookie 是一个实际存在的、具体的东西,http 协议中定义在 header 中的字段。
 (2) session 是一个抽象概念、开发者为了实现中断和继续等操作,将client和server之间一对一的交互,抽象为“会话”,进而衍生出“会话状态”,也就是 session 的概念。
 (3)即session描述的是一种通讯会话机制,而cookie只是目前实现这种机制的主流方案里面的一个参与者,它一般是用于保存session ID。

三、HTTP的请求信息(request)

1. 什么是URL,什么又是URI
 URI---统一资源标志符(在某一规则下能把一个资源独一无二地标识出来)
 URL---统一资源定位符(一种具体的URI,URL不仅用来标识一个资源,而且还指明了如何定位这个资源)
    # 跟着大佬栗子解释一波URI与URL的区别
 # URI: 假设所有的Html文档都有唯一的编号,记作html:xxxx, xxxx是一串数字,即html文档的身份证号,这个能唯一标识一个html文档,那么这个号码就是一个URI
    # URL: 而URL则是通过描述是哪个主机上哪个路径上的文件来唯一确定一个资源,也就是定位的方式来实现的URI
    
    所以-----
    不论是用定位的方式还是用编号的方式,我们都可以确定唯一的一个资源,都是URI的一种实现方式,而URL就是用定位的方式实现的URI
    # 跟着网上大佬再看一遍 https://www.zhihu.com/question/21950864
    
2. Request请求的格式
 客户端发送一个HTTP请求到服务器的请求消息格式为以下四部分组成:
    请求行(request line)----请求头部(header)----空行----请求数据
    
    
    GET /linhaifeng/p/7278389.html HTTP/1.1 # 请求行--请求类型;需要访问的资源;http版本号
    # 以下皆为请求头部信息----get请求没有请求数据的主体
    Host: www.cnblogs.com
    Connection: keep-alive
    Cache-Control: max-age=0
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    Accept-Encoding: gzip, deflate
    Accept-Language: zh-CN,zh;q=0.9 
        
  
3. http协议请求的方法
 '经常用的只有两个'
# get------请求指定的页面信息,并返回实体主题
# post-----向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。post请求可能会导致新资源的建立和/或已有资源的修改

 'get和post使用上的区别??'
    (1) 参数的组织方式不同
     get 提交的数据会放在url之后,以?分割url和传输数据,参数之间以&相连
        post 是把提交的数据放在http包的body中,不会在地址栏里显示出来
    (2) 传输数据大小限制
     get 特定浏览器和服务器会对url进行长度限制,所以get请求会有瓶颈
        post 不是通过url传值,理论上数据不受限制,但理论毕竟是理论,尽量不要过大
    (3) 安全性
     显而易见的post要比get方法安全性要高一些

请求方法 请求含义 GET 请求读取一个web页面 POST 附加一个命名资源(如web页面) DELETE 删除web页面 CONNECT 用于代理服务器 HEAD 请求读取一个web页面的头部 PUT 请求存储一个web页面 TRACE 用于测试,要求服务器送回收到的请求 OPTION 查询特定选项

四、 HTTP协议的响应(Response)

# HTTP响应也有四个部分组成,分别是: 状态行--消息报头--空行--响应正文

状态行: 由http版本号,状态码,状态消息组成
消息报头: 用来说明客户端要使用的一些附加信息
空行:----\r\n
响应正文: 服务器返回给客户端的文本信息

'响应状态码详解'
'印象中写自动化测试脚本会经常用到状态码这个概念用来判断网页是否访问成功'
状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别:

1xx:指示信息--表示请求已接收,继续处理
2xx:成功--表示请求已被成功接收、理解、接受
3xx:重定向--要完成请求必须进行更进一步的操作
4xx:客户端错误--请求有语法错误或请求无法实现
5xx:服务器端错误--服务器未能实现合法的请求
常见状态码:

200 OK                        //客户端请求成功
400 Bad Request               //客户端请求有语法错误,不能被服务器所理解
401 Unauthorized              //请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden                 //服务器收到请求,但是拒绝提供服务
404 Not Found                 //请求资源不存在,eg:输入了错误的URL
500 Internal Server Error     //服务器发生不可预期的错误
503 Server Unavailable        //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

五、HTTP协议完整工作流程

'我是抄的谢谢'
HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文,请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应,响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

以下是 HTTP 请求/响应的步骤:

1、客户端连接到Web服务器
一个HTTP客户端,通常是浏览器,与Web服务器的HTTP端口(默认为80)建立一个TCP套接字连接。

2、发送HTTP请求
通过TCP套接字,客户端向Web服务器发送一个文本的请求报文,一个请求报文由请求行、请求头部、空行和请求数据4部分组成。

3、服务器接受请求并返回HTTP响应
Web服务器解析请求,定位请求资源。服务器将资源复本写到TCP套接字,由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。

4、释放连接TCP连接
若connection 模式为close,则服务器主动关闭TCP连接,客户端被动关闭连接,释放TCP连接;若connection 模式为keepalive,则该连接会保持一段时间,在该时间内可以继续接收请求;

5、客户端浏览器解析HTML内容
客户端浏览器首先解析状态行,查看表明请求是否成功的状态代码。然后解析每一个响应头,响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML,根据HTML的语法对其进行格式化,并在浏览器窗口中显示。

例如:在浏览器地址栏键入URL,按下回车之后会经历以下流程:

1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;

2、解析出 IP 地址后,根据该 IP 地址和默认端口 80,和服务器建立TCP连接;

3、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求,该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;

4、服务器对浏览器请求作出响应,并把对应的 html 文本发送给浏览器;

5、释放 TCP连接;

6、浏览器将该 html 文本并显示内容; 

六、浏览器获取数据后,页面的请求信息详解

'基本信息-----General'
Request URL: https://www.cnblogs.com/  # 请求的url
Request Method: GET  # 请求的方式
Status Code: 200 OK  # 请求返回的状态以及状态码
Remote Address: 121.40.43.188:443 # 请求的远程主机ip与端口
# 下列选项的作用是为了控制请求头中的referrer的内容
# strict...origin表示不允许refferrer信息显示在从https网站到http网站的请求中
Referrer Policy: strict-origin-when-cross-origin



'请求头部-----Request Header'
authority: www.cnblogs.com  # 请求的域名
method: GET  # 请求的方式
path: /  # 请求的地址和文件,此时访问的是index文件
scheme: https  # 请求的协议
# accept为请求的资源类型
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

accept-encoding: gzip, deflate, br  # 压缩
accept-language: zh-CN,zh;q=0.9  # 字符类型
cache-control: max-age=0  # 缓存的时间
upgrade-insecure-requests: 1 # 升级
user-agent....  # 表示客户端信息



'响应头部-----Response Header'
age: 8  # 当代理服务器用自己缓存的实体去响应请求时,用该头部表明该实体从产生到现在经过了多长时间
cache-control: public,max-age=30 # 表示此页面(资源的有效时间)只能缓存30秒
content-encoding: gzip  # 压缩的格式
content-type: text/html; charset=utf-8 # 文件类型和字符集
date: Mon, 09 Aug 2021 07:05:38 GMT  # 返回数据的时间
strict-transport-security: max-age=2592000; includeSubDomains; preload # 此选项应该是禁止http链接
vary: Accept-Encoding # 告诉代理服务器缓存两种版本的资源:压缩和非压缩


'CDN服务器的常用参数'
#CDN缓存是否命中
x-cache: MISS TCP_MISS dirn:-2:-2
#缓存版本号
x-powered-by: PHP/7.1.21
#缓存时间
x-swift-cachetime: 0
#保存时间
x-swift-savetime: Sat, 03 Aug 2019 06:30:33 GMT

七、用户访问集群架构流程(重要)

1. 客户端发起http请求,请求会先到达防火墙

2. 防火墙识别用户身份,正常的请求通过内部交换机通过tcp链接后端的负载均衡,传递用户的http请求

3. 负载均衡收到请求,会根据请求的内容进行下发任务,通过tcp连接后端的web,转发用户的http请求

4. web接收到用户的http请求后,会根据用户请求的内容进行解析,解析分为如下:
 静态请求:web直接返回给负载均衡-->防火墙-->用户
 动态请求:web向后端的动态程序建立tcp连接,将用户的动态http请求传递至动态程序->由动态程序进行解析
 
5. 动态程序在解析的过程中,如果碰到查询数据库请求,则优先与缓存建立tcp连接,并发起数据查询操作

6. 如果缓存没有对应的数据,动态程序再次向数据库建立tcp连接,并发起查询操作

7. 最后数据由 : 数据库->缓存->动态程序->web服务->负载均衡->防火墙->用户

八、http其他相关内容

# 1. SOA松耦合架构
 面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台,操作系统和变成语言。这使得构建在各种各样的系统中的服务可以以一种统一和通用的方式进行交互
 '将一个服务拆分成多个小型服务,方便每一个小型服务进行迭代更新以及减缓请求压力'
 '其中一个服务出现问题的话不会影响其他服务的正常运行'
 '比如将登录与注册拆分,如果注册服务器挂掉了,不会影响已经注册的用户正常登录'
 
# 2. websocket协议
 (1) websocket是基于TCP的应用层协议,用于在C/S架构的应用中实现双向通信
 (2) 虽然websocket协议在建立连接时会使用http协议,但这并不意味着websocket是基于http实现的
 详情请点击----https://www.cnblogs.com/nuccch/p/10947256.html
 
# 3. http的请求头之User-Agent
 User-Agent中文名为用户代理,他是一个特殊的字符串头,主要用于能够让服务器识别客户端使用的操作系统、浏览器版本等内容
 

# 4. pv和uv的共同点和区别是什么
 PV(访问量): 即Page view---页面浏览量或点击量,用户每次刷新即被计算一次
 UV(独立访客): 即Unique Visitor---访问你网站的每一个客户端为一个访客,24小时内相同的客户端只被计算一次
 '一个UV可以有很多PV,一个PV也只能对应一个IP'

更多Linux架构文章,请点击:超大型集群架构技术文档

更多Linux架构文章,请点击:超大型集群架构技术文档

更多Linux架构文章,请点击:超大型集群架构技术文档