初始http协议和html

内容概要

　　一、http协议的四个特性

　　二、请求和相应格式

　　三、html基础标签分类以及使用

　　四、表格标签和表单标签 

 

1、http协议的四个特性

　　-基于请求和响应

　　　　

　　-基于TCP/IP的位于应用层之上的一个协议（规则）

 

　　-无状态

　　　　不会保存用户的信息

　　　　由于http协议是无状态的，因此出现了一些专门用于存储用户信息的技术

　　　　　　比如cookie，session，token等

 

　　-无连接（也叫短链接） 

　　　　当你使用浏览器访问一个网页，浏览器与服务端并不是一直保持连接（那样会消耗服务端资源），服务端会基于浏览器的请求响应一次，发送一次数据，之后断开连接（也可能存在响应时间，毕竟是TCP）。浏览器拿到数据将会按照数据中的html代码自动渲染。

 

2、请求和响应格式

　　浏览器发送的请求的格式

　　　　-请求首行

　　　　　　包括（http协议版本、请求的方式）

　　　　-请求头

　　　　　　一堆k、v键值对（发送给服务端的客户端相关信息）

　　　　-\r\n  # \r\n不能省略

　　　　-请求体（get请求方式没有请求体）

　　　　　　一些数据

 

　　请求方式

　　　　-get 向服务端发送请求表示我要拿到数据，服务端响应

　　　　　　get方式发送的请求没有请求体

　　　　　　get方法可以传参数，参数跟在url后，以?开头参数名1=参数值1&参数名2=参数值2...

　　　　-post 先向服务端提交数据，之后得到响应

　　　　　　post方式有请求体，其中存放的是提交的数据中敏感的部分

 

　　服务端响应的格式

　　　　-响应首行

　　　　　　包括（http协议版本、响应状态码）

　　　　-响应头

　　　　　　一堆k、v键值对

　　　　-\r\n  # \r\n不能省略

　　　　-响应体

　　　　　　提交给浏览器的数据（html代码）

 

　　响应状态码

　　　　通过响应状态码，可以比较直观（前提是必须了解不同响应状态码表示的含义）的得到本次请求是否得到正确的响应，成功了还是失败了，发生了什么异常

　　　　1xx  表示请求已经接受，数据正在处理，响应还没有发送，这种情况比较少见

　　　　2xx  表示服务端成功响应了你的请求（200 OK 表示请求成功）

　　　　3xx  表示因权限等问题发生重定向，比如原本想看一部电视剧，结果因为不是vip，没有跳转到视频界面，而跳转到充值界面就是发生了重定向

　　　　4xx  表示响应错误（404 表示请求的资源不存在， 403表示请求不合法）

　　　　5xx  表示服务端发生内部错误

 

　　最简单的服务端

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
    conn, addr = server.accept()
    res = conn.recv(1024)
    print(res)
    print(isinstance(res, bytes))
    conn.send(b'<h1>hello world!</h1>')

　　在浏览器中输入127.0.0.1:8080

　　结果在pycharm成功接收到请求信息，不过却有三条

b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nsec-ch-ua: "Microsoft Edge";v="93", " Not;A Brand";v="99", "Chromium";v="93"\r\nsec-ch-ua-mobile: ?0\r\nsec-ch-ua-platform: "Windows"\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nSec-Fetch-Site: none\r\nSec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\nSec-Fetch-Dest: document\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
True
b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nsec-ch-ua: "Microsoft Edge";v="93", " Not;A Brand";v="99", "Chromium";v="93"\r\nsec-ch-ua-mobile: ?0\r\nsec-ch-ua-platform: "Windows"\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nSec-Fetch-Site: none\r\nSec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\nSec-Fetch-Dest: document\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
True
b'GET / HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nCache-Control: max-age=0\r\nsec-ch-ua: "Microsoft Edge";v="93", " Not;A Brand";v="99", "Chromium";v="93"\r\nsec-ch-ua-mobile: ?0\r\nsec-ch-ua-platform: "Windows"\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nSec-Fetch-Site: none\r\nSec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\nSec-Fetch-Dest: document\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
True

　　试了一下，如果在一个空白网站输入ip和端口

　　就会收到三条请求

　　这时候再刷新，就只会得到一条请求

 

　　单条请求

"""
请求首行
b'GET / HTTP/1.1\r\n
请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
Cache-Control: max-age=0\r\n
sec-ch-ua: "Microsoft Edge";v="93", " Not;A Brand";v="99", "Chromium";v="93"\r\nsec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "Windows"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n
这个一定不能省略
\r\n'
"""

 

　　由于服务端发送的数据不符合http协议，浏览器在接收到数据的时候无法解析数据，因此出现了错误

 

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
    conn, addr = server.accept()
    res = conn.recv(1024)
    print(res)
    print(isinstance(res, bytes))
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    conn.send(b'<h1>hello world!</h1>')

　　加入响应首行之后浏览器成功解析了

 

　　url 统一资源标记符（url理解为网址好了）

 

3、html基础标签分类以及使用

　　html文件格式

<!DOCTYPE html>  # 声明这是一个html文件
<html lang="en">  # 生命语言为英语？
<head>  # 设置
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>  # 网页真正内容
</body>
</html>

 

　　head常用标签

　　　　<title>标签  网站名称</title>

　　　　<style></style>

　　　　<link rel="stylesheet" href="">  外部引入层叠样式表

　　　　<script></script>  javascript代码，可以在html中书写，也可以从外部引入本地或者网上的javascript脚本

　　　　<script src="testjs.js"></script>

　　　　<meta charset = "utf-8"> 设置编码集

　　　　<meta name = "keywords" content = "搜索关键字">

　　　　<meta name = "description" content = "网站的描述信息">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #background1{
            background-color:yellow;
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div id = 'background1'></div>
</body>
</html>

 

　　css外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="testCSS.css">
</head>
<body>
    <h1>hello&nbsp;world</h1>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("hello world")
    </script>
</head>
<body>
</body>
</html>

 

　　js外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="testjs.js">
    </script>
</head>
<body>
</body>
</html>

 

　　body常用标签

　　　　h1~h6 标题标签

　　　　i 斜体

　　　　u 下划线

　　　　b 粗体

　　　　s 删除线

　　　　br 换行

　　　　hr 分割线

　　　　p 段落

　　　　ul 无序列表

　　　　ol 有序列表

　　　　dl 标题列表

　　　　a 超链接标签

　　　　img 图片标签

　　　　div 块级空标签

　　　　spawn 行内空标签

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
    <u>下划线</u>
    <b>粗体</b>
    <s>删除线</s>
    <i>斜体</i>
    <br>换行
    <hr>分割线
    <p>一首藏头诗</p>
    <p>一首藏头诗</p>
    <p>一首藏头诗</p>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>
    <ol>
        <li>a第一行</li>
        <li>a第二行</li>
        <li>a第三行</li>
    </ol>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
    <img src = "">
    <a href = "http://www.baidu.com">百度</a>

</body>
</html>

 

　　ul标签

　　　　使用ul>li*3后按tab键可以在pycharm中快速创建含有三行的无序列表

　　　　type属性，设置每行的前一个符号：none表示没有，circle表示空心圆，square表示正方形

 

　　ol标签

　　　　type属性，设置每行的前一个符号：A表示字母开头，1表示数字开头，I表示罗马数字开头

　　　　start属性，设置初始值

 

　　img标签

　　　　src属性，设置图片的保存路径，可以是本地的，也可以是网上的

　　　　alt属性，设置图片加载失败时，显示的文本

　　　　title属性，设置鼠标悬挂图片时，显示的文本

　　　　设置img的height或者width属性值时，另外一个值会等比例的同时改变

 

　　a标签

　　　　href属性，打开的路径

　　　　target属性，打开的方式：_self当前网页变化，_blank另开一个新的网页

　　a标签的瞄点功能

　　　　在这个网页中实现(点击内容概要中的标题，自动跳转到相应内容上)

　　　　通过a标签以及id实现

 

　　div和spawn空标签

　　　　它们用于搭建网站的布局

 

　　标签分类一

　　　　双标签

　　　　　　<h1></h1>,<p></p>等

　　　　单标签（自闭合标签）

　　　　　　<img>等

 

　　标签分类二

　　　　块级标签

　　　　　　自生大小是固定的，不受内容的限制，独占一行

　　　　　　<div> <p> <h1>等

　　　　行内标签

　　　　　　自生大小是随着内容的变化而变化的，不独占一行

　　　　　　<spawn> <u> <i> <s> <b>等

　　　　特别的：除了p标签外，所有块级标签可以嵌套任意行内标签，但是p标签只能嵌套行内标签，行内标签可以嵌套行内标签，但是一般不知么做

 

　　特殊符号

　　　　html不是编程语言，而是一种标记语言，是一套供浏览器使用的数据识别和转化规则

　　　　像<，>等符号就有特殊意义，如果我要在网页中显示出<img>该如何做到呢

 

　　　　这是就需要使用到特殊符号

　　　　　　&nbsp;  浏览器会将此转化为网页中的空格

　　　　　　&gt;  大于号

　　　　　　&lt;  小于号

　　　　　　&amp; &符号

　　　　　　&yen;  人民币的符号（在键盘上找不到）

　　　　　　&copy; 版权符号

　　　　　　&reg; 商标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>&lt;img&gt;</p>
</body>
</html>

View Code

 

4、表格标签和表单标签

　　表格标签<table>

　　　　表格标签一般在展示数据时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>  <!--划定一个表格-->
    <thead>  <!--表格的开头，题目部分-->
        <tr>  <!--tr表示一行-->
            <th>姓名</th>  <!--th单元格，单元格内部文本加粗-->
            <th>年龄</th>  <!--th单元格，单元格内部文本加粗-->
            <th>工作</th>  <!--th单元格，单元格内部文本加粗-->
            <th>性别</th>  <!--th单元格，单元格内部文本加粗-->
        </tr>
    </thead>
    <tbody>  <!--表格的内容部分-->
    <tr>
        <td>李狗蛋</td>  <!--td单元格，单元格内的文本是正常字体-->
        <td>28</td>
        <td>演员</td>
        <td>男</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>犯罪</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>18</td>
        <td>教师</td>
        <td>女</td>
    </tr>
    <tr>
        <td>张大炮</td>
        <td>34</td>
        <td>开炮</td>
        <td>男</td>
    </tr>
    </tbody>
</table>
</body>
</html>

　　table标签的几个属性

　　　　border边框属性，设置不同的边框

　　　　cellpadding属性，单元格内文本与内边框的间隔

　　　　cellspacing属性，内边框与外边框的间隔

　　　　rowspan属性，占据行数

　　　　colspan属性，占据列数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border = '2' cellpadding="5", cellspacing="5">  <!--划定一个表格-->
    <thead>  <!--表格的开头，题目部分-->
        <tr>  <!--tr表示一行-->
            <th>姓名</th>  <!--th单元格，单元格内部文本加粗-->
            <th>年龄</th>  <!--th单元格，单元格内部文本加粗-->
            <th>工作</th>  <!--th单元格，单元格内部文本加粗-->
            <th>性别</th>  <!--th单元格，单元格内部文本加粗-->
        </tr>
    </thead>
    <tbody>  <!--表格的内容部分-->
    <tr>
        <td>李狗蛋</td>  <!--td单元格，单元格内的文本是正常字体-->
        <td>28</td>
        <td>演员</td>
        <td>男</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td colspan = "2">犯罪</td>
<!--        <td>男</td>-->
    </tr>
    <tr>
        <td>李四</td>
        <td>18</td>
        <td>教师</td>
        <td rowspan = "2">女</td>
    </tr>
    <tr>
        <td>张大炮</td>
        <td>34</td>
        <td>开炮</td>
<!--        <td>男</td>-->
    </tr>
    </tbody>
</table>
</body>
</html>

View Code

 

　　表单标签

　　　　表单标签是很重要的，它可以将用户的数据（输入的数据，选择的数据提交给服务端）

　　　　input标签（input是单标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">  <!--划定一个表单，action表示数据提交的位置-->
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <!--如果这样使用单选项会出现错误，需要给使用name属性指定属性名-->
        <p>gander:
            <input type="radio" name="gander" checked = "checked">男 <!--设置为默认勾选，可以简写为checked-->
            <input type="radio" name="gander">女
            <input type="radio" name="gander">其它
        </p>
        <!--多选项-->
        <p>hobby:
            <input type="checkbox" checked>读书
            <input type="checkbox">学习
            <input type="checkbox">看电影
        </p>
        <!--日期选项-->
        <p>birthday:
            <input type="date">
        </p>
        <p>
            <input type="submit">提交按钮
            <input type="reset">重置表单中数据
            <input type="button">普通的按钮，没有什么功能
            <input type="submit" value="注册">  <!--value可以用于设置初始值或者更改显示文本-->
        </p>
    </form>
</body>
</html>

　　补充：label标签，常和input标签一起使用，使文本关联输入框

　　　　label关联input的两种方式

　　　　1、通过lable嵌套input

　　　　　　点击浏览器的username文本，就可以自动跳转到输入框

<body>
    <label>username : <input type="text" name="username"></label>
</body>

　　　　2、通过for属性关联input的id属性

<body>
    <label for="username_id">username : </label>
    <input type="text" name="username" id="username_id">
</body>

 

　　form中的action表示数据提交到的网址

　　　　不填默认提交到当前网址

　　　　使用完整url提交到响应网站中

　　　　可以添加后缀，将当前url与后缀拼接，得到新的url，将数据提交到新的url中

　　另外在form中指定

　　　　method，method表示提交的方式（默认为get）

　　　　enctype属性，设置为formdata，服务器可以接受到文件数据

 

　　关于name，由于是提交数据，那么服务端要如何拿到这些数据，总不能将所有数据不加以区分就一窝蜂地丢给服务端，服务端无法识别这个数据是哪个输入事件出发的。

　　因此使用name，给每个数据取个变量名称，这样服务端拿到数据就知道数据来自哪个部分

 

　　使用get方法提交数据时，数据部分会以?name名称=value值&name2名称=value值的形式在url中提交给服务端

　　使用post方法时，数据不会在url中出现

 

　　通过最简单的服务端拿到了get方式提交数据后的请求

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
    conn, addr = server.accept()
    res = conn.recv(1024)
    print(res)
    print(isinstance(res, bytes))
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')
    conn.send(b'<p><form action="" method="get">')
    conn.send(b'<p><input type="password" name="password"></p>')
    conn.send(b'<p><input type="username" name="username"></p>')
    conn.send(b'<p><input type="submit"></p>')
    conn.send(b'</form></p>')

　　get方式得到的请求

b'GET /?password=1561541&username=1564178 HTTP/1.1\r\nHost: 127.0.0.1:8080\r\nConnection: keep-alive\r\nsec-ch-ua: "Microsoft Edge";v="93", " Not;A Brand";v="99", "Chromium";v="93"\r\nsec-ch-ua-mobile: ?0\r\nsec-ch-ua-platform: "Windows"\r\nUpgrade-Insecure-Requests: 1\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nSec-Fetch-Site: same-origin\r\nSec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\nSec-Fetch-Dest: document\r\nReferer: http://127.0.0.1:8080/\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\n'
True

　　post方式得到的请求，发现数据被保存在了请求体中

b'POST / HTTP/1.1\r\nHost: 127.0.0.1:8081\r\nConnection: keep-alive\r\nContent-Length: 35\r\nCache-Control: max-age=0\r\nsec-ch-ua: "Microsoft Edge";v="93", " Not;A Brand";v="99", "Chromium";v="93"\r\nsec-ch-ua-mobile: ?0\r\nsec-ch-ua-platform: "Windows"\r\nUpgrade-Insecure-Requests: 1\r\nOrigin: http://127.0.0.1:8081\r\nContent-Type: application/x-www-form-urlencoded\r\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.38\r\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\nSec-Fetch-Site: same-origin\r\nSec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\nSec-Fetch-Dest: document\r\nReferer: http://127.0.0.1:8081/\r\nAccept-Encoding: gzip, deflate, br\r\nAccept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6\r\n\r\npassword=37737837&username=78378378'

 

　　补充一个<input type="file">，可以选择文件上传

 

　　除了使用submit提交数据外，使用<button>提交</button>标签也可以提交数据，特别要注意

 

　　其他属性，比如disable，设置输入框不可交互；readonly，输入框内容只读；hidden，隐藏输入框；

placeholder为输入框设置提示信息

<body>
    <input type="text" name="username" placeholder="请输入用户名">
</body>

 

　　select标签，下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <select>
            <option>1</option>
            <option selected>2</option>  <!--使用selected设置默认选中-->
            <option>3</option>
        </select>
        <select multiple>  <!--这里依旧是简写-->
            <option value="">多选项1</option>
            <option value="">多选项2</option>
            <option value="">多选项3</option>
            <option value="">多选项4</option>
        </select>
    </form>
</body>
</html>

　　textare标签

　　文本标签，获取大段文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <textarea cols="10" rows="10">

        </textarea>
    </form>
</body>
</html>

 

***待回顾***