目录
一、http协议
1.什么是请求头、请求体，响应头、响应体
2.URL地址包括什么
3.get请求和post请求到底是什么
4.Content-Type是什么
答：
1、请求头（Request Headers）： 请求头是HTTP请求的一部分，包含了关于请求、响应或者其他的发送信息。
这些信息包括客户端希望从服务器接收什么样的信息，例如请求的URL、HTTP版本、客户端的类型、优先级、认证信息等。
请求头不包含任何的数据，它们只是提供了请求的元数据；
请求体（Request Body）： 请求体是HTTP请求中的数据部分，通常用于POST、PUT、PATCH等请求方法，用来发送与请求相关的数据。
请求体的内容取决于请求的类型和目的。
例如，在提交表单时，请求体可能包含了表单字段；在上传文件时，请求体包含了文件数据；
响应头（Response Headers）： 响应头是HTTP响应的一部分，包含了关于响应的信息，如内容类型、服务器类型、状态码（例如200表示成功，404表示未找到资源）以及其他与响应相关的元数据。
响应头不包含任何的数据，它们只是提供了响应的元数据；
响应体（Response Body）： 响应体是HTTP响应中的数据部分，包含了服务器返回给客户端的资源或数据。
响应体的内容可以是HTML文档、JSON对象、二进制文件等，具体取决于请求的类型和目的。
2、协议 主机 端口 路径 查询字符串 片段标识符
http://example.com:8080/pages/about.html?id=123&name=John#section1
在这个例子中，http 是协议，example.com 是主机，8080 是端口（如果不是默认端口），/pages/about.html 是路径，id=123&name=John 是查询字符串，而#section1 是片段标识符。
3、GET请求：
用途：主要用于请求服务器发送资源或数据。它也可以用来提交数据给服务器，但提交的数据显示在URL中，并且通常用于读取操作。
特点：
数据在URL中可见，安全性较低。
数据量有限制（具体限制取决于浏览器和服务器）。
不适合提交大量数据。
可以在URL中保存较长时间。
POST请求：
用途：通常用于向服务器提交数据，如表单数据。它用于写操作。
特点：
数据不会在URL中暴露，安全性更高。
理论上没有数据量的限制（尽管实际使用中仍受浏览器和服务器限制）。
适合提交大量数据。
通常不能在URL中保存较长时间。
4、content-type是在请求头/响应头中标明请求体中的数据是以何种方式组织的
请求头通常有：json({"key":"value",})/from(key=value&)
响应头通常有：json({"key":"value",})/html(<a>123<\a>)/plain("字符串")/...
二、前端三剑客
1 HTML
标签
HTML：超文本标记语言
块级标签（inline）：
1.独占一行
2.可设置长宽
内联标签（inline）：
1.不独占一行，按内容占比
2.不可设置长宽
嵌套规则：
1.块级标签可以嵌套块级，也可以嵌套内联
2.内联只能嵌套内联
特殊情况：p标签例外
标签举例
块级标签：
标题1-6:<h1></h1> ... <h6></h6>
段标签:<p></p>
div标签:<div></div>
内联标签：
换行标签:<br>
加粗标签:<b></b> <strong></strong>
倾斜标签:<i></i> <em></em>
span标签:<span></span>
超链接标签:<a href=""></a>
img标签:<img src="" alt="">
列表标签:
无序列表:<ul><li></li></ul>
有序列表:<ol><li></li></ol>
表格标签:<table><tr><th></th></tr><tr><td></td></tr></table>
(重点)from表单标签:
收集客户信息的桥梁！！！
<from>
<input type="">
</from>
2 CSS
CSS：层叠样式表
CSS的功能:渲染和布局
CSS的语法:选择器{属性:值;}
CSS核心:选择标签、操作标签
CSS的引入方式
头部写<style></style>
创建CSS文件，在头部导入<link rel="", href="">
选择器
基本选择器:标签选择器、id选择器 #id值、class选择器 .class值
组合选择器:后代选择器 子代选择器...
属性操作
文本样式: font-...
背景颜色: background
边框: border
内外边距: 内padding 外margin
设置盒子属性: display:inline-block
漂浮: float:left/right
3 JS基础
JavaScript是唯一一个客户端语言，是唯一一个前端编程语言。
这里学习只需要了解这些结构即可，熟悉JS的语法。
JS的引入方式
<script></script>可以写在head里，也可以写在body里，从上往下执行
.js文件导入 <script src=".js"></script>
JS的基本语法
变量赋值
作用：声明一个变量
//局部变量
var x = 10;
let y = 10;
//全局变量
z = 100;数据类型
var age = 20; //整型
var pi = 3.14; //浮点型
var name = "yi"; //字符串
var secondName = 'Hao'; //字符串
var isMarried = false; //布尔值
var dog = ["xiao", 5, "male"] //这里叫数组，和python列表用法相似dog[0]
var info = {"name":"yi", "age":21, "sex":"1"} //这里叫objec对象，和字典像，但不是字典
//引用为info[name]、info.name，有引号也会被去掉
var info = {name:"yi", age:21, sex:"1"}运算符
| 运算符 | 内容 |
|---|---|
| 数据运算符 | + - * / += |
| 比较运算符 | > < >= <= !== == === |
| 逻辑运算符 | && || ! |
注：比较运算符中，'=='将两者都作为字符串比较,'==='保留原本数据类型进行比较
分支语句
if-else
//if-else
if(){
...
}else if(){
...
}else{
...
}
switch
//switch
switch(){
case 结果1:
...
break
case 结果2:
...
break
default:
...
}循环语句
while循环
//while循环
while(){
...
}
for循环
//for循环
for(;;){
}
与python类似，JS跳出循环也使用以下两个关键字
break
continue
函数
声明函数
function fun(){
...
return
}调用函数
foo()匿名函数
(function(x, y){return ...})(1, 2)JS的内置方法
字符串的内置方法
| 方法 | 功能 |
|---|---|
| str.length | 获取长度 |
| str.toUpperCase | 小写转大写 |
| str.toLowerCase | 大写转小写 |
| str.slice(,) | 切片 |
| str.split() | 拆分字符串为数组 |
| str.trim() | 去除左右两端空格 |
数组的内置方法
| 方法 | 功能 |
|---|---|
| arr[] | 索引 |
| arr.slice(,) | 切片 |
| arr.push() | 向末尾插入 |
| arr.pop() | 删除末尾的值 |
| arr.unshift() | 向首部插入 |
| arr.shift() | 向首部删除 |
| array.join("") | 拼接为字符串 |
内置高阶方法
filter map splice
filter将数组的每一个元素根据fun进行“过滤”, 为true保留, false不保留
arr.filter(fun) fun可以是匿名函数, fun的参数必须有item, 使用item在函数内部对条件进行限定
还是原来的数组
map将数组的每一个元素根据fun进行“处理”, 为true保留, false不保留
arr.map(fun) 返回一个新的数组
splice方法,对数组删除 插入 替换
arr.splice(start, nums) 从start开始, 删nums个
arr.splice(start, 0, "a", "b", ...) 中间为0就是插入, 从start位置开始插入
arr.splice(start, nums, "a", "b", ...) 从start开始, 删nums个, 然后插入
4 JS进阶
需要记住这些结构是做什么用的即可，为爬虫服务，便于理解网页结构。
JSON序列化
序列化:将某种编程语言支持的的数据类型做一个格式化字符串，从而能够进行存储或网络传输。
反序列化:将能够进行存储或网络传输的某种格式字符串转换成本编程语言能够识别的数据类型对象。
json: 标准的数据交换格式，支持格式: "" 1 [] {} null bool
python中json包
json.dumps() 序列化
json.loads() 反序列化
JS中
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化
Python与json对应格式
| Python | JS |
|---|---|
| dict | object |
| list,tuple | array |
| str | string |
| int,float | number |
| True | true |
| False | false |
| None | null |
DOM对象
一个标签就是一个DOM
dom.on事件 = function(){}
JS: 选择标签、操作标签
查找标签
直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
导航查找标签
elementNode.xxx
CSS选择器查找
document.querySelector("css选择器") 获取第一个，返回dom对象
document.querySelectorAll("css选择器") 获取所有，返回数组
操作标签
文本操作
console.log(this.innerHTML) 查看文本值
this.innerHTML = 123 设置文本值
value操作
input、select和textarea标签
this.value
CSS样式操作
this.style.color = "red" 改变样式
jQuery
类似于JS的第三方库，还有vue等
在某些方面替换JS，更加好用
Ajax请求
异步js传输数据技术
本质上就是局部刷新
向服务器发请求的方式
同步页面刷新：
地址栏请求get
a标签get
from表单get/post
异步页面刷新：
ajax请求
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
