前端的意义：1.为用户提供更好的体验，2.处理各个浏览器兼容问题，3.提高浏览速度，做性能优化，4.为跨平台应用提供支持。5.为展示数据提供支持（数据接口）
一：浏览器识别 1.DOCTYPE 的作用：告诉浏览器使用哪个版本的HTML规范来渲染文档；当DOCTYPE不存在或者书写不正确 的时候会导致HTML文档以混杂模式呈现。
标准模式：Standards mode 以浏览器支持的最高标准运行。
混杂模式：Quirks mode 这个模式下页面是一种比较宽松的向后兼容的方式显示。
在HTML5中只需要书写，由于其不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。 HTML4.01基于SGML，所以需要引用DTD。
HTML4.01规定了三种文档类型：Strict,Transitional，Frameset；
XHTML 1.0规定了三种文档类型：Strict,Transitional，Frameset；
二，元素
1.行内元素：a span img input select
2.块级元素: div ul ol li dl dt dd h1 p
3.空元素(void): br hr link meta
三，引入样式的时候，link 和 @import的区别：
1.link是xhtml标签，无兼容问题，除了加载css之外还可以定义RSS等其他事物；@import属于CSS范畴，css.21提出来的低版本浏览器不支持，只能加载CSS。
2.link引用CSS的时候，页面载入时同时加载，支持使用JavaScript控制去改变样式；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载，而且不支持JavaScript控制改变样式。由于加载的顺序问题后者会出现：无样式内容闪烁（FOUC）.
3.link的权重高于@import；@import在使用的时候需要 （style type="text/css"标签）。
四，浏览器内核
1.Chrome：Webkit-->Blink
2.IE: Trident
3.Firefox： Gecko
4.Opera： Presto-->Webkit-->Blink
5.Safari: Webkit
五，HTML5
1.新增了图形，位置，存储，多任务等功能。解决ajax无法后退的问题：1.引入了新的API即：history.pushState, history.replaceState. 使用其接口浏览器历史，并且改变当前页面的URL。2.onpopstate监听后退。
新增元素：1.canvas，2.用于媒介回放的video和audio元素，3本地例行存储，localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除，4.语义化更换的内容元素，比如 article--footer--header--nav--section,5.位置API：Geolocation，6表单控件：calendar--date--time--email--url--dearch，7，新的技术：web worker(web worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，您可以继续做任何愿意做的事情：点击，选取内容等待，而此时web worker在后台运行)，web socket，8，拖放API：drag--drop。
移除的元素：1.纯表现的元素： basefont--big--center--font--s--strike--tt--u，2.性能较差的元素：frame--frameset--noframes
区分：DOCTYPE声明的方式是区分的主要因素，另外可以根据新增加的结构，功能来区分。
六，功能详解
1，HTML5语义化的理解：1.去掉或丢失样式的时候能够让页面呈现出清晰的结构。2。有利于SEO搜索。3.方便其他设备解析。4.便于团队开发和维护，可读性高。
2，HTML5文件的离线存储怎么使用，及其原理：在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与酒店manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。如：
在页面头部加入manifest属性：《html manifest="cache.manifest"》，在cache.manifest文件中编写离线存储的资源：
CACHE MAMOFEST #v0.11 CACHE:js/app.js css/style.css NETWORK:Resourse/logo.png FALLBACK://offline.html
3.cookies,sessionStorage和localStorage的区别
相同点：都是保存在浏览器端，且是同源的。
不同点：
1.cookies 是为了标识用户身份而存储在用户本地终端上的数据，始终在同源HTTP请求中携带，即cookies在浏览器和服务器之间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅存在本地保存。
2.存储大小的限制不同，cookies保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据可达5m。
3.数据的有效期不同，cookie在设置的cookie过期时间之前一直有效，即时窗口关闭或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
4.作用域不一样，cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即时是同一页面；localstorage在所有同源窗口都是共享。
5.iframe框架优缺点如何： 优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个页面引用iframe，那么你只需要修改iframe的内容，就可以实现调用的没赢过页面内容的更改，方便快捷。3.页面如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码可重用。4.如果遇到加载缓慢的第三方内容如图标广告等，这些问题可以有iframe来解决。
缺点：1.搜索引擎的爬虫程序无法解读这种页面。2.框架结构中出现各种滚动条。3.使用框架结构时，保证设置正确的导航链接。4.iframe页面会增加服务器的HTTP请求。
6.label标签的作用和使用：label标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label中有两个属性是非常有用的，for和accesskey。--for属性：标识label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素就获取焦点；accesskey属性：标识访问label标签所绑定的元素热键，当您按下热键，所绑定的元素将获取焦点，如：《label for="inputBox" accesskey="N"》姓名《/label》《input id="inputBox" type="text"》
html5的form有自动完成功能，如何关闭：HTML的输入框可以拥有自动完成的功能，当你输入内容的时候，浏览器会从以前的同名输入框的历史记录中查找出劣势的内容并列在输入框下面以供选择，但是有时候我们希望使用ajax技术从数据库搜索。关闭方法：1.在IE的Internet选项菜单中里面的自动完成里设置。2.设置form输入框autocomplete为on或者off来开启关闭这个功能
7.如何实现浏览器多个标签页之间的通信：1.WebSocket SharedWorker。2.也可以调用localstorge，cookies等本地存储方式。localstorage在另一个浏览上下文里被添加修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。 注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常 webSocket如何兼容低浏览器：1.Adobe Flash Socket ActiveX HTMLFile(IE)基于 multipart编码发送XHR基于长轮询的XHR；2.引用WebSocket.js这个文件夹来兼容低版本浏览器。
8.页面可见性（Page Visibility） API 可以有哪些用途:1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。2.在页面被切换到其他后台进程时，自动暂停音乐或者视频的播放。
9.如何在页面上实现一个圆形可点击区域：1.map+area或者svg；2.border-radius；3.纯Js实现，一个点不园上的算法；
10.如何实现不适用border画出1px高的线，在不同的浏览器的Quirks mode 和 CSS compat 模式下都能保存一样的效果：《div style="height:1px; overflow:hidden;background:red"》《/div》
11.网页验证码的作用：1.区分用户是计算机还是人的程序；2.可以防止恶意破解密码，刷票，水论坛； title--无明确意义，h1--表示层次明确的标题对页面信息抓取有很大影响,b--无意义的视觉表示,strong--表明重点内容,i--斜体无意义的视觉表示,em--表示强调文本;
12.websocket 和 ajax 轮询：1.websocket 只需要链接一次，就可以连续不断的得到服务器推送小时，节省宽带和服务器压力。2.ajax轮询模拟长链接，就是每隔（0.5s）就向服务器发起ajax请求，查询服务器是否有数据更新，缺点就是，每次都要建立HTTP链接，比较浪费宽带。
13.web worker 和 websocket
worker主线程：1.通过worker = new worker(url)加载一个js文件来创建一个worker，同时返回一个worker实例；2.通过worker.postMessage(data)方法来向worker发送数据。3.通过worker.onmessage方法来接收worker发送过来的数据。4.可以使用worker.terminate()来终止一个worker的执行。
websocket:是web应用程序的传输协议，它提供了双向的，按顺序到达的数据流。他是一个HTML5协议，websocket链接是持久的，通过在客户端和服务器之间保持双向链接，实现双向刷新。
