1.HTTP协议
超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。
在浏览器地址栏键入URL，按下回车之后会经历以下流程：
1. 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
2. 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
3. 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
4. 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
5. 释放 TCP连接;
6. 浏览器将该 html 文本并显示内容;
1.1 HTTP协议特性
1）支持客户/服务器模式。
2）简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
3）灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
4）无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
5）无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
1.2 HTTP请求协议与响应协议
- 请求协议
请求首行 GET： URL路径？数据 POST：数据在请求体
请求头
请求体
import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('127.0.0.1', 8000)) sock.listen(3) while True: conn, addr = sock.accept() data = conn.recv(1024) print("has data:", data.decode()) conn.sendall("HTTP/1.1 200 ok \r\n\r\n Hello world!".encode()) conn.close()
has data: GET / HTTP/1.1 Host: 127.0.0.1:8000 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15 Accept-Language: zh-cn Accept-Encoding: gzip, deflate Connection: keep-alive # 空数据 has data: GET /favicon.ico HTTP/1.1 # 图标请求 Host: 127.0.0.1:8000 Connection: keep-alive Accept: */* User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15 Accept-Language: zh-cn Referer: http://127.0.0.1:8000/ Accept-Encoding: gzip, deflate - 响应报文
HTTP/1.1 200 OK
协议版本 状态码 状态码的原因
响应首部字段
主体即显示内容
2.HTML概述
- HTML 超文本标记语言，也叫web页面
- HTML不是编程语言，只是标记语言
2.1HTML标准结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2.2 标签语法
<h1> 内容 </h1> 闭合标签
<img src=''/> 自闭合标签
块级标签（block）--独占一行
h,div
内联标签（inline）--按内容占位
br,b,strong,i,em,del,span,a
原则上：
块级标签可以嵌套块级和内联
内联标签只可以嵌套内联
<标签名 属性1="属性值" 属性2="属性值"...>内容部分</标签名>
2.3 基本标签
<!--标题标签-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h5>标题6</h5>
<!--换行标签-->
本是后山人 <br>
偶做前堂客。<br>
醉舞经阁半卷书，<br>
坐井说天阔。<br>
<!--文本格式化标签-->
not Bold
<b>Bold</b>
<strong>Bold</strong>
<i>inline</i>
<em>inline</em>
<del>划线</del>
<!--特殊符号-->
word tex
2.4 div标签和span标签
<div></div> 块级标签
<span></span> 内联标签
这二者都是无样式的标签
2.5 超链接标签
<a href="https://www.baidu.com">点击此处进入百度</a>
<a href="本地标签.html">本地资源</a>
target="_blank"打开新窗口
title="内容" 悬停显示内容
客户端（游览器）向服务端发送请求的形式：
- 地址栏请求 get
- 超链接标签 get
- form表单 get，post
- ajax
2.6 锚点应用
<a href="#c1">第1章</a><br>
<a href="#c2">第2章</a><br>
<a href="#c3">第3章</a>
<span id="b1">返回顶部</span>
<div id="c1">第一章内容<a href="#b1">返回顶部</a></div>
<div id="c2">第二章内容<a href="#b1">返回顶部</a></div>
<div id="c3">第三章内容<a href="#b1">返回顶部</a></div>
2.7 img标签
<img height="300px" width="500" src="background_pic.jpg" title="背景">
属性:
src:资源所在位置
height,width:高度和宽度
title:悬停时显示内容
border:边框粗细
alt:图片无法加载显示内容
2.8 列表
<!--unordered list 无序列表-->
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
<!--order list 有序列表-->
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ol>
2.9 表单标签
表单主要用来收集用户信息，是web中间信息沟通的桥梁
表单三要素：
- 表单标签
包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息 - 表单域
包含文本库，密码框，隐藏框等表单控件 - 表单按钮
提交表单
<form action="" method="" enctype=""></form>
action代表域名
method代表请求方式
enctype代表打包方式
数据打包格式
Content_Type:multipart/form-data 发送文件
Content_Type:application/x-www-form-urlencoded
Content_Type:json
部分标签的属性：
- 明文：input+text
- 密文：input+password
- 复选框：input+checkbox
- 单选框：input+radio
- 日期：input+date
- 下拉菜单：select+option
- 多行文本框：textarea
- 按钮：input+button
- 重置:input+reset
- label属性:label+for
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
