前端零：基本知识
文章目录
1 像素、视口、移动端适配
1.1 像素和视口
<!--
像素：
- 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
- 分辨率：1920 x 1080 说的就是屏幕中小点的数量
- 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
- 物理像素，上述所说的小点点就属于物理像素
- CSS像素，编写网页时，我们所用像素都是CSS像素
- 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现
- 一个css像素最终由几个物理像素显示，由浏览器决定：
默认情况下在pc端，一个css像素 = 一个物理像素
视口（viewport）
- 视口就是屏幕中用来显示网页的区域(简单来说视口就是游览器的窗口)
- 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
- 默认情况下：
视口宽度 1920px（CSS像素）
1920px（物理像素）
- 此时，css像素和物理像素的比是 1:1
- 放大两倍的情况：
视口宽度 960px（CSS像素）
1920px（物理像素）
-此时，css像素和物理像素的比是1:2
- 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
-->1.2 完美视口
<!--
移动端默认的视口大小是980px(css像素)，
默认情况下，移动端的像素比就是 980/移动端宽度 （980/750）
如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，
导致网页中的内容非常非常的小
编写移动页面时，必须要确保有一个比较合理的像素比：
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素
- 可以通过meta标签来设置视口大小
- 每一款移动设备设计时，都会有一个最佳的像素比，
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小我们称其为完美视口
将网页的视口设置为完美视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
结论：以后再写移动端的页面，就把上边这个玩意先写上
-->1.3 移动端vw适配
<!--
1、不同的设备完美视口的大小是不一样的
iphone6 -- 375
iphone6plus -- 414
由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
比如在iphone6中 375就是全屏，而到了plus中375就会缺一块
所以在移动端开发时，就不能再使用px来进行布局了
2、vw 表示的是视口的宽度（viewport width），vw对于PC端兼容性不太好，老版游览器并不支持，单移动端都使用，所以移动端可以使用vw。
- 100vw = 一个视口的宽度
- 1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度
750px 1125px
设计图
750px
使用vw作为单位
100vw
创建一个 48px x 35px 大小的元素
100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
6.4vw = 48px(设计图像素)
4.667vw = 35px
-->2 跨域
2.1 同源策略
同源策略：最早有Netscape公司提出，是游览器的一种安全机制，同源即来源必须相同，当前网页的url和请求目标资源的url的协议、域名、端口号都必须一致，违背同源策略就是跨域，Ajax策略默认支持同源策略。
2.2 jsonp实现跨域
Jsonp(JSON with padding)，是一个非官方的跨域解决方案，纯粹是凭借程序员的聪明才智开发出来的，只支持get请求。
网页中有一些标签天生就具有跨域能力，比如：img，link，iframe，script等。
JSONP就是利用script标签的跨域能力来发送Ajax请求的，通过script的src属性获取的是一个函数调用的字符串，同时这个字符串在script标签中需要有定义。
- 1 通过原生的JS来实现JSONP：
script标签为什么能够实现跨域？？？ajax请求存在跨域的问题，是由游览器中的Ajax引擎来判定的，script的src属性发的请求是由游览器引擎发的普通的http请求，不会受到Ajax引擎的限制，不存在跨域的问题。
//前端页面<body>
请输入用户名：<input type="text">
请输入密码：<input type="password"><button>提交</button><script type="text/javascript">functionhasUser(username, password){if(username>=0& password>=0){
console.log("用户名和密码重复")}else{var str= username>=0|| password>=0?"用户名重复":"密码重复"
console.log(str)}}
window.onload=function(){var btn= document.getElementsByTagName("button")[0]
btn.onclick=function(){var username= document.getElementsByTagName("input")[0].valuevar password= document.getElementsByTagName("input")[1].value//使用原生的js来实现jsonp//1 创建一个script标签var script= document.createElement("script")//2 设置script标签的src,即url,jsonp只能实现get请求，如果要将数据发送给后端服务器，//只能进行url的拼接，将数据放在url中发送给后端
url="http://127.0.0.1:8000/jsonp?username="+ username+"&password="+ password
script.src= url//3 将script标签添加到页面中
document.body.appendChild(script)// console.log(`用户名为${username},密码为${password}`)}}</script>//后端页面//1.引入expressconst express=require("express")//2. 创建应用对象const app=express()//设置使用原生的js来实现jsonp进行跨域,判断用户名和密码是否已经存在
app.all("/jsonp",(request, response)=>{const usernames=["张三","李四","王五"]const passwords=["123456","666666","0a2345"]var username=request.query.usernamevar password=request.query.passwordvar uindex=usernames.indexOf(username)var pindex= passwords.indexOf(password)
response.end(`hasUser(${uindex},${pindex})`)//最终返回给前端页面的是类似hasUser(1,0)的函数调用})
app.listen(8000,()=>{
console.log("服务已启动，8000端口监听中")})- 2 通过jQuery来实现JSONP：
//前端页面<body>
请输入用户名：<input type="text">
请输入密码：<input type="password"><button>提交</button><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script type="text/javascript">// 2 使用jQuery来实现JSONP$("button").on("click",function(){var username= document.getElementsByTagName("input")[0].valuevar password= document.getElementsByTagName("input")[1].value//在jQuery中url后必须带callback=?这个参数，这个就相当于原生中的hasUser()使得不再需要自己定义处理的函数了，//只需要在回调函数中对返回的数据进行处理就可以了
$.getJSON("http://127.0.0.1:8000/jsonp?callback=?",{username:username,password:password},function(data){
console.log(data)})})</script></body>//后端页面
app.all("/jsonp",(request, response)=>{const usernames=["张三","李四","王五"]const passwords=["123456","666666","0a2345"]var username=request.query.usernamevar password=request.query.passwordvar uindex=usernames.indexOf(username)var pindex= passwords.indexOf(password)const cb=request.query.callback//jQuery自带的回调函数，不需要自己定义函数了，直接在前端的回调函数中取数据就可以了
response.end(`${cb}([${uindex},${pindex}])`)})2.3 使用CORS实现跨域
CORS(Cross-Origin Resource Sharing)，跨域资源共享。CORS是官方跨域解决方案，不需要在客户端做任何特殊操作，完全在服务器端处理，支持get和post请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS是怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
<body>
//前端页面：不需要做任何更改，直接发送Ajax请求
请输入用户名：<inputtype="text">
请输入密码：<inputtype="password"><button>提交</button><scripttype="text/javascript">$("button").on("click",function(){//1 创建对象var xhr=newXMLHttpRequest()// 2 进行初始化设置var username= document.getElementsByTagName("input")[0].valuevar password= document.getElementsByTagName("input")[1].value
url="http://127.0.0.1:8000/cors?username="+ username+"&password="+ password
xhr.open("GET", url)// 3 发送请求
xhr.send()// 4 绑定事件
xhr.onreadystatechange=function(){if(xhr.readyState===4){//readyState一共有4个值：//0：初始化new XMLHTTPRequest()//1:if(xhr.status>=200& xhr.status<300){// 输出响应体
console.log(xhr.response)}}}})</script></body>app.all("/cors",(request, response)=>{//设置响应头,来实现CORS的跨域
response.setHeader("Access-Control-Allow-Origin","*");//还可以设置允许进行跨域发送Ajax的网页的url,使用*表示对所有网页都允许// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");//设置允许网页能够设置任意的请求头
response.setHeader("Access-Control-Allow-Headers",'*');//设置允许网页所有的请求方法
response.setHeader("Access-Control-Allow-Method",'*');const usernames=["张三","李四","王五"]const passwords=["123456","666666","0a2345"]var username=request.query.usernamevar password=request.query.passwordvar uindex=usernames.indexOf(username)var pindex= passwords.indexOf(password)var str=JSON.stringify({
username:uindex,
password:pindex})
response.end(str)})3 HTTP协议、请求本文和响应报文的结构
在这里插入代码片# HTTP
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
约定, 规则
## 请求报文
重点是格式与参数
行 POST /s?ie=utf-8 HTTP/1.1
请求行包含三部分内容： 请求类型(get,post...) url(可能带有参数) HTTP协议版本
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
get请求的请求体为空，post请求请求体可以不为空
## 响应报文
行 HTTP/1.1 200 OK
响应行包括三部分：HTTP协议版本 响应状态码 响应字符串
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
响应头：主要是对响应体的内容做一个描述
空行
体<html><head></head><body><h1>尚硅谷</h1></body></html>
响应体：是主要的返回结果
* 404
* 403
* 401
* 500
* 200