HTML、CSS知识点整理
1.如何区分HTML5和HTML？
声明必须位于文档中的第一行，即HTML5。2.HTML5新特性有哪些？移除了哪些元素？
新特性包含：语义化标签、媒体元素、增强型表单、Web Socket、Web Storage、canvas、拖放、位置、存储等。
新增语义化标签
包含：canvas、vedio、audio、footer、header、nav、artical、section、main、aside等...
增强型表单
新增输入型控件，如number、url、email、range、color、date等，同时添加了placeholder、required、pattern、min、max、height、width等表单属性。
媒体元素
视频audio和音频video。 这两个标签包含autoplay、controls、src等属性，还可以触发很多事件，让开发人员在使用少量代码情况下编写出音频/视频播放器。
Web Storage
Web Storage的目标是：
- 提供一种cookie之外的存储数据途径。
- 提供一种存储大量可以跨会话的数据机制。
常用两个对象是LocalStorage和SessionStorage。
SessionStorage：浏览器关闭时数据失效。
LocalStorage：持久保持数据，除非手动删除。
注意：
- 要访问同一个localstorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
- 根据浏览器不同，又的会设置5MB或者2.5MB的限制。
移除元素
frame、frameset、big、center、dir等...
Web Sockets
它的目的是提供全双工、双向通信。 未加密的连接不是http而是ws://, 加密的连接也不是https而是wss://
用法：
（1）创建websocket
var socket = new WebSocket('ws://www.example.com/');
（2）发送数据
socket.send('hello world');
对于复杂结构数据必须先序列化再发送
（3）接收数据
socket.onmessage = function(event){
const data = event.data
}
(4) 关闭连接
socket.close()
3.常用浏览器内核？
常用浏览器有IE、火狐、Chrome、safari、360搜狗等。
内核：IE（Trident）、火狐（Gecko）、Chrome和safari（Webkit）、360和搜狗分极速模式和兼容模式。极速模式用webkit，兼容模式用Trident。
4.如何处理HTML5新标签兼容性问题？
- IE6，7，8支持通过doeument.createElement的方式创建的标签，所以可以通过该方式创建，创建完之后要给标签加样式。
- 使用HTML5shim方式，引入IE hack
5.浏览器标准模式和怪异模式的区别？
标准模式：浏览器根据W3C标准而产生的渲染模式，标准盒模型中，高度是内容的高度。
怪异模式：浏览器前期为了兼容早期旧的浏览器版本设计的，称为IE盒模型，高度是内容高度+padding+border。
6.渐进增强和优雅降级的区别？
渐进增强：先保证低版本浏览器的基本功能，再兼容高版本的交互。
优雅降级：先保证高版本的功能和交互，再去向下兼容低版本的浏览器。
7.script中async和defer的区别？
首先，async和defer都是script标签的一个属性，都是为了保证浏览器不阻塞出现的。 我们知道浏览器解析是自上而下开始的。
当script没有加这两个属性时，浏览器按照顺序解析。
当加defer属性时：HTML解析遇到script外来脚本，则HTML解析不会停止，同时开始加载js脚本，等HTML解析完成后，再执行js脚本。（注：有src时才有效）
当加async属性时：HTML解析遇到script外来脚本，则HTML解析不会停止，同时开始加载js脚本，等js脚本加载完成，则HTML停止解析，等js脚本执行完成后再继续HTML解析。
8.cookie、sessionStorage、localStorage的区别是什么？
9.iframe框架有哪些优缺点？
10.CSS里的visiblity属性有个collpase属性值？在不同浏览器下有什么区别？
总结来说：在表格里，visiblity：collpase和dispaly：none的表现一样。
在平时，visibilty：collpase和visiblty：hidden一样。
11.display:none和visibility:hidden的区别？
display：none会隐藏对应元素，在文档布局中不再占用空间（回流+重绘）
visibility: hidden也会隐藏对应元素，但是元素在文档布局中仍然保留原来的空间（重绘）
12.说一下什么是BFC？
BFC：block formattting context，块级格式化上下文。 BFC可以理解为一个独立的容器，在容器中进行布局不会影响外部的样式。
形成BFC的条件：
- 元素设置float：left/right
- 元素设置overflow：hidden
- 元素设置position：absolute等
BFC能够解决：
- 父元素高度塌陷问题
- margin重叠问题