HTML5和CSS3中一些新技术名词解释

最新推荐文章于 2024-10-30 13:48:00 发布

原创最新推荐文章于 2024-10-30 13:48:00 发布 · 527 阅读

2 ·

CC 4.0 BY-SA版权

CSS 同时被 3 个专栏收录

33 篇文章

订阅专栏

刷题

14 篇文章

订阅专栏

HTML

5 篇文章

订阅专栏

本文介绍了HTML5中的关键技术和API，包括canvas、SVG、WebGL、WebWorkers、WebSocket、WebSQL及应用程序缓存，详细解释了它们的功能和优势，如离线浏览、3D图形渲染和高性能后台任务处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.canvas

HTML5<canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas>标签只是图形容器，您必须使用脚本来绘制图形。

2.SVG

SVG（Scalable Vector Graphics)，指可伸缩矢量图形，用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

3.WebGL

WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持 ;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

通俗说WebGL中 canvas 绘图中的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于HTML5 游戏开发。

4. Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

Web Worker、Web Socket和Service Worker区别：https://blog.youkuaiyun.com/wopelo/article/details/78607879

web worker主要用来开辟线程执行耗时js;
service woker主要充当网络代理的功能，请求拦截和结果缓存；

5. Web Socket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

在这里插入图片描述

6. Web SQL

Web SQL数据库API并不是HTML5规范的一部分，但是它是一个独立的规范，引入一组使用SQL操作客户端数据库的APIs。

规范中定义的三个核心方法：
1.openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
2.transaction:这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
3.execute Sql:这个方法用于执行实际的SQL查询。

7.HTML5应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5 引入了应用程序缓存（Application Cache），这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启动应用程序缓存，请在文档的<html>标签中包含manifest属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

8.Web存储

cookie、localStorage、sessionStorage

cookies,seesionStorage,localStorage区别：

共同点：都是保存到浏览器端，都是同源。

区别：cookies会发给服务器。其他两个不会，只在本地保存，而且比cookie存储空间要大。 seesionStroage,在窗口关闭前有效。不在不同浏览器窗口共享。 localStroage,始终有效，永久数据。所有同源窗口共享 cookie:在过期前有效。所有同源窗口共享。

Web前端技术图谱：
https://www.runoob.com/w3cnote/webfrontendstack.html