【前端刷题】

(1)  cookie、sessionStorage、localStorage三者的区别

相同：三者都存储在浏览器端。

不同：① 存储大小。cookie只能存储4k左右的数据，而其它两者可以存储5M左右。② 生命周期。cookie可以通过expires设置实效时间，如果不设置就默认关闭浏览器失效；localStorage除非用户自己手动清除，否则永久保存；sessionStorage仅在当前会话生效，关闭页面即失效。③ HTTP请求。cookie每次都会携带在http请求头中发送个服务端，过多使用会带来性能问题。但是其它两者一直是存在客户端中不参与和服务器的通信。④ 应用场景：cookie适合识别用户登录；localStorage可以用来跨页面传递参数；sessionStorage用来保存临时数据，防止用户刷新页面后数据丢失。

(2)  HTML5新特性、语义化

概念： HTML5语义化是指合理正确地使用语义化标签来创建页面结构。

语义化标签：header、nav、footer、secition、aside、main、article

优点：① 没有CSS样式的情况下，页面整体也能呈现出很好的结构效果。② 代码结构清晰，易于阅读。③ 利于开发和维护，方便其它设备解析，根据语义来渲染页面。④ 有利于搜索引擎优化，搜索引擎爬虫会根据不同的标签来赋予不同的权重。

(3)  position属性的值有哪些及其区别

static：位置设置为static的元素，他始终处于页面流给予的位置，static元素会忽略任何top,buttom,left,right声明。

relative：位置设置为relative的元素，可将其移至相对于其正常位置的地方，因此left：20会将元素移至元素正常位置左边20个像素的位置。

absolute：此元素可定位于相对包含他的元素的指定坐标，此元素可通过left，top等属性规定。

fixed：位置被设为fiexd的元素，可定为与相对浏览器窗口的指定坐标，可以通过left，top，right属性来定位。

sticky：将元素黏在页面的某个位置上。