web服务的本质
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK
")
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器窗口输入网址敲回车发生的事：
浏览器发请求--->HTTP协议--->服务端接收请求--->服务端返回响应--->服务端把HTML文件内容发送给浏览器--->浏览器渲染页面
HTTP协议
超文本传输协议，规定了浏览器与服务端之间数据传输的格式
四大特性
1.基于请求响应：一次请求对应一次响应
2.基于TCP/IP作用于应用层之上的协议
3.无状态：不保留客户端状态（来多少次都记不住）
4.无连接：请求来一次 响应一次，之后立马断开连接，两者关系不复存在
数据格式
1、请求格式：
请求首行（标识HTTP协议版本，当前请求方式）
请求头（一大堆k,v键值对）
请求体（携带的数据，并不是一直都有 有时候可能是空的，取决于请求方式）
2、响应格式
响应首行（标识HTTP协议，响应状态码）
响应头（一大堆k，v键值对）
响应体（返回给浏览器页面的数据（展示给用户看） 通常响应体都是html页面）
响应状态码
用一些简单的数字来表示一些复杂的状态或者提示信息
1XX：服务端已经成功接收了你的数据正在处理，你可以继续提交额外的数据
2XX：服务端成功响应 你想要的数据（请求成功200）
3XX：重定向（原本想访问A但是内部自动给你转到了B）例如在访问一个需要登录的页面，窗口会自动调整到登录页面
4XX：请求错误（请求资源不存在 404，请求不合法不符合内部规定权限不够 403）
5XX：服务器内部错误（500）
请求方式
1.get请求：朝服务端要资源（比如在浏览器窗口输入www.baidu.com）
2.post请求：朝服务端提交数据 （登录注册）
HTML标签
超文本标记语言
要想让你的页面能够被浏览器识别并正常显示出来，你所写的页面必须遵循HTML
ps:浏览器只能识别html/xml、css、js
拓展：xml也可以写前端页面， 主要用于odoo框架 书写企业内部管理软件(erp)
HTML注释
注释是代码之母
单行注释：<!--单行-->
多行注释：<!--
多行注释1
多行注释2
-->
补充：由于html页面结构比较复杂，内容比较多，不便于后期的维护修改，通常在写页面的时候 习惯用如下方式来人为划分代码区域
<!--顶部导航条样式开始-->
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
<!--左侧菜单栏样式结束-->
HTML文档结构
<html>
<head></head>:head内存放的内容不是给用户看的，是给浏览器去识别做相应操作的
<body></body>:body内存放的内容是浏览器展示给用户看到的花里胡哨的页面
</html>
HTML文档打开方式
1.pycharm自动调用浏览器打开(推荐)
2.手动查找路径之后选择浏览器打开
标签的分类
1.双标签(
>)2.单标签(自闭和标签
head内常用标签
title:用来显示网页标题
style：用来控制样式的 内部支持写css代码
script：1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码
meta：name属性 keywords、description
body内常用标签
基本标签：
h1~h6:标题标签
s:删除线
b:加粗
u：下划线
i：斜体
p：独占一行
br：换行
hr：分割线
特殊符号：
空格
<p>a大于b a > b </p>
<p>a小于b a < b </p>
<p>a&b a & b </p>
<p>人民币 ¥100000 b</p>
<p>版权标识 © </p>
<p>注册商标 ® </p>
常用标签
div 块儿级标签
span 行内标签
本身没有任何特殊意义
但是这两个用的最多，用来做前期页面的布局
img 图片标签：
-src:
1.可以写一个网站图片的地址
2.写本地的图片地址
3.url(自动朝该url发送get请求要数据) http://网址
-alt：
当图片加载不出来的时候 默认展示的提示信息
-title:
当鼠标悬浮在图片上时展示的提示信息
-width，height：
修改一个，另外一个会等比缩放
若两个都修改，图片失真
a 链接标签：
-href：
放一个url，点击就会跳转到该url所对应的资源
-target：
控制是都在当前页面跳转，默认_self 在当前页面跳转
_blank,在新建页面跳转
-锚点功能：
href不单单可以写url，还能写id值
点击id值会跳转到该id值所对应的a标签所在的位置
列表标签：
无序列表(较多)
<p>无序列表</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
只要页面上出现了比较有规则排列的文本 基本都可以用无序列表来实现
有序列表
<p>有序列表</p>
<ol type="i">
<li>哈哈哈</li>
<li>呵呵呵</li>
<li>嘿嘿嘿</li>
</ol>
标题列表
<p>标题列表</p>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
表格标签******：
展示网站数据的时候， 一般情况下可以使用表格标签
写表格标签，先写结构，再写数据
<table>
<thead>
<tr>
<th>结构</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
</table>
一个tr就是一行
th和td区别：一个加粗一个不加粗
通常情况下表头用th，表单内容用td
表单标签*************：
form标签
获取用户输入(输入，选择、上传文件...)并且将数据打包发送给后端
action参数
用来控制数据提交的路径(到底朝哪个后端服务器提交数据)
三种写法：
1.不写，默认朝当前页面所在地址提交数据
2.全路径(http://www.baidu.com)
3.只写路径后缀(/index/)
input标签：获取用户输入，该标签是一个行内标签
-type属性：
-text 普通文本
-password 密文
-date 日期
-radio 多选一
-checkbox 多选多
默认选中 checked="checked" (当标签属性名与值相同时，可以只写属性名)
女<input type="radio" name="gender" checked="checked">
简写
女<input type="radio" name="gender" checked>
-reset 重置
-button 普通按钮
-submit 触发form表单提交动作
-file 获取文件
select标签 下拉框
一个个选项就是一个个option标签
默认时单选的，可以加一个multiple改为多选
<select name="" id="" multiple>
<option value="">新垣结衣</option>
<option value="">明老师</option>
<option value="">嫖老师</option>
<option value="">波老师</option>
</select>
如何让option标签默认选中
加selected="selected"
<select name="" id="" multiple>
<option value="" selected="selected">新垣结衣</option>
<option value="">明老师</option>
<option value="" selected>嫖老师</option>
<option value="">波老师</option>
</select>
textarea标签 获取大段文本
label通常配合input一起使用
-for用来填写对应的input标签的id值
点击label标签内的内容 会自动让对应的input标签聚焦
<p>
<label for="d1">用户名:<input type="text" id="d1" name="username"></label>
</p>
能触发form表单提交数据的按钮****
<p>
# 可以通过value来指定按钮文本内容
<input type="submit" value="注册">
<button>点我</button>
</p>
<input type="reset" value="重置"> #重置输入数据
<input type="button" value="按钮"> # 单纯一个按钮
#input获取到的用户输入就类似于字典的value，input中的name属性就类似于字典的key
标签的分类
1.块儿级标签：
独占一行 h1~h6 p br hr div
-块儿级标签内部可以嵌套任意块儿级标签和行内标签
-特例：p虽然是块儿级标签，但是它的内部只能嵌套行内标签，不能嵌套块儿级标签
若嵌套了，没有问题，只是不符合html语法规范
2.行内标签：
u s i b span
自身文本多大 就占多大
行内标签内部不能嵌套块儿级标签和行内标签
书写标签的时候，只需写标签名字，按tab可以自动补全 （emmet插件）