（四）HTML5

最新推荐文章于 2023-01-29 09:00:00 发布

Shirley_Song_1

最新推荐文章于 2023-01-29 09:00:00 发布

阅读量174

点赞数

分类专栏： HTML 文章标签：前端 html5

本文链接：https://blog.csdn.net/shirley_song_1/article/details/124434679

版权

4 篇文章 0 订阅

订阅专栏

HTML5

HTML5是HTML最新修订版本，设计的目的是为了在移动设备上支持多媒体，HTML5改进：

新语义元素、新属性、多媒体功能、绘制图形能力、完全支持CSS3、应用能力（如本地离线存储、访问本地文件、本地SQL数据、缓存引用等）；
移除元素：
- 纯表现的元素：acronym、applet、basefont、big、center、font、s、strike、tt、u等；
- 对可用性产生负面影响的元素：frame、frameset、noframes；
HTML5新标签兼容问题：现代的浏览器都已支持，但旧的浏览器可能不支持；
- 将 HTML5 元素通过CSS display:block定义为块元素；
- 通过 document.createElement 创建新标签；
- 使用垫片 html5shiv.js

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>
```

audio、video、source、embed、track；

datalist、keygen、output；

article、aside、nav、header、footer、section；dialog、details、summary、figure、figcaption、command、mark、meter、progress、time、bdi、ruby、rt、rp、wbr；

document.querySelector、document.querySelectorAll；

SharedWorker：特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。
ServiceWorker：一般作为web应用程序、浏览器和网络（如果可用）之间的代理服务。创建有效的离线体验，拦截网络请求，以及根据网络是否可用采取合适的行动，更新驻留在服务器上的资源。

不会自动把数据发给服务器，仅在本地保存，根据不同浏览器存储空间可以达到5M或更大，分为：
- localStorage：永久化，没有时间限制，除非主动删除数据；
- sessionStorage：针对一个session，当前浏览器窗口关闭后自动删除；
与cookie区别：数据始终在同源的http请求中携带发送给服务器，数据大小不能超过4k，过期时间之前一直有效，即使窗口或浏览器关闭。

文档的<html> 标签添加manifest属性，值为指向一个".appcache"文件，分为三部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存；
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存；
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）；
第一次访问通过此文件的解析清单离线存储资源，直到：
- 用户清空浏览器缓存；
- manifest 文件被修改（可以采用#号注释标注日期/版本的方式）；
- 由程序来更新应用缓存；
再次访问，如果连网状态，则对比新的manifest文件与旧的manifest文件：
- 若文件发生变化，更新用户机器上的缓存文件；
- 若文件没有改变，则直接使用离线的资源加载页面；
当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示；
浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

可通过js中的window.applicationCache对象进行操作。

JavaScript Notifications对象；
- 允许网页在操作系统级别显示通知（如果你在访问别的网页，甚至在使用别的程序而非浏览器，该网页也能显示通知）；
- 缺点：浏览器兼容性较差，效果也有差异；且用户可以禁止通知；

如何实现浏览器内多个标签页之间的通信？
- iframe + contentWindow
- postMessage
- SharedWorker(Web Worker API)
- storage 事件(localStorge API)
- WebSocket
webSocket 如何兼容低浏览器？
- Adobe Flash Socket
- ActiveX HTMLFile (IE)
- 基于 multipart 编码发送 XHR
- 基于长轮询的 XHR