day01:前端，http协议，html

最新推荐文章于 2024-06-12 11:13:48 发布

Jayxieming

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量158

点赞数

分类专栏： django 文章标签：前端 http html

本文链接：https://blog.csdn.net/Yydsaoligei/article/details/125901756

版权

django 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

知识点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.特殊符号

&nbsp;  空格
&gt;  大于
&lt;  小于
&amp;  &
&yen;  ￥

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>