HTML
前端
前端：和所有用户打交道的界面称之为前端。
后端：跟用户不直接打交道的就是后端。
学前端原因
我们只学习python，只能是后端工程师，学了前端，全栈工程师------>前后端都会
最核心的是：在公司中可以很好的与前端人员进行灵活沟通(重要)
'''我们学习前端，要求不高，学的不深，会看懂一些简单的前端代码和会搭建一些简单的页面即可'''
前端学习内容
1. HTML:搭建网页的骨架，没有样式
2. CSS：样式，让网页更加好看
3. JavaScript(JS)：就是往网页动起来
软件开发架构
cs架构：client -----> sever
bs架构：browser ---->sever
前端就是bs端，页面就是在浏览器中展示
我们学习只需要有浏览器即可，翻译前端代码的是浏览器。
建议使用谷歌浏览器（兼容性最好），前端最难的就是解决兼容性问题
在浏览器中输入一个网址，到返回浏览器，渲染成界面，这个过程发生了什么
1、浏览器朝服务端发起请求
2、服务端接收请求
3、服务端开始处理请求，并返回数据
4、数据返回给浏览器，浏览器进行渲染，展示给用户
浏览器就是万能客户端，所以浏览器有了，就相当于客户端有了，我们就可以通过socket写一个服务端。
浏览器就是万能客户端，可以充当很多服务端的客户端。
浏览器如何识别不同的服务端？
浏览器指定了统一的规则，要是想让服务端和浏览器正常交互，就要遵循HTTP协议
HTTP协议
超文本传输协议，作用：规定了服务端和客户端之间的数据交互格式。
1、四大特点
1、基于请求和响应：浏览器发起请求----->服务端做出响应
2、基于TCP/IP协议之上的应用层协议
HTTP是基于TCP协议写出来的
3、无状态（不能保存用户信息）
网站早期的时候是不需要登陆的（如：新闻网站）
“不记录用户信息，后来随着技术发展，诞生购物网站，当想要使用时，就必须登录，就要记录用户信息”
能记录用户信息的技术有：cookie、session、token
4、
短链接：客户端和服务端建立起链接之后，客户端发送一些请求，服务端响应一次，然后断开，也就是二次成功发送一次消息就会断开连接
长链接：一旦建立链接，不会立马断开，中间有间隔 客服系统（长链接）
请求数据：请求数据就是客户端发送请求会携带一些数据
HTTP请求数据格式：
1、请求首行（HTTP协议的版本，请求方式）
2、请求头（k：v键值对）
3、\r\n
4、请求体
不是所有的请求方式都有，get请求方式没有请求体，post请求方式有请求体，请求体里面放的都是一些敏感数据。
HTTP响应数据格式：
响应首行（响应状态码）
响应头
\r\n
响应体
响应状态码
就是通过用一串简单的数字的数字代替一段复杂的描述信息
1xx：服务端接收到消息正在处理
2xx：代表请求成功（200 ok）
3xx：重定向（想直接进入到a界面，但是内部直接自动跳转了b界面）
4xx：
404：请求资源不存在
403：没有权限
5xx：500服务器内部错误
请求方式：
1、get（请求方式没有请求体）
朝服务端要数据：在网址上输入baidu.com，因为get没有请求体，数据就直接放在了网址后面
https://www.baidu.com/s?k=v&k1=v1&k2=v2
https://www.baidu.com/s?wd=美女&ie=utf-8&
协议：//域名/后缀/？参数
协议：//域名/后缀/？k=v&k1=v1&k2=v2
URL：统一资源定位符
2、post
朝服务端提交数据：在登录网站的时候，输入用户名和密码，然后把用户名和密码提交到服务端进行验证。
面试题：聊聊get请求和post请求的区别
1、get请求方式数据不够安全，post请求数据更加安全
2、get请求方式没有请求体，post请求有请求体
3、get请求能够携带的数据量没有post请求携带的多，get请求一般携带4kb的大小，post请求基本上没有限制
如果你想让你的浏览器识别你的网站，你就必须遵循HTML语法
<h1>helloworldaaa</h1> <a href='http://www.baidu.com'>click me</a> <img src='https://img2.baidu.com/it/u=2942449272,1418584815&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689699600&t=6840fd4bcbd7f1c87dd657700e7010db'>
HTML的标签名字不能改正，必须记忆
创建HTML文件的方式
1、在pycharm中新建HTML文件
2、html后缀名.html
3、书写位置：文件中、浏览器中、各种工具中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
HTML文档介绍
head标签一般写的不是用户看的
body标签一般写什么内容，浏览器中就能看到什么内容，给用户看的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> #指定字符编码的 <title>Title</title> </head> #这里写的东西不是让用户看的 <body> #body标签内写的东西都是让用户看的，在body中写什么，浏览器中就能看到什么 </body> </html>
1、打开文件所在位置，用浏览器打开
2、在pycharm中打卡
HTML里的head标签使用
常用标签
常用标签 <title>你看我在哪里显示</title> # 标签顶部显示的内容 <link rel="stylesheet" href="css/my.css"> # 引入外部CSS
1. 注释
<!-- 这是注释--> # 快捷键 ctrl + ?
head标签里常用标签
# <style></style> 只需要写出每个标签的前几个字母或者写标签的起始，tab补全 <style> /*style里面一般写CSS样式*/ h1 { color: red; } </style> <script> // 写js代码 alert(123) </script> <link rel="stylesheet" href="mycss.css"> # 引入外部CSS文件 <script src="myjs.js"></script> # 引入外部js文件 <link rel="stylesheet" href="../../mycss.css"> <script src="../../myjs.js"></script>
body中常用标签（在浏览器中看到什么就在这里写什么）
常用标签
h1~h5标题标签，其中h1最大 h6最小
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s>
基本标签 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p>
<!--换行-->
<br>
<!--水平线--><hr>
标签的分类2
1、块儿级标签元素
独占一行，不管自身有多大，他自己就占一行
h1标题标签都是
p标签
hr标签
2、行内元素（内联元素）
自身文本有多大就占多大，不会独占一行
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s>
标签分类2
双标签：
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> h1标题标签都是 p标签 a标签
单标签：
hr标签
br
<img />
特殊字符（实体符号）
内容 对应代码
空格
> >
< <
& &
¥ ¥
版权 ©
注册 ®
还有很多：
HTML特殊符号（字符实体)大全_html字符_折耳鼠的博客-CSDN博客
div标签和span标签
div和span这两个标签没有实际意义，一般用来布局使用
div它是块儿级元素，给页面占布局（也就是页面中的大板块）
span标签是行内元素，用来给文本内容占布局（也就是页面中的细节板块）
标签的嵌套
我们使用亲戚关系来表示标签之间的关系
<div> div标签是p标签的父标签
<p>p标签是div的儿子，是span标签的父标签
<span></span>span标签是p的儿子，是div的孙子
</p>
<p></p> p标签是div标签的儿子，是p标签的兄弟，也是span的兄弟
<span></span>
</div>
注意：块儿级元素能够嵌套所有的行内元素，块儿级元素也能嵌套所有的块儿级元素，但是除了p标签之外
行内元素不能够嵌套块儿级元素，但是可以嵌套所有的行内元素
前端里面一般不会轻易报错，写的代码不规范不正确，只是没有效果而已，不会轻易报错。前端只是和用户打交道的，不能随便报错，不然体验感很差。
img标签
标签内会有属性：
1、自带属性
2、自定义的属性
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src：写图片的地址：1、外链地址 2、相对地址
宽高里的px是指像素，不加也可以
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
超链接
<a href="http://www.baidu.com" title="你看是什么" target="_blank">点我一下啊</a>
href：填写的是跳转的地址
# id值，锚点，我们用不到，是一种效果，一般是前端来写
● 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
● 相对URL - 指当前站点中确切的路径（href="index.htm"）
target="_blank"
跳转的时候新开一个tab页面
title="你看是什么"
当鼠标悬浮的时候展示的内容
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
列表标签
1、无序列表
ul标签
<body> <div> <ul type="circle"> <li>第一个</li> <li>第二个</li> <li>第三个</li> </ul> </div> </body>
快捷方式写：li*5 tab 就会出现5个li ，div>p*5 tab ; div>p*5>a tab
type属性：
1、disc（实心圆，默认值）
2、circle（空心圆）
3、square（实心方片）
4、none（无样式）
2、有序列表
ol标签
<div> <ol type="1" start="1"> <li>易</li> <li>烊</li> <li>千玺</li> </ol> </div>
type属性：
● 1 数字列表，默认值
● A 大写字母
● a 小写字母
● Ⅰ大写罗马
● ⅰ小写罗马
3、标题列表
<div> <dl> <dt>hihi</dt> <dd>hhhhh</dd> <dt>hihihihihi</dt> <dd>hhhhhhhhhhhhhhh</dd> </dl> </div>
标题一般情况用于下列情况：
表格
使用table标签画表格
tr:代表一行
td：代表一列 一般头会用th（也就是thead里，因为会加粗）
<head> <meta charset="UTF-8"> <title>hihihi</title> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </table> </head> <body> <div> <table> <tr> <td>lin</td> <td>18</td> <td>female</td> </tr> <tr> <td>lin</td> <td>18</td> <td>female</td> </tr> </table>
属性：
● border: 表格边框. （写在table里）
● cellpadding: 内边距 （写在table里）
● cellspacing: 外边距. （写在table里）
● rowspan: 单元格竖跨多少行 （写在td tr里）
● colspan: 单元格横跨多少列（即合并单元格）（写在td tr里）
标签的两个重要属性
id：一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签
class：一个html文档中，class值可以有多个，可以重复
自定义属性
例如：<div id="d1" name="lin" password = '123'></div>
属性名可以自己来定，自定义属性一般用来存储数据的
form表单
form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端
<form><form> <label></label>
input:
通过改变input的属性type来达到不同的输入类型
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
属性说明:
● name：表单提交时的“键”，注意和id的区别，name属性用于对提交到服务器后的表单数据进行识别，只有设置了name属性的表单元素才能在提交表单的时候传递他们的值。
● value：表单提交时对应项的值，会在框里显示的值。
○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
○ type="text","password","hidden"时，为输入框的初始值
○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用 禁用
multiple：布尔属性，设置后为多选，否则默认单选
通过id值绑定：for的值与id一致，这样在点击文字标题时，可跳转至后面的文本框
<p> <label for="username">用户名</label> <input type="text" id="username" name="username" value="kevin" readonly placeholder="请输入用户名"> <!-- id是唯一的，id是什么for后面就是什么才能找到，value输入就是固定输出值，无法在前端更改，readonly只读 placeholder/；是提示框，鼠标点击就消失--> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password"> </p>
年月：
<p> <input type="date" > <!-- 年月日选择修改--> </p>
选项：
<p> <input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" checked="checked" value="2"> 女 <input type="radio" name="gender" value="3"> 未知 <!-- name="gender"就是进行单选，如果不加这个就会变成多选。value="1"，是在选择后，后端可以看到value是选择了什么值，如果不写，则看不到选的是什么，checked="checked"是初始固定选择的值--> </p>
下拉框选择：
<p> <select name="city" id="" > <option value="1" >北京</option> <option value="2" selected>上海</option> <option value="3">深圳</option> </select> <!-- 下拉框选择--> </p>
上传文件：
<p> <input type="file" name="myfile"> </p>
文本框：
<p> <textarea name="textarea" id="" cols="20" rows="10"></textarea> </p>
按钮：
<p> <input type="submit" value="登录"> <input type="button" value="登录"> <button>登录</button> <input type="reset" value="重置"> </p> <p> <input type="hidden" id="" name=""> </p>
验证form表单提交数据到后端
在html中
用的是flask框架做出后端语言
要导入模块flask
from flask import Flask,request app = Flask(__name__) # 路由，网址的后缀 baidu.com/index/ @app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求 def index(): # 如何拿到前端提交过来的数据 # 前端以post请求方式提交的 print(request.form) # 只能拿到post请求的数据 # print(request.args) # 拿到get请求的数据 # 如何接收文件数据 print(request.files) file_obj = request.files.get('myfile') print(file_obj.filename) # 965_001_dq3_3600_5400.jpg with open(file_obj.filename, 'wb') as f: for line in file_obj: f.write(line) return 'OK' app.run()
