基础知识

meta viewport 相关

<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang="”en”">
  标准的 lang 属性写法
  <meta charset="’utf-8′" />
  声明文档使用的字符编码
  <meta http-equiv="”X-UA-Compatible”" content="”IE" ="edge,chrome" ="1″" />
  优先使用 IE 最新版本和 Chrome
  <meta name="”description”" content="”不超过150个字符”" />
  页面描述
  <meta name="”keywords”" content="””" />
  页面关键词
  <meta name="”author”" content="”name," email@gmail.com” />
  网页作者
  <meta name="”robots”" content="”index,follow”" />
  搜索引擎抓取
  <meta
    name="”viewport”"
    content="”initial-scale"
    ="1,"
    maximum-scale="3,"
    minimum-scale="1,"
    user-scalable="no”"
  />
  为移动设备添加 viewport
  <meta name="”apple-mobile-web-app-title”" content="”标题”" />
  iOS 设备 begin
  <meta name="”apple-mobile-web-app-capable”" content="”yes”" />
  添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
  <meta
    name="”apple-itunes-app”"
    content="”app-id"
    ="myAppStoreID,"
    affiliate-data="myAffiliateData,"
    app-argument="myURL”"
  />
  添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
  <meta name="”apple-mobile-web-app-status-bar-style”" content="”black”" />
  <meta name="”format-detection”" content="”telphone" ="no," email="no”" />
  设置苹果工具栏颜色
  <meta name="”renderer”" content="”webkit”" />
  启用360浏览器的极速模式(webkit)
  <meta http-equiv="”X-UA-Compatible”" content="”IE" ="edge”" />
  避免IE使用兼容模式
  <meta http-equiv="”Cache-Control”" content="”no-siteapp”" />
  不让百度转码
  <meta name="”HandheldFriendly”" content="”true”" />
  针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
  <meta name="”MobileOptimized”" content="”320″" />
  微软的老式浏览器
  <meta name="”screen-orientation”" content="”portrait”" />
  uc强制竖屏
  <meta name="”x5-orientation”" content="”portrait”" />
  QQ强制竖屏
  <meta name="”full-screen”" content="”yes”" />
  UC强制全屏
  <meta name="”x5-fullscreen”" content="”true”" />
  QQ强制全屏
  <meta name="”browsermode”" content="”application”" />
  UC应用模式
  <meta name="”x5-page-mode”" content="”app”" />
  QQ应用模式
  <meta name="”msapplication-tap-highlight”" content="”no”" />
  windows phone 点击无高光 设置页面不缓存
  <meta http-equiv="”pragma”" content="”no-cache”" />
  <meta http-equiv="”cache-control”" content="”no-cache”" />
  <meta http-equiv="”expires”" content="”0″" />
</head>

获取屏幕的高度和宽度（屏幕分辨率）

window.screen.height/width 获取屏幕工作区域的高度和宽度（去掉状态栏）：
window.screen.availHeight/availWidth 网页全文的高度和宽度： document.body.scrollHeight/Width
滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft
网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth
网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

边距重叠解决方案(BFC) BFC 原理

内部的 box 会在垂直方向，一个接一个的放置每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从做往右的格式化，否则相反）
box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠
bfc 的区域不会与浮动区域的 box 重叠
bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面的也不会影响外面的
计算 bfc 高度的时候，浮动元素也会参与计算创建 bfc
float 属性不为 none（脱离文档流）
position 为 absolute 或 fixed
display 为 inline-block,table-cell,table-caption,flex,inine-flex
overflow 不为 visible

HTTP

常见状态码

2 开头（请求成功）表示成功处理了请求的状态代码

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。 201 （已创建）请求成功并且服务器创建了新的资源。 202 （已接受）服务器已接受请求，但尚未处理。 203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。 204 （无内容）服务器成功处理了请求，但没有返回任何内容。 205 （重置内容）服务器成功处理了请求，但没有返回任何内容。 206 （部分内容）服务器成功处理了部分 GET 请求。

开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。 302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。 304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。 307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4 开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理

400 （错误请求）服务器不理解请求的语法。 401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。 403 （禁止）服务器拒绝请求。 404 （未找到）服务器找不到请求的网页。 405 （方法禁用）禁用请求中指定的方法。 406 （不接受）无法使用请求的内容特性响应请求的网页。 407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。 408 （请求超时）服务器等候请求时发生超时。 409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。 410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。 411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。 412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。 413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。 415 （不支持的媒体类型）请求的格式不受请求页面的支持。 416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。 417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5 开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错

500 （服务器内部错误）服务器遇到错误，无法完成请求。 501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。 502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。 503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。 504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。 505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

请求行，请求头，请求体详解

osi 模型

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 tcp ucp属于传输层；http属于应用层

http2.0 http1

HTTP2.0 的基本单位为二进制帧
HTTP2.0 中帧具有优先级
HTTP2.0 的多路复用（ 1 次连接）
HTTP2.0 压缩消息头
HTTP2.0 服务端推送
HTTP2.0 只适用于 HTTPS 的场景

meta viewport 相关​

获取屏幕的高度和宽度（屏幕分辨率）​

边距重叠解决方案(BFC) BFC 原理​

HTTP​

常见状态码​

2 开头 （请求成功）表示成功处理了请求的状态代码​

开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向​

4 开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理​

5 开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错​

请求行，请求头，请求体详解​

osi 模型​

http2.0 http1​