序：总想把自己在论坛或者在实际开发中遇到的知识点整理下，一直未付诸于行动，大概自己语言水平有限吧，从此开始整理梳理知识点，以备不时之需！
session、cookie、sessionStorage、localStorage等区别？
session会在一定的时间内存储在服务器端，用来保存用户的对象信息，session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到；
cookie、sessionStorage、localStorage的相同点是都存储在客户端，不同点分别表现在存储大小、有效时间、数据与服务器的交互方式
（1）存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（2）有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
（3） 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
HTML5新增了哪些内容或API，使用过哪些？
（1）document.querySelector()和document.querySelectorAll()方法
document.querySelector()：根据css选择器返回第一个匹配的元素，如果没有匹配返回null；document.querySelectorAll("selector")：querySelectorAll和querySelector作用一样的，只是querySelectorAll返回的是元素数组，querySelector返回的是一个元素。如果querySelectorAll没有匹配的内容返回的是一个空数组。
（2）HTML5之classList属性
classList属性没有出现之前js操作元素class都是使用className,但是在开发一个网站的时候标签的class不只是一个，有可能有很多。这个时候使用className操作多个类就比较麻烦了。
length属性，表示元素类名的个数，只读；
item()支持一个参数，为类名的索引，返回对应的类名；
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了；
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
（3）内容可编辑（contenteditable）。（4）HTML5之全屏（5）HTML5之页面可见性(Page Visibility)
input和textarea的区别？
不同点：是一个单行输入框，有value属性（value属性指定初始值），但是它不能自动换行；用来放置字数较少的单行文字内容。是一个多行输入框，没有value属性，但是它能自动换行；一般让用户可以输入多行文字,输入的文字信息量相比较大。
相同点：input标签和textarea标签的使用目的都是让用户输入内容，提交内容。
用一个div模拟textarea的实现?
在一个普通的div上添加h5里面的内容contenteditable="true"，就可以实现一个div变成textarea文本输入框，contenteditable不会存在兼容性的问题，在IE6已经得到支持。<div contenteditable="true"></div>
移动设备忽略将页面中的数字识别为电话号码的方法?
如果忽略页面中的数字识别为电话号码, 只要把这个默认行为关闭就行，只要一行代码:
<meta name="format-detection" content="telephone=no">
扩展：<meta name="format-detection" content="emial=no,address=no">;
谈谈你对盒式模型的理解？
所有的HTML元素都可以看成一个盒子，它包括边距margin，边框border，填充padding，内容content。盒式模型分为IE盒式模型和W3C标准盒式模型，区别：IE的盒式模型元素的宽度（高度）为内容Content、边框border以及填充padding的宽度（高度）之和；标准盒式模型元素的宽度（高度）为内容Content的宽度（高度）之和，不包含边框border与padding的宽度与高度。标准盒式模型与W3C标准盒式模型可以通过box-sizing属性指定，box-sizing：border-box为IE盒式模型（又称怪异盒式模型），box-sizing默认为content-box标准盒式模型。
如何实现div块级元素的水平居中、水平与垂直居中，都有哪些实现方式？
水平居中：
（1）margin：0 auto;（2）display：flex；justify-content：center；
水平与垂直居中：（div的父级position：relative）
（1）div宽高确定，设置div的position：absolute，top和left设置成50%，在设置margin-top:高度/2,margin-left:宽度/2;
（2）div宽高确定，设置div的position：absolute；top、right、bottom、right设置为0，margin设置为auto；
（3）不论div的宽高是否确定，使用transform，父级position:relative;子级postion:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
（4）不论div的宽高是否确定，flex布局（IE9以下不支持），display：flex，justify-content：center；align-items：center；
流式布局，自适应布局，响应式布局，弹性布局优缺点以及使用场景？
静态布局：给页面元素设置固定的宽度与高度，单位px，窗口缩小；实际开发中再PC端比较实用，手机端适配不同分辨率，要写多个样式文件。
自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率，使用@media媒体查询技术。
流式布局：元素的宽高用百分比做单位，元素的宽高按屏幕分辨率调整。
响应式布局：采用自适应布局与流式布局的结合，为不同分辨率范围创建流式布局。
弹性布局：使用em或rem单位来定义元素宽度，与流式布局有极大的相似性，不同之处
