<!-- 像素： - 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素 - 分辨率：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像素和物理像素的比值 --> <!-- 移动端默认的视口大小是980px(css像素)， 默认情况下，移动端的像素比就是 980/移动端宽度 （980/750） 如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好， 导致网页中的内容非常非常的小 编写移动页面时，必须要确保有一个比较合理的像素比： 1css像素 对应 2个物理像素 1css像素 对应 3个物理像素 - 可以通过meta标签来设置视口大小 - 每一款移动设备设计时，都会有一个最佳的像素比， 一般我们只需要将像素比设置为该值即可得到一个最佳效果 将像素比设置为最佳像素比的视口大小我们称其为完美视口 将网页的视口设置为完美视口 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 结论：以后再写移动端的页面，就把上边这个玩意先写上 --><!-- 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 -->同源策略：最早有Netscape公司提出，是游览器的一种安全机制，同源即来源必须相同，当前网页的url和请求目标资源的url的协议、域名、端口号都必须一致，违背同源策略就是跨域，Ajax策略默认支持同源策略。
Jsonp(JSON with padding)，是一个非官方的跨域解决方案，纯粹是凭借程序员的聪明才智开发出来的，只支持get请求。
网页中有一些标签天生就具有跨域能力，比如：img，link，iframe，script等。
JSONP就是利用script标签的跨域能力来发送Ajax请求的，通过script的src属性获取的是一个函数调用的字符串，同时这个字符串在script标签中需要有定义。
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端口监听中")})//前端页面<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}])`)})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)})在这里插入代码片# 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