目录
HTML介绍
● 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
● 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
● 网页文件的扩展名：.html或.htm
- 在浏览器中输入一个网址，到返回浏览器，渲染成页面，这个过程发生了那些事情
"""
1. 浏览器朝服务端发起请求
2. 服务端接收请求
3. 服务端开始处理请求，并返回数据
4. 数据返回给了浏览器，浏览器进行渲染，展示给用户
"""
# 浏览器就是万能的客户端，浏览器相当于客户端,它可以充当很多服务端的客户端,我们就可以通过socket写一个服务端
import socket
server=socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr=server.accept()
data=conn.recv(1024)
print(data)
conn.send(b'hello')#这里没有遵循http协议所以浏览器访问不了
conn.send(b'http/1.1 200 ok \r\n\r\n')#这里遵循浏览器http协议才能正常连接
conn.send(b'hello')
conn.close()
浏览器也可连接txt文档
import socket
server=socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
while True:
conn,addr=server.accept()
data=conn.recv(1024)
print(data)
conn.send(b'http/1.1 200 ok \r\n\r\n')
with open('a.txt','rb')as f:
conn.send(f.read())
conn.close()
# 浏览器是如何识别不同的服务端的?
是因为浏览器指定了统一的规则，你要是想让你的服务端和浏览器进行正常的交互，那么你就要遵循这个规则，这个规则就叫HTTP协议。
HTTP协议
"""
HTTP协议超文本传输协议, 作用：就是规定了服务端和浏览器之间的数据交互格式.
"""
1. 四大特点
1. 基于请求和响应（浏览器发起请求-------->服务端做出响应）
2. 基于TCP/IP协议之上的应用层协议
3. 无状态
# 不保存客户信息
'''不记录用户的信息，后来随着技术的发展，诞生了京东，支付宝，拼多多等，我们每个人要想使用这个网站，就必须登录，要登录，就要记录用户信息，能够记录用户信息的技术有：cookie、session、token...'''
4. 短链接
# 客户端和服务端建立链接之后，客户端发送一些请求，服务端响应一次，然后断开，如果下次再发就要重新链接
# 长链接：客户端和服务端一旦建立链接，不会立马断开，而是中间间隔一段时间，如果双方都没有再次响应则进行断开
eg:客服系统
2. 请求数据格式
2.1 请求首行(HTTP协议的版本号，请求方式)
2.2 请求头(一堆k:v键值对)
2.3 \r\n
2.4 请求体
请求体里面放的都是一些敏感数据
post请求方式有请求体，get请求方式没有请求体，
3. 响应数据格式
3.1 响应首行(HTTP协议的版本号，响应状态码)
3.2 响应头(一堆k:v键值对)
3.3 \r\n
3.4 响应体
#就是服务端返回给浏览器的数据，浏览器渲染到页面上，展示给用户看
- 响应状态码
'''就是通过用一串简单的数字代码一段复杂的描述信息'''
1XX:服务端接收到消息正在处理，客户端可以继续发送或者等待
2XX:代表请求成功(200 OK)，服务端发送了对应的响应
3XX:重定向(进入到A页面，但是内部自动跳转了B页面)
302(临时)
304(永久)
4XX:客户端错误
404：请求资源不存在
403：没有权限
5XX:服务端错误
500 服务器内部错误
- 请求方式
1. get# 朝服务端要数据
eg: 在网址栏里输入baidu.com
'''没有请求体，可以携带参数，参数跟在了地址栏的后面，使用?&连接'''
https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false
https://www.baidu.com/s?k=v&k1=v1&k2=v2
https://www.baidu.com/s?wd=美女&ie=utf-8&
2. post# 朝服务端提交数据
eg：你在登录网站的时候，输入用户名和密码，然后把用户名和密码提交到服务端进行验证
'''可以携带参数，参数在请求体中'''
#get与post请求体区别
post携带参数比get携带的参数更加安全
get携带参数大小一般是4kb,post携带参数没有大小限制
get没有请求体，post有请求体
HTML简介
HTML是什么
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言，所见即所得(没有任何逻辑 是什么就是什么)
1.直接发送手写的数据
2.转为发送文件里面的数据
3.编写HTML出现特殊的现象
<h1>hello big big baby!</h1>
<a href='http://www.taobao.com'>click me</a> #访问网址
<img src='https://img2.baidu.com/it/u=1574304958,174721775&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681318800&t=7025b504ad317f14cb6a313a7b20d50b'>
h1
a
img
...
# 像以上这表标签就是HTML
'''如果你想让你的浏览器识别你的网站，你就必须遵循HTML语法'''
# HTML的标签名字不能改正，必须记忆， xml---->标签是自定义的
创建HTML文件的方式
1. 在pycharm中新建HTML文件
new>HTML file
# html文件的后缀名是：.html
2.桌面 新建文本文档 修改后缀名为html
编写HTML内容
pycharm创建html文件默认代码解释
<!DOCTYPE html> #文档类型 html
<html lang="en"> #语言 English
<head>
<meta charset="UTF-8"> # 指定字符编码的
<title>Title</title> #标题
</head>
<body>
</body>
</html>
- HTML文档介绍
1. <!DOCTYPE html>声明为HTML文档。
2. <html>...</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
3. <head>...</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。用户不可见的
4. <title>...</title>定义了网页标题，在浏览器标题栏显示。
5. <body>...</body>之间的文本是可见的网页主体内容。用户可见的
- html概览
1.HTML注释语法
<!--注释内容-->
2.HTML文档结构
<html> 固定格式 html包裹
<head>主要放跟浏览器交互的配置</head>
<body>主要放给用户查看的花里胡哨的内容</body>
</html>
3.HTML标签分类
单标签(自闭和标签)
<img/>
双标签
<h1></h1>
打开html的方式
1. 打开文件所在的位置，使用浏览器打开
2. 在pycharm中打开
HTML如何使用
1. 注释
<!-- 这是注释--> # 快捷键 ctrl + ?
标签的分类
<h1></h1>
<a></a>
<img />
# 双标签
<h1></h1>
<a></a>
# 单标签
<img />
head标签内常用标签
# <style></style> 只需要写出每个标签的前几个字母或者写标签的起始，tab补全
1.title网页小标题
2.meta定义网页源信息(很多配置)
<meta name="keywords" content="查询关键字">
<meta name="description" content="网页简介">
3.style内部支持编写css代码
<style>
/*style里面一般写CSS样式*/ #css样式的注释
h1 {
color: red;
}
</style>
4.script支持内部编写js代码
<script>
// 写js代码
alert(123)
</script>
4.1可以引入外部js文件
<script src="myjs.js"></script> # 引入外部js文件，src后跟文件路径
5.link引入外部css文件
<link rel="stylesheet" href="mycss.css"> # 引入外部CSS文件，href后跟文件路径
#路径查找以当前文件所在位置为基准查找
上一级xx/ 上上一级xx/xx/
<link rel="stylesheet" href="../../mycss.css">
<script src="../../myjs.js"></script>
body中常用标签
常用标签
h1~h6标题标签，其中 h1最大 h6最小
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<br>换行
<hr>分割线
标签的分类2
1. 块儿级标签
# 独自占一行
h1~h6 p div
2. 行内标签(内联标签)
# 自身文本有多大，就占多大
b i u s标签 span a
特殊字符
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
div标签和span标签
div块标签
span行标签
'''
标签嵌套：
块儿级标签可以嵌套所有的块儿级元素和行内元素，p标签也是块儿级元素，但是它不能嵌套块儿级标签，可以嵌套行内元素.
行内标签只能嵌套行内元素
'''
# 这两个标签一般在刚开始构建页面的时候用，主要用来占位置的. div主要用来占位置，span占的是文本位置
'''这两个标签没有实际的意义'''
img标签
<img src="" alt="">#图片标签
src alt# 这两个都叫标签的属性
<img src="https://img1.baidu.com/it/u=413643897," alt="图片加载不出来才显示"width="100px">
#还可以将图片保存电脑，再粘贴图片到pycharm中访问
<img src="456.webp" alt="图片加载不出来才显示"width="100px">
src:
里面放图片的地址
1. 可以放外部的图片地址
2. 还可以放本地的地址
alt:
是对这个图片的描述，图片加载不出才会显示
title：
悬浮框
a标签
# 超链接标签
<a href=""></a>
<a href="http://www.oldboyedu.com" target="_blank" title="请看我" >点我</a>
href：
#指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target:
target="_self" #在当前网页跳转新标签页
target="_blank" # 新打开一个标签页跳转
title:
鼠标放上去显示的内容
列表
-
无序列表
#ul标签 type属性： ● disc（实心圆点，默认值） ● circle（空心圆圈） ● square（实心方块） ● none（无样式） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> <ul type="circle"> <li>第一项</li> <li>第二项</li> </ul> <ul type="square"> <li>1</li> <li>2</li> </ul> <ul type="none"> <li>3</li> <li>4</li> </ul> </body> </html> -
有序列表
# ol标签
type属性：
● 1 数字列表，默认值
● A 大写字母
● a 小写字母
● Ⅰ大写罗马
● ⅰ小写罗马
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="1">
<li>第一</li>
<li>第二</li>
</ol>
<ol type="A">
<li>第一</li>
<li>第二</li>
</ol>
<ol type="I">
<li>第一</li>
<li>第二</li>
</ol>
</body>
</html>
- 标题列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<d1>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</d1>
</body>
</html>
表格
姓名 性别 年龄 薪资 爱好
kevin male 20 1000 read
kevin male 20 1000 read
kevin male 20 1000 read
kevin male 20 1000 read
# 我们可以使用table标签来画表格
<table>
<thead> #表头数据
<tr>
<th> #加粗
</th>
</tr>
</thead>
<tbody> #表体数据
<tr>
<td>
</td>
</tr>
</tbody>
</table>
属性:
● border: 表格外边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）
OCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="15" cellpadding="1" cellspacing="15">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>kevin</td>
<td rowspan="2">male</td>
<td colspan="1">20</td>
</tr>
<tr>
<td>kevin1</td>
<td>male</td>
<td>31</td>
</tr>
</tbody>
</table>
</body>
</html>
标签的两个重要属性
1. id
# 类似于人的身份证号，一个html文档中，id值不能重复，必须唯一
2. class
# 每一个标签都可以有class属性值，并且，每一个标签都可以有多个class值
3. 自定义属性
<div id='' class='' username='aa' password='123'></div>
其中username='aa' password='123'就为此标签的自定义属性
form表单标签
获取用户输入的数据、用户上传的文件等等都是通过form表单实现，它可以把用户输入的数据通过网络传给后端
- form标签
action 控制数据的提交地址(URL)
method 控制数据的提交方式(默认：GET）
enctype 控制提交数据的编码格式（默认：url-encoded）
form表单中得按钮：
<input type="submit" value="提交"> 提交表单的功能
<input type="button" value="按钮"> 没有任何功能
<input type="reset" value="重置"> 清空
<button>提交</button> 有提交表单的功能，但是必须写在form表单中
- input标签
input标签是行内元素 一般使用<p></p>实现换行
'''通过改变input的type属性，来达到不同的输入类型'''
type:
text 文本
password 密文展示
date 日期类型选项
email 邮箱
radio 单选 # 一个组的单选框需要name属性且name值要一样
<input type="radio" name="gender"> 男
<input type="radio" name ='gender'>女
checkbox 复选# 一个组的复选需要name属性且name值要一样
<input type="checkbox" name="hobby" > 足球
<input type="checkbox" name="hobby">篮球
# 单选和复选如果默认选中，只需要给标签在value前加checked属性 <input type="checkbox" name="hobby"checked value="足球">足球
file 上传文件
<input type="file" multiple>#可上传多个文件
<input type="file"name="myfile">#只可上传1个文件
属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
○ type="button", "reset", "submit"时，为按钮上显示的文本内容
○ type="text","password","hidden"时，为输入框的初始值
○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：禁用 所有input均适用
● placeholder：对输入框做一个说明解释
- select标签
属性说明：
● multiple：布尔属性，设置后为多选，否则默认单选
● disabled：禁用
● selected：默认选中该项
● value：定义提交时的选项值
option标签 一个个选项
textarea标签 获取大段文本
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected="selected">东京</option> # 选中selected
<option value="">东京1</option>
</select>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea> # 获取大段文本框
</p>
- label
说明：
1. label 元素不会向用户呈现任何特殊效果。
2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
- 例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<label for="username">用户：<input type="password" id="username"class="c1 c2 c3" placeholder="请输入用户名" name="username"></label>
<p>
密码：<input type="password" placeholder="请输入密码" name="password">
</p>
<p>
生日：<input type="date" name="date">
</p>
<p>
<input type="radio" name="gender" value="male">男
<input type="radio" name ='gender' value="female">女
<input type="radio" name="gender" value="others">保密
</p>
<p>
<input type="checkbox" name="hobby"value="篮球">篮球
<input type="checkbox" name="hobby"checked value="足球">足球
<input type="checkbox" #默认足球name="hobby"value="排球">排球
<p>
<input type="radio" name="hobby1" value="游泳">游泳
<input type="radio" name="hobby1" value="体操">体操
<input type="radio" name="hobby1" value="冰球">冰球
</p>
</p>
<p>
邮箱： <input type="email" name="email">
</p>
<p>
<!-- <input type="file"name="myfile">-->
<input type="file" multiple>
</p>
<p>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value=""selected>深圳</option> #selected默认深圳
</select>
</p>
<p>
<select name="" id="">
<optgroup label="北京">
<option value="">海淀</option>
<option value="">朝阳</option>
</optgroup>
</select>
</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>提交</button>
</p>
</form>
</body>
</html>
- 表单标签的说明
基于form表单发送数据
1.用于获取用户数据的标签至少应该含有name属性
name属性相当于字典的键
用户输入的数据会被保存到标签的value属性中
value属性相当于字典的值
ps:没有name属性的标签 form表单会直接忽略 不会发送
2.如果不需要用户填写数据 只需要选择 那么我们需要自己填写value从而得知用户选择的数据
<input type="radio" name="gender" value="male">
3.针对input标签理论上应该配一个label标签绑定 但是也可以不写
<label for="d1">username:
<input type="text" id="d1">
</label>
<label for="d1">username:</label>
<input type="text" id="d1">
4.标签的属性如果和属性值相等 那么可以简写不写属性值
<input type="file" multiple="multiple">
<input type="file" multiple>#简写
5.针对选择类型的标签可以提前设置默认选项
<input type="radio" name="gender" checked="checked">
<input type="radio" name="gender" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" name="gender" checked>
<option value="" selected="selected">222</option>
<option value="" selected>222</option>
6.下拉框与文件上传可以复选
<input type="file" multiple>
<select name="" id="" multiple>
验证form表单把数据提交到后端
# 代码不需要掌握，flask框架写的
'''python中得框架：Django flask ... '''
# 先安装flask，然后在用
pip install flask
# form表单默认提交的请求方式是get，如何更改：
<form action="" method='post'>
action：
1. 什么都不写，默认提交到当前地址
2. 全写（绝对地址）：http://127.0.0.1:5000/index/ # 朝这个完整地址提交数据
3. 只写后缀/index/ # 会自动拼接路径：ip:port/index/
http://127.0.0.1:5000/index/ 在django框架中会遇到
method='post' # 改变提交方式的
<input type="password" placeholder="请输入密码" name="password">
"""
每一个标签都应该有一个name属性，name属性的值相当于是字典的key，用户输入的值相当于是字典的v
"""
针对于用户选择的标签，都应该有一个value值
<input type="checkbox" name="hobby" value="1"> 篮球
<input type="checkbox" name="hobby" checked value="2"> 足球
<input type="checkbox" name="hobby" checked value="3"> 台球
针对于文件上传必须满足2个条件：
1. 请求方式必须是post
2. enctype属性必须是enctype="form-data"
提交数据的编码格式：
1. urlencode默认的提交格式，它只能提交普通文本数据，不能提交文件等数据
2. form-data支持了提交文件数据，并且也可以提交普通文本数据
3. json------>{"k":"v"}
"""form表单只能提交2种urlencode和 form-data,不能提交json格式的数据"""
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<label for="username">用户：<input type="text" id="username"class="c1 c2 c3" placeholder="用户名" name="username"></label>
<p>
密码：<input type="password" placeholder="请输入密码" name="password">
</p>
<p>
生日：<input type="date" name="date">
</p>
<p>
<input type="radio" name="gender" value="male">男
<input type="radio" name ='gender' value="female">女
<input type="radio" name="gender" value="others">保密
</p>
<p>
<input type="checkbox" name="hobby"value="篮球">篮球
<input type="checkbox" name="hobby"checked value="足球">足球
<input type="checkbox" name="hobby"value="排球">排球
<p>
<input type="radio" name="hobby1" value="游泳">游泳
<input type="radio" name="hobby1" value="体操">体操
<input type="radio" name="hobby1" value="冰球">冰球
</p>
</p>
<p>
<!-- <input type="file"name="myfile">-->
<input type="file" multiple name="myfile">
</p>
<p>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value=""selected>深圳</option> #selected默认深圳
</select>
</p>
<p>
<select name="" id="">
<optgroup label="北京">
<option value="">海淀</option>
<option value="">朝阳</option>
</optgroup>
</select>
</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>提交</button>
</p>
</form>
</body>
</html>
- flask代码
from flask import Flask,request
app = Flask(__name__)
# 路由地址----->网址栏里面地址后面的后缀
@app.route('/index/', methods=['GET', 'POST'])#index为访问路由地址 methods为请求方式
def index():
# 接收前端提交过来的数据
print(request.form) # form只能接收post提交的文本数据
# print(request.args) # args拿到get请求的数据
# ImmutableMultiDict([('username', 'use'), ('password', '123'), ('gender', '女')])，字典的数据来源: ([('用户名中的name属性值','输入框中的值'), ('密码中的name属性值', '输入框中的值'), ('gender中name属性值', 'gender中value属性值')])
print(request.files) # 接收文件数据
# ImmutableMultiDict([('myfile', <FileStorage: 'http.png' ('image/png')>)])，数据来源: ([('文件中的name属性值', <文件存储器: '图片名' ('image/png')>)])
file_obj = request.files.get('myfile')#获取上传文件
file_obj.save(file_obj.filename)#保存上传文件
return 'OK'
# 3. 启动框架
app.run()