1.语义化标签
    具有语义的标签，见名知意的意思。
    常见的语义化标签：heard footer nav aside section article 等
    作用：使文档可读性更强，浏览器便于读取，有利于seo ，便于维护等
  2.快盒 行盒 空元素
    快盒：独占一行，自动换行 有 width height 
    行盒：出现在一行，不会换行，没有 width height 左右 margin padding 有效， 有 line-height
    空元素：没有子级节点和内容的.如： br hr
  3.label标签： 当用户选择label标签时浏览器会自动聚焦到和标签相关的表单控件上。
  4.i和em strong 和b img 中 alt和title
     i b 没有强调的语义，仅仅表示样式上是粗体或斜体
     em strong 强调文本，具有语义的标签 利于seo
     alt 浏览器识别图片解释和备注 利于seo
     title 鼠标移动到元素上，显示是对图片的解释和备注 利于维护
  5.盒模型：所有元素都可以像盒子一样的外形和平面空间，即都包含 内容区content，补白padding，边框border，边界margin 这就是盒模型。
    标准盒模型: width + margin + border + padding    box-sizing:content-box
    怪异盒模型: width(包含 padding + border ) + margin  box-sizing:border-box
  6.重排与重绘
      重排（回流）:当DOM的变化影响元素几何信息（位置，尺寸大小）浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位子。
      重绘：当一个元素外观发生改变，但没有改变布局，浏览器重新把元素外观绘制出来的过程。
      重排一定重绘，重绘不一定重排
      可能引发重排：
        添加和删除可见的dom元素 
        元素位子改变 或者使用动画
        改变元素尺寸，改变填充内容
        浏览器窗口尺寸变化resize
        设置style属性的值，通过设置style属性改变节点样式，每一次设置都会触发reflow(重排)
        调用了getComputedStyle()
       优化： 1.减少重排次数；2.缩小重排范围
  7.cokie localStorage sessionStorage
      cokie:cookie在浏览器和服务器间来回传递  4KB 可以过期
      localStorage:仅本地存储 5M  需要手动删除
      sessionStorage:仅本地存储 5M  关闭浏览器数据消失
  8.页面有哪三层构成
      结构层：由html或者xhtml相关的标记语言创建
      表示层：由css负责创建
      行为层：由javascript或dom对事件进行反应
  9.meate 和 viewport  
    meate: 可提供有关页面的元信息 name为viewport表示可供移动设备使用 
    viewport: pc端的视口是浏览器窗口区域 移动端有三个不同的视口概念：布局视口、视觉视口、理想视口。 移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是 目的是正常展示没有做移动端适应的网页，让他们完整的展示给用户.
    视口属性值 width设置layout viewport的宽度，为一个正整数，或字符串“ width-device”
              initial-scale设置页面的初始缩放值，为一个数字，可以带小数
              minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
              maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
  10.css单位 px rem em vw vh 默认字体大小为 16px， 显示12px 以下字体 transform:scale(x/12)
    px 绝对单位  像素
    em 相对单位  相对于父元素font-size
    rem 相对单位  相对于根元素font-size
    vw  相对单位  相对于视口的宽度
    wh  相对单位  相对于视口的高度
  11.link与@import 区别
      link属于html  先加载，没有兼容  权重高于@import
      @import属于css  css后加载 ie5以上才能识别   
  12. 从浏览器地址栏输入 url 到请求返回发生了什么 
      https://segmentfault.com/a/1190000013662126
  13.BFC（Block formatting context）：直译为"块级格式化上下文"，它是一个独立的渲染区域，区域外部毫不相干
    产生方式：float 的值不为 none
             position 的值不为 static 或者 relative
             display 的值是 inline-block table-cell flex table-caption inline-flex
             overflow 的值不为 visible
    规则：bfc 就是块级元素 在垂直方向一个接一个排列 垂直方向距离由margin决定 属于同一个bfc 两相邻标签外边距会重叠
    问题: float 父元素会塌陷高度，父元素变成bfc overflow:hidden  
          两元素外边距塌陷（和一起），分别放两个bfc 中 
          float 是覆盖不同元素 ，父元素加上 bfc 属性  
14.事件循环
      浏览器是多进程和多线程的。其中主要包括浏览器进程， 网络进程，渲染进程，...等，事件循环发生在渲染进程里
    渲染进程 中有渲染主线程 只有一个，其他线程若干，
    执行任务时， 代码上下文 进入 渲染主线程执行 ，根据遇到任务类型进入不同队列，等待进入主线程执行。遇到setTimeOut 会把任务交给计时任务线程 产生回调 会进入 延时队列，遇到promise.then 回调会进入微队列 ，用户交互 回调 进入 交互队列 ，而 当主线程执行完成，优先执行微对列里任务，当微队列没有时 优先执行交互队列任务，其次才是延时队列。
同一类型任务不能在不同队列，不同类型任务可以在同一队列