知识点1 前端
-
1.什么是前端?
- 就是与用户交互的程序(手机,电脑,平板)
-
2.什么是后端?
- 运行在后台的一堆杂乱无章的代码
-
3.前端学习历程?
- html:一个网站的骨架
- css:给网站装修,加样式
- JavaScript:让网站动起来
-
4.前端框架
- bootstrap(库),jQuery(库),Vue(框架)
-
5.软件架构
- C/S client客户端 server服务端
- B/S browser浏览器客户端 server服务端
-
6.浏览器输入网址经历哪些过程?
- 朝后端发送请求
- 后端接收请求
- 处理前端的请求数据
- 做出响应的响应
- 用代码模拟这个过程
import socket server = socket.socket() server.bind(('127.0.0.1', 8080)) server.listen() while True: conn, addr = server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200 OK \r\n\r\n hello my baby') # 返回浏览器认识的数据格式 conn.close()
import socket server = socket.socket() server.bind(('127.0.0.1', 8088)) server.listen() while True: conn, addr = server.accept() data = conn.recv(1024) 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()
知识点2 HTTP协议
-
1.浏览器可以充当很多服务端的客户端:百度,淘宝,京东
-
2.浏览器怎么与多个服务端交互?
- 浏览器要遵循一些规则或者协议,即http协议
-
3.HTTP协议:
- 1 朝后端发送请求
- 2 后端接收请求
- 3 后端处理请求数据
- 4 做出相应的响应
-
4 HTTP的4大特性:
- 1.基于请求响应
- 2.基于tcp/ip协议之上的应用层协议
- 3.无状态:不保存用户信息 后面就出现了记录用户信息的新技术:cookie session token
- 4.短/无链接
- 请求一次,响应一次,然后断开,之后两者没有任何关系
- 长链接: 默认情况不断开:社交软件
- 5.请求数据格式:
- 请求首行(协议版本号 请求方式)
- 请求头
- \r\n
- 请求体
- 6.响应数据格式:
- 响应首行(协议版本号 响应状态码)
- 响应头
- \r\n
- 响应体
- 7.请求方式
- get请求:获取数据
- post请求:向服务端提交数据
- 8.响应状态码:
- 1XX:向后端提交数据响应成功,此时还可以继续提交
- 2XX:请求数据成功
- 3XX:重定向,即如果账号未登录,自动跳转到登录界面
- 4XX:资源不不存在
- 5XX:服务器内部错误
- 补充知识点:如何查看浏览器中的响应状态码?
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Nru1FiH-1658326066120)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220720201113027.png)]
知识点3 html
-
1介绍:超文本标记语言
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
-
head:一般情况下是给浏览器看的
-
body:写在body里面的内容都会被浏览器渲染
-
2注释:
-
<!--这是注释--> <!-- 这是多行注释1 这是多行注释2 这是多行注释3 这是多行注释4 这是多行注释5 -->
-
-
3.打开html文件的两种方式
- 直接双击打开
- 在pycharm里面的右上角打开已安装的浏览器
-
4.html中标签的分类
- 1.单标签
- 2.双标签(自闭合标签)
-
5.基本标签
<h1>我的颜色</h1> <h1>标题标签 总共有6级</h1> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落</p> <br>换行 <hr>水平分割 <div>用来划分区域</div> <span>普通文本的首选</span>
-
6.head标签
-
<head> <meta charset="UTF-8"> <title>Title</title> <style> h1 { color: green; } </style> </head> <body> <h1>我的颜色</h1> </body> </html>
-
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="my.css"> </head> <body> <h1>我的颜色</h1> </body> </html>
-
<head> <meta charset="UTF-8"> <title>Title</title> <script> alert(123) </script> </head> <body> <h1>我的颜色</h1> </body> </html>
-
<head> <meta charset="UTF-8"> <title>Title</title> <script src="my.js"></script> </head> <body> <h1>我的颜色</h1> </body> </html>
-
7.标签的分类
- 块级标签:单独占一行 div h1 p 可以修改大小
- 行内标签:自身多大就占多大 a i s u b span 默认不能修改大小
- 特例:p标签不能嵌套块级标签,浏览器会自动解析
-
8.特殊符号
-
空格 > 大于 < 小于 & & ¥ ¥
-
9.img标签
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="my.js"></script> </head> <body> <img width="200px" src="" alt="文件不存在的时候展示的文字信息"> </body> </html>
-
10.a标签
-
<body> <a href="https://www.baidu.com" id="a1" class="c1">点我</a> </body>
-
<body> <a href="" id="d1">顶部</a> <div style="height: 500px; background-color: pink"></div> <a href="" id="d2" title="这是中部属性">中部</a> <div style="height: 500px; background-color: green"></div> <a href="">底部</a> <a href="#d1">回到顶部</a> <a href="#d2">回到中部</a> </body> </html>
-
<body> <a href="https://www.baidu.com" target="_self">当前页面跳转</a> <a href="https://www.baidu.com" target="_blank">新建页面跳转</a> </body>
-
11.标签的两个自带的重要属性
- id 唯一值 不能重复
- class 可以有多个值,并且可以重复
- 也可以自定义标签属性
-
12.列表标签
-
<body> <ul> <li>无序列表1</li> <li>无序列表2</li> <li>无序列表3</li> </ul> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl> </body>