html中data类型的url

最新推荐文章于 2025-02-18 13:38:03 发布

最新推荐文章于 2025-02-18 13:38:03 发布 · 741 阅读

文章标签：

本文介绍了一种网页设计技巧——使用 data 类型 URL 嵌入小尺寸图片资源的方法，该方法可以减少 HTTP 请求次数，但也可能导致页面体积增大。文章详细解释了不同格式的 data URL，并提供了生成 data URL 的示例代码。

针对于一些小的数据，可以在网页中直接嵌入，而不是从外部文件载入，比如图片。这样的好处是可以减少一次http的请求，缺点是使得页面内容变大。data类型的url格式在98年就已经提出了，现在绝大部分的浏览器都能支持，比如使用IE6内核的国内浏览器，chrome和firefox等，但IE8上使用有问题，图片显示不完整。

data类型的url有以下几种形式：

data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

data类型的图片格式为：

<img src="https://img-blog.csdnimg.cn/2022010622153942625.jpeg"/>

以图片为例，生成此数据的伪代码为：

// 定义存放图片字节
data[]
// 打开图片，内容放入data中
open(file_url, data)
// 分析图片信息
info = image_info(data)
// 图片类型
media_type = info.media_type
// 对图片内容进行base64编码
enc = base64(data)
// 最后按照格式拼接字符串
data_url = "data:" + media_type + ";base64," + enc

生成此数据的工具，你可以访问此网页试试[url]http://dataurl.net/#dataurlmaker[/url]
参考：
[url]http://hi.baidu.com/fegro/blog/item/c5492a0a0cb562bd2fddd45b.html[/url]
[url]http://www.iteye.com/topic/1117213[/url]