【面试题总结】HTML

Cookie、sessionStorage、localStorage的区别

Cookie:

• 数据在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，会造成带宽浪费。
• cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• cookie需要指定作用域，不可以跨域调用，在所有同源窗口都是共享的。。
• 存储大小只有4K左右

sessionStorage：

• 不会自动把数据发给服务器，仅在本地保存。
• 仅在当前浏览器窗口关闭前有效，不能用于持久化的本地存储。
• 不在不同的浏览器窗口中共享，即使是同一个页面。

localStorage：

• 不会自动把数据发给服务器，仅在本地保存。
• 始终有效，窗口或浏览器关闭也一直保存，可用作持久数据。
• 在所有同源窗口都是共享的。

为什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便。
• 突破浏览器并发限制。
• 节省带宽
• 节约主域名连接数，优化页面响应速度
• 防止不必要的安全问题

浏览器版本兼容，渐进增强和优雅降级

渐进增强： 针对低版本的浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级： 先在高版本浏览器上构建完整的功能，然后针对低版本的浏览器进行兼容修改。

两者选择： 在理想的情况下（开发时间充裕、开发资金到位），渐进增强肯定优于优雅降级，增进增强是向前看的做法，符合版本迭代的思想。但是在实际的情况下，在刚开发一个网页的时候，肯定不能做只有基本功能的网页给客户，然后在一步步升级功能，需要一个功能齐全的网页给客户，然后投放到市场进行试水，看看能不能被用户所接受。所以现实用许多公司采用的都是渐进增强。

行内元素、块级元素、空元素有哪些

行内元素： a、b、span、img、input、strong、select、label、em、button、textarea

块级元素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素（没有内容的HTML元素）： br、meta、hr、link、input、img

DOCTYPE作用是什么

DOCTYPE声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了以后就会以标准模式来进行文档解析，否则就以兼容模式进行解析。

THML5移除了哪些元素

1. 纯表现的元素：basefont, big, center, font, strike, tt, u
2. 对可用性产生负面影响的元素：frame, frameset, noframes;

iframe的优缺点

优点：

1. 解决加载缓慢的第三方内容（图标、广告）的加载问题。
2. 无刷新文件上传
3. 跨域通信
   缺点：
4. iframe会阻塞主页面的Onload事件
5. 无法被一些搜索引擎索引到
6. 增加服务器的Http请求
7. 产生很多页面，不容易管理

常用的浏览器有哪些，内核是什么

浏览器	内核
IE	Trident
火狐	Gecko
chrome	Webkit
safari	Webkit
360(极速模式）	Webkit
搜狗(极速模式）	Webkit
360(兼容模式）	Trident
搜狗(兼容模式）	Trident

IE、火狐（firefox）、chrome、safari、360、搜狗