HTML5
HTML5
1、HTML5简介
HTML5是HTML最新修订版本,设计的目的是为了在移动设备上支持多媒体,HTML5改进:
1.1、声明方式:
-
HTML5 不基于 SGML,因此不需要对DTD进行引用,因此直接通过以下来声明即可:
-
<!DOCTYPE html>
1.2、改进能力:
-
新语义元素、新属性、多媒体功能、绘制图形能力、完全支持CSS3、应用能力(如本地离线存储、访问本地文件、本地SQL数据、缓存引用等);
-
移除元素:
- 纯表现的元素:acronym、applet、basefont、big、center、font、s、strike、tt、u等;
- 对可用性产生负面影响的元素:frame、frameset、noframes;
-
HTML5新标签兼容问题:现代的浏览器都已支持,但旧的浏览器可能不支持;
- 将 HTML5 元素通过CSS
display:block
定义为块元素; - 通过 document.createElement 创建新标签;
- 使用垫片 html5shiv.js
- 将 HTML5 元素通过CSS
2、新元素
2.1、绘图:
-
canvas:标签只是图形容器,需要通过js脚本进行绘制图形,具体见js部分;
- 位图,依赖分辨率,不支持事件处理器,弱文本渲染能力;
- 可保存为图像,适合图像密集型游戏及频繁绘制;
-
内联SVG:可缩放矢量图形,是基于可扩展标记语言描述二维矢量图形的一种图形格式。
-
矢量图,不依赖分辨率,支持事件处理器,适合带有大型渲染区域的应用程序;
-
复杂度高会减慢渲染速度,不适合游戏应用;
-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">...</svg>
-
-
MathML:数学标记语言,是一种基于XML的标准,用来在互联网上书写数学符号和公式的置标语言。
-
<math xmlns="http://www.w3.org/1998/Math/MathML">...</math>
-
2.2、多媒体:
audio、video、source、embed、track;
2.3、表单元素:
datalist、keygen、output;
2.4、语义结构元素:
article、aside、nav、header、footer、section;dialog、details、summary、figure、figcaption、command、mark、meter、progress、time、bdi、ruby、rt、rp、wbr;
3、新特性
3.1、新增选择器
document.querySelector、document.querySelectorAll;
3.2、表单
- 增强控件:calendar、date、time、email、url、search;详细可见:(一)HTML标签部分;
- FormData 对象;
3.3、多任务 webworker
- SharedWorker:特定类型的 worker,可以从几个浏览上下文中访问,例如几个窗口、iframe 或其他 worker。
- ServiceWorker:一般作为web应用程序、浏览器和网络(如果可用)之间的代理服务。创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动,更新驻留在服务器上的资源。
3.4、本地存储:
- 不会自动把数据发给服务器,仅在本地保存,根据不同浏览器存储空间可以达到5M或更大,分为:
- localStorage:永久化,没有时间限制,除非主动删除数据;
- sessionStorage:针对一个session,当前浏览器窗口关闭后自动删除;
- 与cookie区别:数据始终在同源的http请求中携带发送给服务器,数据大小不能超过4k,过期时间之前一直有效,即使窗口或浏览器关闭。
3.5、离线应用 :
-
文档的
<html>
标签添加manifest
属性,值为指向一个".appcache"文件,分为三部分:- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存;
- NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存;
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面);
-
第一次访问通过此文件的解析清单离线存储资源,直到:
- 用户清空浏览器缓存;
- manifest 文件被修改(可以采用#号注释标注日期/版本的方式);
- 由程序来更新应用缓存;
-
再次访问,如果连网状态,则对比新的manifest文件与旧的manifest文件:
- 若文件发生变化,更新用户机器上的缓存文件;
- 若文件没有改变,则直接使用离线的资源加载页面;
-
当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示;
-
浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。
可通过js中的
window.applicationCache
对象进行操作。
3.6、桌面通知
- JavaScript Notifications对象;
- 允许网页在操作系统级别显示通知(如果你在访问别的网页,甚至在使用别的程序而非浏览器,该网页也能显示通知);
- 缺点:浏览器兼容性较差,效果也有差异;且用户可以禁止通知;
3.7、 跨文档消息传递:
- JavaScript PostMessage方法;
- 允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本,而不用管是否跨域。又称为“窗口间消息传递”。
- 可实现:页面和其打开的新窗口的数据传递、页面与嵌套的 iframe 消息传递、多窗口之间消息传递。
3.8、其他
-
EventSource:SSE 服务器发送事件;
-
WebSocket:全双工通信协议;
-
跨域资源共享(CORS) Access-Control-Allow-Origin
-
拖拽释放(Drag and drop) API;
-
历史管理 history
-
地理位置 Geolocation
-
页面可见性改变事件 visibilitychange
延伸问题:
-
如何实现浏览器内多个标签页之间的通信?
- iframe + contentWindow
- postMessage
- SharedWorker(Web Worker API)
- storage 事件(localStorge API)
- WebSocket
-
webSocket 如何兼容低浏览器?
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- 基于 multipart 编码发送 XHR
- 基于长轮询的 XHR