html5/css3基础面试题

一、html5 有哪些新特性、移除了那些元素，如何处理 HTML新标签的浏览器兼容性问题？如何区分 HTML 和 HTML5?

新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签(header、footer、section、nav、aside、article)
3. 音频、视频API(audio、video)
4. 画布API(Canvas)
5. 地理API(Geolocation)
6. 本地存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
   移除的元素：
9. 纯表现的元素：font、basefont、big、center、s、strike；
10. 对可以用性产生负面影响的元素：frame、frameset、noframes；
    兼容性问题：
    IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签。
    如何区分：
    DOCTYPE声明、新增的结构元素、功能元素

二、CSS3 有哪些新特性？

1. 圆角（border-radius）、阴影（box-shadow）
2. 文字特效（text-shadow）、线性渐变（gradient）、旋转（transform）
3. 更多的CSS选择器 多背景 rgba
4. 媒体查询，多栏布局
5. border-image
6. 唯一的伪元素时是 ::selection

三、描述下 cookies，sessionStorage 和 localStorage 的区别：

相同点：都是存储在客户端
不同点：
1. 存储大小:
* cookies 数据大小不能超过4k
* sessionStorage 和 localStorage 虽然也有存储大小的限制，但是比 cookies 大的多，可以达到5M以上
2. 有效时间：
* cookies 设置的 cookies 过期时间之前会一直有效，即使浏览器关闭
* localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除
* sessionStorage 数据在当前浏览器窗口关闭时自动删除
3. 数据与服务器的交互方式：
* cookies 的数据会自动传到服务器，服务器端也可以写 cookies 都客户端
* localStorage 和 sessionStorage 不会自动把数据传输到服务器，仅在本地保存

四、CSS 有个content 属性？有什么作用？

css 的 content 应用在 before/after 伪元素上，用来插入生成的内容。最常见是利用伪元素清除浮动

1. 为什么要清除浮动？如何清除浮动？
   防止高度塌陷问题。设置父元素overflow:hidden/auto;
   .clearfix::after{ content:" ", display:block; clear:both }