http与html相关知识点小结

1.http与https区别

http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
2、https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。
二、连接方式不同
1、http协议：http的连接很简单，是无状态的。
2、https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。
三、端口不同
1、http协议：使用的端口是80。
2、https协议：使用的端口是443．
四、证书申请方式不同
1、http协议：免费申请。
2、https协议：需要到ca申请证书，一般免费证书很少，需要交费。
http在OSI网络模型最高层应用层完成
https有安全机制，在传输层完成

2.什么是http无状态协议，如何解决

无状态协议就是没有记忆能力，一次http请求结束就结束了。第二次请求取不回上一次的数据。解决方案：session（后端），cookies，以及本地存储。

3.什么是本地存储

html5 提供了两种客户端存储数据的对象
window.localStorage（永久保存）
window.sessionStorage（关闭浏览器或标签时，数据就销毁）
使用方法：如localStorage.setItem(“key” , value);设立
localStorage.getItem(“key”)；取出。
比如当刷新页面的时候vuex里的状态就会销毁，可以通过本地存储的方法来保存vuex里的数据

4.src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

5.http几种请求方式

GET方法
发送一个请求来取得服务器上的某一资源
POST方法
向URL指定的资源提交数据或附加新的数据
PUT方法
跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
HEAD方法
只请求页面的首部
DELETE方法
删除服务器上的某资源

6.http状态码

1XX：信息状态码

100 Continue 继续，一般在发送post请求时，已发送了http
header之后服务端将返回此信息，表示确认，之后发送具体参数信息

2XX：成功状态码

200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理

3XX：重定向

301 Moved Permanently 请求的网页已永久移动到新位置。 302 Found 临时性重定向。 303 See Other
临时性重定向，且总是使用 GET 请求新的 URI。 304 Not Modified 自从上次请求后，请求的网页未修改过。

4XX：客户端错误

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。 401 Unauthorized
请求未授权。 403 Forbidden 禁止访问。 404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

500 Internal Server Error 最常见的服务器端错误。 503 Service Unavailable
服务器端暂时无法处理请求（可能是过载或维护）

7.HTML5新特征

语义化标签，header，nav，article，section，aside，footer
多媒体标签，音频 视频
新增input表单，如email，url，data，time，number，tel
拖拽API
地理定位
canvas
SVG
本地存储
websocket： WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。适合做网页版聊天通讯

8.什么是语义化

用正确的标签做正确的事情！
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

9.TCP/IP三次握手

10.当输入URL时浏览器执行过程

• DNS 域名解析（域名解析成ip地址，走UTP协议，因此不会有握手过程）：浏览器将 URL 解析出相对应的服务器的 IP 地址（
  1. 本地浏览器的 DNS 缓存中查找
  2. 再向系统DNS缓存发送查询请求
  3. 再向路由器DNS缓存
  4. 网络运营商DNS缓存
  5. 递归搜索），并从 url 中解析出端口号

• 浏览器与目标服务器建立一条 TCP 连接（三次握手）
  

• 浏览器向服务器发送一条 HTTP 请求报文
  

• 服务器返回给浏览器一条 HTTP 响应报文
  

• 浏览器进行渲染
  

• 关闭 TCP 连接（四次挥手）
  

11.浏览器渲染的步骤

HTML 解析出 DOM Tree
CSS 解析出 Style Rules
两者关联生成 Render Tree
Layout（布局）根据 Render Tree 计算每个节点的信息
Painting 根据计算好的信息进行渲染整个页面

12.HTTP response报文结构是怎样的

首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个CRLF空行分隔
最后是一个可能的消息实体

13.web攻击方式

跨站脚本攻击（XSS）：通过存在安全漏洞的web网站注册用户的浏览器内运行非法的HTML标签或javascript进行的一种攻击。动态创建HTML部分有可能隐藏着安全漏洞。
分类：反射型，存储型，基于DOM
防范措施：输入过滤，避免XSS的方法之一主要是将用户输入的内容进行过滤，对所有用户提交内容进行可靠的输入验证，包括对URL、查询关键字、POST数据等
输出转义：例如往HTML标签之间插入不可信数据的时候，首先要做的就是对不可信数据进行HTML Entity编码
跨站请求伪造（csrf）：伪造请求，冒充用户在站内的正常操作。
防范措施：验证HTTP Referer 字段，利用HTTP头中的Referer判断请求来源是否合法，Referer记录了该HTTP请求的来源地址
在请求地址中添加token并验证

14.浏览器缓存

强缓存：

强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control
。强缓存表示在缓存期间不需要请求，state code为 200

Expires

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 是 HTTP/1 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

Cache-control

Cache-control: max-age=30

Cache-Control 出现于 HTTP/1.1，优先级高于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。
Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用多种指令

协商缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag
当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。
Last-Modified 和 If-Modified-Since

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified
的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304 状态码。