从地址栏输入URL到呈现页面
1.浏览器向服务器请求解析URL中域名对应的IP地址。
2.建立TCP连接（三次握手）。
3.浏览器发出读取文件的HTTP请求，第三次握手发出的
4.服务器对浏览器做出响应，并把对应的HTML文本发给浏览器
5.浏览器将该HTML文本展示
6.释放TCP连接
建立TCP连接，三次握手，四次挥手
三次握手
1.第一次握手：client将SYN置为1，随机产生一个值seq=J，并将数据包发给Server，Client进入SYN_SENT状态
2.第二次握手，Server收到数据包，Server将SYN和ACK都置为1，ack = J+1；随机产生一个seq=K，发给Client，并进入SYN_RCVD状态。
3.第三次：client收到确认后，检查ack是否为J+1，ACK是否为1，正确则将标志位ACK置为1，ack = K+1，并将数据发给Server，server检查ack是否为K+1，ACK是否为1，如果正确则建立连接成功。
HTTP的方法，post，get
HTTP1.0 定义了三种请求方法，GET，POST和HEAD方法，
HTTP1.1新增六种：OPTIONS,PUT,PATCH,DELETE,TRACH,CONNECT
表现形式上:get请求的数据会附加在URL后面，以？分割，多参数用&连接，并且以ASCII编码，部分非ASCII 需编码，可缓存； post请求数据放在请求体中，不可缓存。
传输数据：GET请求，HTTP规范对URL长度没有进行限制，而是浏览器和服务器对URL的长度加以限制，所以GET请求时，传输数据会受限制；
POST不是URL传值，理论上无限制，但服务器一般会对POST传输的数据大小进行限制。
安全性 POST利用请求体传值安全性更高。
xss
跨站脚本攻击，是指攻击者在返回的HTML中嵌入JavaScript脚本，为了减轻这些攻击需要在http头部配上set-cookie:'httponly',会禁止js访问cookie,
攻击类型：反射，
存储，基于DOM
解决办法：httponly防止截取cookie，
输入检查，对输入进行过滤，特别是<>
输出检查：输出时，进行编码和转义，
CSRF
跨站请求伪造，攻击者借助受害者的cookie骗取服务器的信任，以受害者的名义伪造请求，发送给受攻击的服务器，从而进行攻击。
cookie是服务器发送到浏览器 并保存在本地的一小块数据，主要用于，会话状态管理，
防范：验证码
Referer check检测请求来源是否合法，或者添加随机产生的token
AJAX
就是异步的JavaScript和XML，
同步是这一步完成后，才能进行下一步，一步的话，不等这一步回调返回，即开始执行下一步了。
AJAX包含的技术：使用css和XHTML表示，使用DOM模型交互，使用XMLHttpRequest和服务器进行异步通信。Js绑定和调用。
原理简单来说，通过 XMLHTTPRequest对象向服务器发送请求，从服务器获取数据，然后进行更新页面，
优点：无刷新更新数据，异步与服务器通讯，减少后端负荷，
AJAX，无法使用back和history功能。
会引起安全问题，跨站脚本攻击，SQL注入
搜索引擎支持较弱。
原生
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","ajax_info.json",true);//POST可以发送大量数据
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置请求，GET忽略。
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
console.log(xhr.responseText);
}jquery中
$.ajax({
type:'get',
url:'abc.php',
data:{},
dataType:'json',
timeout:3000,
beforeSend:function(){
// 发送之前就会进入这个函数
// return false 这个ajax就停止了不会发 如果没有return false 就会继续
},
success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
},
error:function(){//失败的函数
},
complete:function(){//不管成功还是失败 都会进这个函数
}
})
$.ajax({
type:'get',
url:'',
data:{},
dataType:"json",
success:function(data){
}
})axios
axious.get('/uesr?id=1')
.then(function(response){
console.log(response);
}).catch(function(error){
console.log(error);
});
//post也一样
post，get区别
1、从http的标准来看，get安全，针对服务器来说的，get用于获取数据不会引起数据发生变化，post可能会引起数据发生变化。
2、get传参，参数在URL中，不安全，而post参数在request body里面，post比get安全，并且get会被缓存，但post支持多种编码，提交数据理论上没限制。
GET和POST是什么?HTTP协议中的两种发送请求的方法。
HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。
HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。
响应式布局和兼容性
优势：针对不同的设备灵活性强，但兼容各种设备代码较多，
1.先写固定布局，在添加媒体查询，和响应式代码。
2.一般要加meta标签，name=“viewport” content = "width=device-width,initial-scale=1,minimum-scale = 1,user-scalable =no" 并且禁止缩放。
3、@media screen and (max-width:980px){
}
link 中media也可以。
4、宽度百分比
兼容性
解决方案主要是css hack(不同的浏览器，不同的样式)
1、默认内外边距不同，用*margin：0；padding：0；
2、块元素含有图片时，ie6-7会出现图片下有空隙。
解决：div和img同一行
图片转化为block,(img是行内替换元素，与incline-block有相似)
设置图片垂直对齐。设置浮动。
3、ul和ol列表缩进问题
IE：margin :0;
firebox :margin :0; padding:0; list-style:none;
4、针对IE。HTML条件注释，
a标签加 样式，设置display：block；
5、IE6双边距，display：incline；
height太小，overflow：hidden；
6、透明度问题：用各个浏览器的私有属性。
