web开发的一些基础知识（学习笔记HTTP、WEB、HTML）

HTTP

Hyper Text Transfer Protocol

HTTP的几种请求方法用途

• GET 方法
  发送一个请求来获取服务器上的资源。
• POST方法
  向指定资源提交数据或附加新的数据进行处理请求。POST请求可能会导致新的资源的创建或已有资源的修改。
• PUT方法
  向指定资源位置上传其最新内容。
• HEAD方法
  只请求页面的首部，向服务器所要与GET请求相一致的响应，只不过响应体将不会被返回。在不必传输整个响应内容的情况下，可以用来获取响应消息头中的元信息。
• DELETE方法
  请求服务器删除Request-URI 所标识的资源
• OPTIONS方法
  返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向web服务器发送‘*’的请求来测试服务器的功能性。
• TRACE方法
  激发一个远程的，应用层的请求消息回路，主要用于测试或诊断。
• CONNECT方法
  把请求转换到透明的TCP/IP通道。

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 服务器端暂时无法处理请求（可能是过载或维护）。

WEB

浏览器显示页面步骤

• 浏览求根据请求的URL交给DNS域名解析到的IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收数据；
• 浏览器将加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
• 载入解析到的文件，渲染页面，完成

网站性能优化

• content方面
  - 减少HTTP请求：合并文件、CSS精灵、inline Image
  - 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  - 减少DOM元素数量

• Server方面
  - 使用CDN
  - 配置ETag
  - 对组件使用Gzip压缩

• Cookie方面
  - 减小cookie大小

• css方面
  - 将样式表放到页面顶部
  - 不使用CSS表达式
  - 使用不使用@import

• Javascript方面
  - 将脚本放到页面底部
  - 将javascript和css从外部引入
  - 压缩javascript和css
  - 删除不需要的脚本
  - 减少DOM访问

• 图片方面
  - 优化图片：根据实际颜色需要选择色深、压缩
  - 优化css精灵
  - 不要在HTML中拉伸图片

大量图片网站优化

• 图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• 如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
• 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

HTML

HTML5新特性

• 绘画canvas
• 用于媒介回访的 video 和 audio 元素
• 本地离线存储 localStroage 长期存储数据，浏览器关闭后数据不会丢失
• sessionStroage 的数据在浏览器关闭后自动删除
• 语义化更好的内容元素，比如 article 、footer、header、nav、section
• 表单控件，calendar、date、time、email、url、search
• 新的技术webworker、websocket、Geolocation

行内元素与块级元素

• 行内元素有：a b span img input select strong button label textarea script
• 块级元素有：div ul ol li dl dt dd h1 p form header table
  区别：
• 行内元素不可以设置宽高，不独占一行
• 块级元素可以设置宽高，独占一行