前端_http协议_html语言head&body基本介绍和用法

最新推荐文章于 2024-04-02 09:00:00 发布

Mr.E5

最新推荐文章于 2024-04-02 09:00:00 发布

阅读量2.6k

点赞数 2

文章标签： web html5

本文链接：https://blog.csdn.net/weixin_45591980/article/details/108894511

版权

0 软件开发流程

web开发流程图解

0.5、前端-介绍

概念（广泛）：任何与用户直接打交道的操作界面称之为前端
后端：不直接与用户打交道，给幕后操作者用（一堆代码）
学习要求：看得懂基本前端代码，能搭建简单页面

# 前端基础
HTML\CSS\JavaScript

HTML——内容：网页的骨架，没有任何样式
CSS——外观：给骨架添加各种样式，变好看
JavaScript——动作：控制网页动态效果

# 前端框架:基于现成的页面样式进行修改
bootstrap\JQuery\Vue
	提前封装好了很多操作，只需要按照固定语法调用即可

0.6、软件开发架构

cs	client2server 客户端 服务端
bs	browser2server 浏览器 服务端

p.s.
-bs本质也是cs
-不过浏览器可以充当很多服务端的客户端

如何做到浏览器能跟很多个不同的客户端之间进行数据交互？
1. 浏览器能自动识别不同服务端做不同处理
2. 制定一个统一的标准，如果想要让写的服务端能跟客户端之间做正常的数据交互，就必须遵循一些规则（协议）

浏览器窗口输入回车发生的事：

浏览器朝服务端发送请求
服务端接收请求（eg.请求百度首页）
服务端返回相应的响应（eg.返回一个百度首页）
浏览器接收响应，根据特定规则渲染页面展示给用户看

1、HTTP协议（重点）

https://www.cnblogs.com/linhaifeng/p/6266327.html

https://www.cnblogs.com/linhaifeng/articles/8243379.html

超文本传输协议（Hyper Text Transfer Protocol）， HTTP协议是用于从（WWW:World Wide Web，简万维网）服务器传输超文本到本地浏览器的传送协议。（用来规定服务端和浏览器之间的数据交互的格式，传输HTML格式的文件）
- 不遵守该协议写的服务端不能被浏览器正常访问，自己跟自己操作（例如写一个tcp服务端，浏览器访问该端口，可以连接到，但没有渲染无法显示）；或者自己写客户端，给想用的用户下载专门的app
- HTTP协议工作于B/S架构上
  浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送请求Request。
  Web服务器根据接收到的请求后，向客户端发送响应信息Response。
- 在TCP/IP协议（传输层建立的连接）之上的应用层的协议

1.1 HTTP/1.1 版本

HTTP/1.1是HTTP协议的第三个版本，是目前主流的HTTP协议版本

HTTP 2.0是下一代HTTP协议，主要特点包括：
1. 多路复用
2. 头部压缩
3. 随时复位
4. 服务器端推流: Server Push
5. 优先权和依赖

-版本优化详解

HTTP 1.1引入了许多关键性能优化：keepalive连接，请求流水线，chunked编码传输，字节范围请求等

1、Persistent Connection（keepalive连接）

#1、长连接
允许HTTP设备在事务处理结束之后将TCP连接保持在打开的状态，以便未来的HTTP请求重用现在的连接，直到客
户端或服务器端决定将其关闭为止。
#2、HTTP1.1对比HTTP1.0?
在HTTP1.0中使用长连接需要添加请求头 Connection: Keep-Alive，而在HTTP 1.1 所有的连接默认都是长
连接，除非特殊声明不支持（ HTTP请求报文首部加上Connection: close ）

2、Pipelining（请求流水线）

A client that supports persistent connections MAY "pipeline" its requests (i.e., send 
multiple requests without waiting for each response). A server MUST send its responses 
to those requests in the same order that the requests were received.

支持持久连接的客户端可以“流水线”它的请求（即，发送多个请求而无需等待每个响应）。服务器必须按照与收
到请求的相同顺序来向这些请求发送响应。

3、chunked编码传输

chunk [tʃʌŋk] 
n.	大块；相当大的部分；〈美〉矮胖结实的人；结实的马
Web	分块；块传输编码；块编码

#1、介绍
该编码将实体分块传送并逐块标明长度,直到长度为0块表示传输结束, 这在实体长度未知时特别有用(比如由数
据库动态产生的数据)

#2、传输编码和分块编码
当响应头里包含Transfer-Encoding: chunked，代表分块编码，会把「报文」分割成若干个大小已知的块，
块之间是紧挨着发送的，这样就不需要在发送之前知道整个报文的大小了，也意味着不需要写回Content-
Length首部了。

#3、分块传输的应用
当使用持久连接时，在服务器发送主体内容之前，必须计算出主体内容的大小，然后放到响应头里（Content-
Length：主体的字节数）发送给客户端。

如果服务器动态创建内容，可能在发送之前无法知道主体大小，分块编码就是为了解决这种情况：服务器把主体
逐块发送，说明每一块的大小。服务器再用大小为0的块作为结束块。，为下一个响应做准备，此时响应头里便不
再需要Content-Length了

除非使用了分块编码Transfer-Encoding: chunked，否则响应头首部必须使用Content-Length首部。 摘自
HTTP/1.1：https://tools.ietf.org/html/rfc2616

#4、关于Content-Length首部：
如果请求头包含Accept-Encoding': 'gzip'，则服务端会将内容压缩后返回，内容的Content-Length长度是
压缩后的长度，
如果请求头不包含Accept-Encoding': 'gzip'，
服务器就不会采取gzip压缩，同时我司服务器设定也不进行分块编码。所以返回响应头的Content-Length首部
是必须的，但是这个值的大小肯定是没有进行过压缩的文件大小。

4、字节范围请求

# HTTP1.1支持传送内容的一部分。
比方说，当客户端已经有内容的一部分，为了节省带宽，可以只向服务器请求一部分。
该功能通过在请求消息中引入了range头域来实现，它允许只请求资源的某个部分。在响应消息中Content-
Range头域声明了返回的这部分对象的偏移值和长度。如果服务器相应地返回了对象所请求范围的内容，则响应
码206（Partial Content）

HTTP 1.1还新增了如下特性：

#1、请求消息和响应消息都应支持Host头域
在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名
（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web 
Servers），并且它们共享一个IP地址。因此，Host头的引入就很有必要了。

#2、新增了一批Request method
HTTP1.1增加了OPTIONS,PUT, DELETE, TRACE, CONNECT方法

#3、缓存处理
HTTP/1.1在1.0的基础上加入了一些cache的新特性，引入了实体标签，一般被称为e-tags，新增更为强大的
Cache-Control头。

1.2 两种数据格式：请求&响应

'''请求数据格式'''
  请求首行（标识HTTP协议版本，当前请求方式）
  请求头（一堆k/v键值对）
# 注意此处为\r或\n，空行千万不能省略!!!
  请求体

'''请求方式'''
  1.get请求
    朝服务器要数据
    eg.输入网址获取对应内容
  2.post请求
	朝服务端提交数据
    eg.用户登录，输入用户名和密码之后 提交到服务端后端做身份校验
    
    
'''响应数据格式'''
  响应首行（标识HTTP协议版本，响应状态码）
  响应头（一堆k/v键值对）

  响应体（返回给浏览器展示给用户看的数据，就是一个页面）
    
# url:统一资源定位符（网址）

1.2.1 请求request

1.2.1.1 请求的URL

什么是URI与URL？

#1、什么是URI？
HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。

#2、什么是URL？
URL是一种特殊类型的URI，包含了用于查找某个资源的足够的信息

URL,全称是UniformResourceLocator, 中文叫统一资源定位符,是互联网上用来标识某一处资源的地址。
'''如果说ip+porn定位了全世界独一无二的软件，url可以说是定位了全世界的文件数据'''

#3、以下面这个URL为例，介绍下普通URL的各部分组成：
http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

一个完整的URL包括以下几部分：
#1.协议部分：http://
该URL的协议部分为“http：”，在"HTTP"后面的“//”为分隔符。这代表网页使用的是HTTP协议。在Internet中
可以使用多种协议，如HTTP，FTP等等。
===>如果不写，浏览器会自动补全，但必须有

#2.域名部分：www.aspxfans.com
一个URL中，也可以使用IP地址作为域名使用
===>必须有

#3.端口部分：8080
跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。
===>端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口80

#4.虚拟目录部分：/news/
从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。
===>虚拟目录也不是一个URL必须的部分。

#5.文件名部分：index.asp
从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”
为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。
===>文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名

#6.参数部分：boardID=5&ID=24618&page=1
从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。参数可以允许有多个参数，参数与参
数之间用“&”作为分隔符。
===>参数部分非必须

#7.锚部分：#name
从“#”开始到最后，都是锚部分。
===>锚部分也不是一个URL必须的部分

以百度为例：搜索字符“pivix”，直接在百度搜索框搜索会看到一长串的url标识符，但实际上s?之后
的一堆&号连接的k=v键值对参数都不是必要的，只要我们搜索字符的相应参数就够了

(图1 原url)

（图2 精简后的url）

URI&URL&URN的区别

#1、URI，是uniform resource identifier，统一资源标识符，用来唯一的标识一个资源。
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成：
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

#2、URL是uniform resource locator，统一资源定位器，它是一种具体的URI，即URL可以用来标识一个资
源，而且还指明了如何locate这个资源。
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的
Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。URL一般由三部组成：

①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

#3、URN，uniform resource name，统一资源命名，是通过名字来标识资源，比如mailto:java-net@java.sun.com。
URI是以一种抽象的，高层次概念定义统一资源标识，而URL和URN则是具体的资源标识的方式。URL和URN都是一
种URI。笼统地说，每个 URL 都是 URI，但不一定每个 URI 都是 URL。这是因为 URI 还包括一个子类，即
统一资源名称 (URN)，它命名资源但不指定如何定位资源。上面的 mailto、news 和 isbn URI 都是 URN 
的示例。

在Java的URI中，一个URI实例可以代表绝对的，也可以是相对的，只要它符合URI的语法规则。而URL类则不仅
符合语义，还包含了定位该资源的信息，因此它不能是相对的。
在Java类库中，URI类不包含任何访问资源的方法，它唯一的作用就是解析。
相反的是，URL类可以打开一个到达资源的流。

URI与URL的区别

1.2.1.2 Request请求的格式

客户端发送一个HTTP请求到服务器的请求消息格式为：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成。

请求行以一个方法GET或POST开头，以空格分开，后面跟着请求的URI和协议的版本。详细解释如下
GET /linhaifeng/p/7278389.html HTTP/1.1
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


#第一部分：请求行，用来说明请求类型,要访问的资源以及所使用的HTTP版本.
GET说明请求类型为GET
/linhaifeng/p/7278389.html为要访问的资源
该行的最后一部分说明使用的是HTTP1.1版本

#第二部分：从第二行起为请求头部，紧接着请求行（即第一行）之后，用来说明服务器要使用的附加信息
HOST将指出请求的目的地.
User-Agent,服务器端和客户端脚本都能访问它,它是浏览器类型检测逻辑的重要基础.该信息由你的浏览器来定
义,并且在每个请求中自动发送等等

#第三部分：空行，请求头部后面的空行是必须的
即使第四部分的请求数据为空，也必须有空行。

#第四部分：请求数据也叫主体，可以添加任意的其他数据。
这个例子的请求数据为空。只有POST方法才有请求体，可以用浏览器登录一个网站，输错账号密码来抓取POST请求
POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; 
.NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley

示例：view source结果

1.2.1.3 HTTP请求方法

#1、Http协议定义了很多与服务器交互的方法（了解）
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。

#2、了解下各个方法的大致意义
GET     请求指定的页面信息，并返回实体主体。
HEAD     类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头 # 可以通过head得知服务器
是否“有/存在”所求资源
POST     向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请
求可能会导致新的资源的建立和/或已有资源的修改。
PUT     从客户端向服务器传送的数据取代指定的文档的内容。
DELETE      请求服务器删除指定的页面。
CONNECT     HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS     允许客户端查看服务器的性能。
TRACE     回显服务器收到的请求，主要用于测试或诊断。

#3、一个URL地址用于描述一个网络上的资源，而HTTP中最基本的四个方法GET, POST, PUT, DELETE就对应着
对这个资源的查，改，增，删4个操作。

#4、 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.

1.2.1.4 get&post区别

#1、区别1: 参数的组织方式不同
GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，
例 如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是
英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得
出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。

POST方法是把提交的数据放在HTTP包的Body中.
因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变

#2、区别2：传输数据大小限制
首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。

而在实际开发中存在的限制主要有：
GET:特定浏览器和服务器对URL长度有限制，例如 IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，
如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系 统的支持。
因此对于GET提交时，传输数据就会受到URL长度的 限制。

POST:由于不是通过URL传值，理论上数据不受 限。但实际各个WEB服务器会规定对post提交数据大小进行限
制，Apache、IIS6都有各自的配置。

可以简单总结为：
GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制.
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值。


#3、区别3：安全性
POST的安全性要比GET的安全性高。比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录
页面有可能被浏览器缓存；(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之
外，使用GET提交数据还可能会造成Cross-site request forgery攻击

GET与POST的区别

两种请求方式get&post-图

get请求：检查/f12-network-header-requestmethod，flush 网页
响应状态码：status code: 200 OK

post请求：clear-1.network-2.header-3.?login-4.requestmethod，登录用户测试

请求体-图

看到的并不是内部真实数据，密码也是加密后的；要查看源(view source)，才得到原本数据

1.2.2 响应response

服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息Response

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

响应报头↑

响应正文↑

-响应详解

#第一部分：状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。
第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）

#第二部分：消息报头，用来说明客户端要使用的一些附加信息，
Date:生成响应的日期和时间；
Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8

#第三部分：空行，消息报头后面的空行是必须的
报头\r\n\r\n响应体   #\r回车 \n空行

#第四部分：响应正文，服务器返回给客户端的文本信息。
空行后面的html部分为响应正文。

-响应状态码

http://www.runoob.com/http/http-status-codes.html

# 响应状态码
  用一串简单的数字来表示一些复杂的状态或者描述性信息
    如：404 请求资源不存在
  http的响应状态码有五类：
	1xx：服务端已经成功接收数据正在处理，可以继续提交额外数据
    2xx：服务端成功响应了你请求的数据（200 OK请求成功）
    3xx：重定向（如：未登录状态下想访问一个需要登录之后才能看的页面，会自动跳转到登录页面）
    4xx：
    	400 Bad Request//客户端请求有语法错误，不能被服务器所理解
		401 Unauthorized//请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
		403 Forbidden//服务器收到请求，但是拒绝提供服务(当前请求不合法或者不符合访问资源的条件(无权限))
    	404 Not Found//请求资源不存在
    5xx：服务器内部错误
    	500 Internal Server Error//服务器发生不可预期的错误
		503 Server Unavailable//服务器当前不能处理客户端的请求，一段时间后可能恢复正常

1.3 HTTP协议完整工作流程

HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

1、客户端连接到Web服务器

一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。例如，http://www.bilibili.com

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 文本并显示内容;

1.4 HTTP协议四大特性总结

'''四大特性'''
	1.基于请求响应/灵活
	HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
    
    2.基于TCP/IP作用于应用层之上的协议/简单快速
	http协议本身不建立连接，客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、
	HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序
	规模小，因而通信速度很快。
    
    3.无状态：
      -不保存用户的信息
        eg.同一个人来了n多次，每次都当作初见
        由于http协议是无状态的，后续出现了一些专门用来记录用户状态的技术
        如：cookie\session\token...
    4.无/短链接
      请求来一次响应一次，之后就没有任何链接和关系了
        补充：长连接，双方建立连接之后默认不断开 websocket(像socket但它是应用层的)

补充：cookie&session&token

https://www.cnblogs.com/Dominic-Ji/p/10886902.html#_label1

cookie

https://blog.csdn.net/zhangquan_zone/article/details/77627899

# cookie的诞生
由于HTTP协议是无状态的，而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储web中的状
态信息，以方便服务器端使用。比如判断用户是否是第一次访问网站。

# 1）最初的cookie处理过程
1.用户第一次登录，将用户名密码发送给服务端
2.服务端向客户端发送cookie
3.浏览器将cookie保存
4.之后每次http请求浏览器都会将cookie发送给服务器端

Cookie是由服务器端生成，发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件
内，下次请求同一网站时就发送该Cookie给服务器

session

https://blog.csdn.net/weixin_42217767/article/details/92760353

token

原文链接：

https://mp.weixin.qq.com/s?__biz=MjM5ODI5Njc2MA==&mid=2655815061&idx=1&sn=1fb22647e8596fdbb60ddea712ad3434&chksm=bd74c8428a0341548f6991cea7b7c0fb1536b3ccbf54fda1e88a0de042624daf6d009b0d4fcd&mpshare=1&scene=1&srcid=0911qYGiJJF0CHoESNO527dB&sharer_sharetime=1599807604082&sharer_shareid=fda58c14403b54e27e5c185f331ba56c&exportkey=AUSRV9RCGGu%2BVgjxkl48wHc%3D&pass_ticket=fFK0rvMeTE3EvGfsw%2FGZZV6BFg2Y5D%2FMdw3YfNBq513OIiRwgr3Zjmlng0kmTyld&wx_header=0#rd

抓取链接：

https://mp.weixin.qq.com/s?__biz=MjM5ODI5Njc2MA==&mid=2655815061&idx=1&sn=1fb22647e8596fdbb60ddea712ad3434&chksm=bd74c8428a0341548f6991cea7b7c0fb1536b3ccbf54fda1e88a0de042624daf6d009b0d4fcd#rd

- HTTP连接&部分HTML演示

1）启动服务端
import socket


server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)


while True:
    conn,addr = server.accept()
    while True:
        print(data.decode('utf-8'))
        print(data)
        conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
        # 只要发送以上请求，就能被浏览器识别，1.1是http协议版本
        # 注意要两个\r\n
        # conn.send(b'<h1>hello world</h1>')
        # 读取文件内容再返回
        with open('a.txt','rb') as f:
            conn.send(f.read())

    conn.close()
    
'''a.txt'''
<h1>hello world</h1>
# <a href="网页地址">click me to bilibili!</a>
<a href="https://www.bilibili.com/">click me to bilibili!</a>
# <img src="图片链接地址" />
<img src="https://img.cheerfun.dev/c/540x540_70/img-master/img/2020/09/06/03/09/46/84183459_p0_master1200.jpg" />
    
2）浏览器端连接
打开浏览器，在地址栏输入：127.0.0.1:8080
    协议和端口可省略，默认自动补全http和8080
    但ip地址一定要，为方便记忆，就有了域名

2、HTML 简介

超文本标记语言（使用到了大量的链接）
- 让浏览器渲染出写的页面，就必须遵循HTML语法
- 浏览器看到的页面，内部都是HTML代码
- HTML就是网页的骨架

网页基础内容
html:5 + Tab  --html5
html:xt + Tab  --htmlx

文字：<h1>hello world</h1>
网址链接：<a href="网页地址">click me to ......!</a>
图片：<img src="图片链接地址" />

2.1 HTML语言

https://www.cnblogs.com/linhaifeng/articles/8982242.html

HTML就是书写网页的一套标准

语法：

<标签名 属性1=“值1” 属性2=“值2” ......>内容部分</标签名>
<标签名 属性1=“值1” 属性2=“值2” ....../>
p.s.
当标签内，属性名与属性值相同时，可简写一个属性名

1）html注释（代码之母），注释不能插入代码中
<!--当行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

由于HTML代码非常杂乱无章且很多，我们习惯用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有HTML代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->

注意：
1、注释中可以直接使用回车换行
2、HTML注释不支持嵌套
3、HTML注释不能写在HTML标签中

2）css/js注释
1. /*单行注释*/
2. // 注释

/*
多行注释1
多行注释2
*/

2.2 HTML文档结构

<html>
    <head></head>:head 内的标签 不是给用户看，而是定义一些配置给浏览器看
    <body></body>:body 内的标签 写什么浏览器就渲染什么，是给用户看的
    
</html>

p.s. 文件的后缀名是给用户看的，只不过对应不同的

文件后缀名有不同的软件来处理，并添加很多功能

pycharm专业版中可直接创建.html后缀的文件

myfirsthtmfile.html

<!DOCTYPE html>  <--声明文档，声明是html文件-->
<html lang="en">  <--语言是英文-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
    
    
注意：HTML代码没有缩进格式，可以全部写在一行，但是习惯缩进显示代码

2.3 两种打开HTML文件的方式

找到文件所在位置右键选择浏览器打开
在pycharm内部，集成了自动调用浏览器功能，右上角一排浏览器图标，选择电脑上已安装了的对应浏览器（推荐谷歌）

2.4 标签的分类

1)双标签
<h1></h1>
<a href=""></a>

2)单标签（自闭合标签）
<img/>

-1 head内常用标签

https://www.cnblogs.com/linhaifeng/articles/8982675.html

书写html代码时，只需要书写标签名，Tab键自动补全

<!-----------------非meta标签---------------------->
#1、网页标题,图标为ico文件
<title>Title</title>
<link rel="icon" href="https://www.baidu.com/favicon.ico">

#2、定义内部样式
<style>
        h1 {
            color: cornflowerblue;
        }
    </style>  # 内部用来书写css代码

<!-------------------css&js--------------------->
#3、弹窗
<script>
        alert(123)
</script>  # 内部用来书写js代码

#4、引入外部样式文件
# 引入外部js文件,文件路径可以是本地也可以是网络的
<script src="xx.js"></script>	
# 引入外部css样式
<link rel="stylesheet" href="文件.css">  # 用来引入外部css文件

<!-----------------meta相关---------------------->
了解：
<meta>的功能很多，主要是告诉浏览器要干什么

#1、指定字符集；注意此处为页面输出编码，存HTML文档时是写入编码
<meta charset="gbk">

#2、几秒后跳转，不指定网页就是几秒后刷新
<meta http-equiv="refresh" content="2;URL=https://www.bilibili.com">
<!--2秒后的;号也可以是,号-->
告诉浏览器 刷新 2秒之后跳转到一个网址

#3、IE渲染，兼容问题
<meta http-equiv="x-ua-compatible" content="IE=edge">
告诉IE以最高级模式渲染文档

#4、关键字：有助于SEO & 页面描述
<meta name="keywords" content="关键字,关键字2,...">
<meta name="description" content="描述文字">  <!--有description必须跟在keywords后面-->
网页的描述性信息，会显示在搜索页展示
只要搜索时输入关键字之一，都能搜到这个网页

示例：

<!DOCTYPE html>  <--声明文档，声明是html文件-->
<html lang="en">  <--语言是英文-->
<head>
    <meta charset="UTF-8">
    <title>我的标签合集</title>
    <style>
        h1 {
            color: cornflowerblue;
        }
    </style>
    <script>
        alert('欸嘿嘿')
    </script>
<!--    <script src="myjs.js"></script>-->
<!--    <link rel="stylesheet" href="mycss.css">-->
<!--    <meta http-equiv="refresh" content="2;URL=https://www.bilibili.com">-->
<!--    <meta name="keywords" content="">-->
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

-2 body内常用标签

https://www.cnblogs.com/linhaifeng/articles/8982967.html

基本标签

<h1></h1>  headline标题标签 1~6级标题
<!--h1标签慎用，相当于文章大标题，一个界面只能出现一个（出于SEO考虑，搜索引擎会使用标题将网页的结
构和内容编制索引）-->

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

<p></p>  paragraph段落标签，独占一行
<br>  换行
<hr>  水平分割线

<!--
下级标签不能嵌套上级标签，如果嵌套了，会被自动当作确实标签尾，分别补上两个“/>”，也就被自动隔开
-->

示例：
<body>
    <h1>i am h1</h1> 
    <h2>i am h2</h2>
    <h3>i am h3</h3>
    i am txt
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>

    <p>好诗好诗</p>
    <br>
    <p>好诗好诗</p>
    <hr>
    <p>好诗好诗</p>
</body>
</html>

-3 HTML标签语义化

body中的标签是会显示到浏览器窗口中的，body内的标签只有一个作用就是用来标记语义的，语义指的是从字面
意思就可以理解被标记的内容是用来做什么的

虽然不同的标签会有不同的显示样式，但我们一定要强制自己忘记所有标签的显示样式，只记它的语义。
那些只用来修改样式的标签将会被淘汰掉

以下是新的语义化标签：

		strong == b

        ins == u

        em == i

        del == s

新的标签是有语义的，而老的只是单纯的添加样式（这是CSS干的事）
        strong的语义：定义重要性强调的文字
        ins的语义（inserted）：定义插入的文字
        em的语义（emphasized）：定义强调的文字
        del的语义（deleted）：定义被删除的文字

标签分类2

分析单个元素：ctrl+shift+c/检查-左上角框内箭头

# 1） 块儿级标签：独占一行
	h1~h6 、p、div
  特点：
	1.块儿级标签可以修改长宽，行内标签不可以，改了也不会变化
    2.块儿级标签内部可以嵌套任意的块儿级标签和行内标签
      但是p标签虽然是块儿级标签，却只能嵌套行内标签，不能嵌套块儿级标签
        就算套了，浏览器也会自动解开（浏览器是面向用户的，不会轻易报错，报了也不会展示给用户）
    总结：
    	只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内（HTML书写规范，不遵守也不会有问题）

# 2） 行内标签
	i u s b
    1.行内标签不能嵌套块儿级标签，但是可以嵌套行内标签，但一般不用

字符实体

http://tool.chinaz.com/Tools/HtmlChar.aspx

<!--注释：实体名称对大小写敏感！-->

#1、在HTML中对空格／回车／tab不敏感，会把多个空格／回车／tab当作一个空格来处理

#2、字符实体指的是
在HTML中
有的字符是被HTML保留的比如大于号小于号
有的HTML字符，在HTML中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西想显示出来就必须
通过字符实体，如下

1 空格 ：&nbsp;
	要几个空格就写几个这个符号，单纯自己space键空格最大也只有1格

2 大于号：&gt; & 小于号：&lt;
	当“小于号，大于号 <>” 和 标签<>撞了，就不能这么写

3 and符&  ：&amp;

4 羊角符￥：&yen;

5 版权符©：&copy;

6 商标®：&reg;

常用标签

检查单个元素，一般大小比较大的就是块级，小的行内

<body>
    <div>div</div>  块级标签
	<span>span</span>	行内标签
</body>

上述两个标签在构造页面初期最常使用，一般先用div和span占位之后再做调整，尤其div使用非常频繁
--div 可以看作一块区域，也就意味着用div提前规定所有区域
之后再往该区域内部填写内容即可
--而普通的文本先用span标签

img标签

# 图片标签
<img src="" alt="">

src=""
	1.图片的路径，可以是本地的也可以是网上的
	2.url		自动朝该url发送get请求获取数据

alt=""
	-当图片加载不出来的时候，给出的图片描述信息

title=""
	-当鼠标悬浮到图片上后 自动展示的提示信息

查看imag 宽度×高度 
width=""
	-图片宽度
height="xxpx"
	-图片高度，px像素
当只修改高度宽度中的一个的时候，另一个会等比例缩放
若修改两个参数，不考虑比例，则图片肯失真

a标签

#1、链接标签
<a href="链接地址" target="_blank">标签名</a>
'''
-a标签没有被点击过时，是蓝色,点击过后变成紫色
-target默认"_self"在当前页跳转，"_blank"为新标签页跳转

href
	放的是url，用户点击就会跳转到该网址
	若不指定地址，就刷新页面，回到最上

#2、假链接
<a href=""></a>  刷新，跳转到当前页面
<a href="#"></a> 或者，就会跳转到最上，且不刷新
<a href="javascript:"></a> 未想好链接效果，js占位
	但现在一般都会加一个滚动过度效果

<!--跳转到标签/页面的锚点-->
#（1）跳转设置
<p>
    <a href="#p1" style="color: cornflowerblue;font-size:18px">一、第一点</a>
    # 没有text-decoration:none;默认有下划线
</p>
<p>
    <a href="#p8" style="color: cornflowerblue;text_decoration:none;font-size:18px">一、第八点</a>
</p>

#（2）目标标签(name/id都可，一般不用name，id页面内独一无二，要省着用)
<a href='' name="p1"></a>
<p style="color:red">
    11111111111
</p>
<a href='' id="p8"></a>
<p style="color:green">
    88888888888
</p>

实例：
<body>
    <p>
    <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">一、第一点</a>
</p>

<p>
    <a href="#p8" style="color: darkseagreen;text-decoration:none;font-size:18px">八、第八点</a>
</p>

<div style="height: 1000px;background-color: darkolivegreen"></div>
<a href="" name="p1"></a>
<p style="color: red">1111111111</p>
<div style="height: 1000px;background-color: cadetblue"></div>
<a href="" name="p8"></a>
<p style="color: green">8888888888</p>
<p>..........</p>
<p>..........</p>
   ..........

<a href="">跳到首页</a>
<a href="#">跳到首页</a>
</body>

补充：a标签模拟get提交数据

# get 方法是直接将数据放到url中，即带问号的虚拟地址+参数
https://image.baidu.com/search/index?tn=baiduimage&word=baidu
    
# 而a标签可以放入url链接地址
# 所以只要把链接地址作为href插入即可
<a href="https://image.baidu.com/search/detail?"></a>

2.5 标签具有的两个重要书写

1. id值/name参数
	类似于标签的身份证号，同一个html页面上id值不能重复
2. class值
	类似于面向对象里的继承，一个标签可以继承多个class值
    
# 标签既有自带的，也有自定义的属性(如：username,password)
<p id="d1" class="c1" username="eve" password="123"></p>

一、第一点

八、第八点

1111111111

8888888888

..........

跳到首页
 跳到首页

```

补充：a标签模拟get提交数据

# get 方法是直接将数据放到url中，即带问号的虚拟地址+参数
https://image.baidu.com/search/index?tn=baiduimage&word=baidu
    
# 而a标签可以放入url链接地址
# 所以只要把链接地址作为href插入即可
<a href="https://image.baidu.com/search/detail?"></a>

2.5 标签具有的两个重要书写

1. id值/name参数
	类似于标签的身份证号，同一个html页面上id值不能重复
2. class值
	类似于面向对象里的继承，一个标签可以继承多个class值
    
# 标签既有自带的，也有自定义的属性(如：username,password)
<p id="d1" class="c1" username="eve" password="123"></p>

Mr.E5

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端_http协议_html语言head&body基本介绍和用法

0 软件开发流程web开发流程图解0.5、前端-介绍概念（广泛）：任何与用户直接打交道的操作界面称之为前端后端：不直接与用户打交道，给幕后操作者用（一堆代码）学习要求：看得懂基本前端代码，能搭建简单页面# 前端基础HTML\CSS\JavaScriptHTML——内容：网页的骨架，没有任何样式CSS——外观：给骨架添加各种样式，变好看JavaScript——动作：控制网页动态效果# 前端框架:基于现成的页面样式进行修改bootstrap\JQuery\Vue 提前封装好了
复制链接

扫一扫