HTTP

前端三剑客

1. HTML 骨架

2. CSS 衣服

3. JAVASCRIPT 动作

BOOTSTRAP(HTML+CSS)

1. 前后端结合UI框架
2. 特点
   1. 小而轻便
   2. 容易上手

*Vue框架

1. axios工具

JQuery(javascript)

1. 封装了一系列JS操作，可以大大简化js代码和操作方式
2. 封装了一个工具ajax

浏览器请求步骤

1. 输入地址
   1. 网址
   2. 解析IP和port
   3. 建立TCP连接
   4. 后端服务器收到请求和数据
   5. 返回客户端
   6. 前端拿到数据
   7. 渲染完成，本次请求断开

URL地址解析


HTTP协议

mac地址、广播、ethernet/IP/PORT/HTTP

客户端有哪些

1. 自己写的TCP客户端
2. 浏览器
3. CS架构里面符合C的程序
4. BS架构里符合B的程序

问题

1. 自己写的客户端无法与浏览器
2. 原因：浏览器和服务端之间的交互需要遵循HTTP协议
3. HTTP协议：规定服务端和浏览器之间数据交互的格式，数据量大就可以做成APP

HTTP协议规范

什么是HTTP协议

1. hyper text transaction proto

2. 两种

   1. http:
      1. 默认80端口
   2. https:有TLS/SSL认证的协议
      1. 默认端口8443

3. http特点：

   1. 基于请求和响应的协议，服务端不会主动联系客户端

   2. 基于TCP/IP协议之上的应用层协议

   3. 无状态：客户端每次都会主动向服务端发送请求，下次同一个客户端再次发起请求，也不认识，默认不保存客户端状态

   4. 短链接：客户端向服务端发起请求，建立连接，五福短相应数据后立马断开连接。

      （补充概念）长链接：客户端和服务端不断交互，处理完成不会断开连接

HTTP请求和响应

HTTP请求格式：

1. 请求首行(请求方法、协议版本)

   1. 请求方法
      1. GET
      2. POST
      3. PUT
      4. PATCH
      5. DELETE
      6. OPTION
      7. HEAD

2. 请求头（K:V）

   1. host

   2. content-type

   3. user-agent

   4. authorization

   5. content-length

   6. referer

   7. accept

   8. accept-encoding

   9. pragma

   10. cache-control

   11. upgrade

   12. connection

3. 换行

4. 请求体

HTT响应格式：

1. 响应首行(请求方法、协议版本)
2. 响应头（K:V）
   1. content-type
   2. content_length
   3. conten-encoding
   4. server
   5. date
   6. location
   7. cache_control
   8. refresh
   9. connection
   10. transfer-encoding
   11. content-disposition
   12. expires
   13. ...
3. 换行
4. 响应体
   1. 响应状态码
      1. 1xx 预检请求，向服务端验证
      2. 2xx 相应数据成功 200 OK
      3. 3xx 重定向请求，带一个定向地址
      4. 4xx 服务器资源不存在 404
      5. 5xx 服务器宕机，遇到错误

HTML介绍

1. hyper text markdown language,是一种语法

2. HTML注释语法

   1. 注释

      1. 单行注释

      2. 多行注释<!--***

         ​ -->

   2. HTML文档结构

      1. head常用标签

         1. meta标签：原数据
            1. meta charset='utf-8'
         2. title:标题
         3. script标签：内部书写/引入js代码
         4. link：引入CSS文件
         5. style：内部书写css代码

      2. body 常用标签

         1. h1/h2...h6：标题标签,会自动加粗

         2. b：加粗标签

         3. i :斜体标签

         4. u :下划线

         5. s:删除线

         6. p:段落标签

         7. br:换行标签

         8. hr:水平分割线

         9. a:超链接

         10. img:插入图片<img src='地址'，alt =>

         11. ul/li 无序列表

         12. ol/li 有序列表

         13. div:块级标签

         14. span:行级标签

         15. table，tr,td：表格标签

             1. thead:
                1. tr
                2. td
             2. tbody
                1. tr
                2. td

         16. form：表单