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：持久保持数据，除非手动删除。

注意：

1. 要访问同一个localstorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
2. 根据浏览器不同，又的会设置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新标签兼容性问题？

1. IE6，7，8支持通过doeument.createElement的方式创建的标签，所以可以通过该方式创建，创建完之后要给标签加样式。
2. 使用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重叠问题