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\r\n\r\n")
    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：分割线

特殊符号：

&nbsp; 空格
<p>a大于b a &gt; b </p>
<p>a小于b a &lt; b </p>
<p>a&b 	 a &amp; b </p>
<p>人民币 &yen;100000 b</p>
<p>版权标识 &copy; </p>
<p>注册商标 &reg; </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插件）