Doctype作用，HTML5 为什么只需要写<!DOCTYPE HTML>？
Doctype是一种标准通用标记语言的文档类型声明，作用是告知浏览器的解析器用什么文档标准解析这个文档。
<!DOCTYPE>声明位于HTML文档中的第一行，在<html> 标签之前。
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
SGML：标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。BUT，HTML5不是的。
DTD：文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。
html5有哪些新特性?移除了哪些元素？
HTML5和CSS3新特性一览
HTML5新特性 —— 新特性
(1)新的语义标签和属性：header footer nav section article aside 等
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
(8)Web Worker
(9)Web Storage
客户端存储数据的两个对象为：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。
(10)WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
已移除的元素：
<acronym>、<appplet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframese>、<strike>、<tt>
简述一下你对HTML语义化的理解？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）；
这样的好处：
①有利于构建良好的HTML结构，便于团队的开发、维护；
②有利于搜索引擎的建立索引、抓取，利于SEO；
③有利于不同设备的解析。
行内元素有哪些，块级元素有哪些，空(void)元素有哪些？行内元素和块级元素有哪些区别和联系？
（1）
行内元素：a、b、img、span、label、input、select、button、strong、textarea 等
块级元素：div、ul、ol、li、h1~h6、p、table、dl、dt、dd 等
空元素：br、hr、link 等
（2）
①行内元素与块级函数可以相互转换，通过修改display属性值，行内元素display：inline，块级元素display：block。
②行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
③行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置边距margin和padding的上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
④块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
px,em和rem的区别？如何使用rem?
（1）
px：是一个虚拟长度单位，是相对于显示器屏幕分辨率而言的；
em：相对长度单位，相对于使用em元素的字体尺寸；
rem：相对长度单位，相对于根元素html的字体尺寸。
（2）
①先设置header里面的meta标签
1
②在header写上<script>标签
1
cookie、session、localstorage和sessionstorage的区别及使用场景？
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
1、存储位置不同
cookie的数据信息存放在客户端浏览器上。
session的数据信息存放在服务器上。
2、存储容量不同
单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。
对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。
3、存储方式不同
cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。
session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。
4、隐私策略不同
cookie对客户端是可见的，别有用心的人可以分析存放在本地的cookie并进行cookie欺骗，所以它是不安全的。
session存储在服务器上，对客户端是透明对，不存在敏感信息泄漏的风险。
5、有效期上不同
开发可以通过设置cookie的属性，达到使cookie长期有效的效果。
session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。
6、服务器压力不同
cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。
session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。
7、浏览器支持不同
假如客户端浏览器不支持cookie：
cookie是需要客户端浏览器支持的，假如客户端禁用了cookie，或者不支持cookie，则会话跟踪会失效。关于WAP上的应用，常规的cookie就派不上用场了。
运用session需要使用URL地址重写的方式。一切用到session程序的URL都要进行URL地址重写，否则session会话跟踪还会失效。
假如客户端支持cookie：
cookie既能够设为本浏览器窗口以及子窗口内有效，也能够设为一切窗口内有效。
session只能在本窗口以及子窗口内有效。
8、跨域支持上不同
cookie支持跨域名访问。
session不支持跨域名访问。
应用场景
- 登录网站，今输入用户名密码登录了，第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是cookie。
- session一个场景是购物车，添加了商品之后客户端处可以知道添加了哪些商品，而服务器端如何判别呢，所以也需要存储一些信息就用到了session。
session的使用？
单点登录的原理是后端生成一个 session ID，设置到 cookie，后面所有请求浏览器都会带上cookie，然后服务端从cookie获取 session ID，查询到用户信息。
所以，保持登录的关键不是cookie，而是通过cookie 保存和传输的 session ID，本质是能获取用户信息的数据。
websocket 跟 socket 的区别?
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
软件通信有七层结构，下三层结构偏向与数据通信，上三层更偏向于数据处理，中间的传输层则是连接上三层与下三层之间的桥梁，每一层都做不同的工作，上层协议依赖与下层协议。基于这个通信结构的概念。
Socket 其实并不是一个协议，是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口。当两台主机通信时，让 Socket 去组织数据，以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议，IP 协议的连接则依赖于链路层等更低层次。
WebSocket 则是一个典型的应用层协议。
总的来说：Socket 是传输控制层协议，WebSocket 是应用层协议。
什么是SVG？SVG的优势？SVG与Canvas的区别？
（1）
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
（2）
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
（3）
Canvas 与 SVG 的比较
| Canvas | SVG |
|---|---|
|
|
href与src的区别？
href=‘xxx‘ 用于建立与外部资源的链接，与文档渲染同时进行，不影响页面加载；
src是source的缩写，所在位置将被替换为其指向的文件内容，常见的如js和image，页面遇到此类元素会暂停渲染直到src内容加载并执行编译完成，再加载后续资源。故script标签常放在body最下方。
link和@import的区别？
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
WebSocket原理及使用场景？
HTML5的离线存储工作原理?如何使用？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE：
js/app.js
css/style.css
NETWORK：
resourse/logo.png
FALLBACK：
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。