原文地址：

data类型的Url格式：把小数据直接嵌入到Url中

所谓"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。

data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。

小例子

下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。运行后会看到一条蓝色渐变底色的标题。

这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。这个图片很小，不过104个字节，直接嵌入到html或css文件还是很合适的。

data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

data类型Url的形式

既然是Url，当然也可以直接在浏览器的地址栏中输入。

在浏览器中输入以上的Url，会得到一个加粗的"Hello, world!"。也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。

简单的说，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图片数据

因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说，引入base64以后，就可以支持任意形式的数据格式。下面是个png图片的例子，会在浏览器中显示一个Mozilla的图标。

data格式Url的种种应用举例

可以在Html的Img对象中使用，例如

可以在Css的background-image属性中使用，例如

可以在Html的Css链接处使用，例如

可以在Html的Javascript链接处使用，例如

完整的语法定义

在RFC中，完整的语法定义如下。

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype  := [ type "/" subtype ] *( ";" parameter )
data       := *urlchar
parameter  := attribute "=" value

urlchar指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。

这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。

Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。

base64编码和内容的隐秘

把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源，

http://www.greywyvern.com/code/PHP/binary2base64
http://www.kawa.NET/works/js/data-scheme/base64-e.html
有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。

当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上，例如下面这个数据。你可以Copy下来贴到地址栏里面去瞅瞅，呵呵呵:o)

data类型的Url格式：把小数据直接嵌入到Url中相关推荐

1. Background中data类型的Url格式url(data:image/gif;base64,AAAA)把小数据直接嵌入到Url中

   原文地址:http://blog.csdn.net/zuo_hy/article/details/38866935 所谓"data"类型的Url格式,是在RFC2397中提出的,目 ...

2. data类型的Url格式及Base64编码：把小数据直接嵌入到Url中

   所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag, ...

3. Bootstrap data类型的Url格式--url(data:image/gif;base64,AAAA)：把小数据直接嵌入到Url中

   原文链接http://shiyun1013.blog.163.com/blog/static/1077403620111113234714/ 所谓"data"类型的Url格式,是在 ...

4. data类型的Url格式--url(data:image/gif;base64,AAAA)：把小数据直接嵌入到Url中

   所谓"data"类型的Url格式,是在RFC2397中提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag,哪 ...

5. 10.8 UiPath 数据筛选Filter Data Table的介绍和使用(Excel数据写入另一个Excel中)

   UiPath数据筛选Filter Data Table的介绍和使用 一.数据筛选(Filter Data Table)的介绍 二.Filter Data Table在UiPath中的使用 ) 一.数据 ...

6. 大数据如何帮助小数据? 主题报告速记与评述（二）

   笔者按:机器学习正在走向基于"语义"的可解释模型的新时代,zero-shot learning是其中一个很有价值的方向.参见"A DARPA Perspective on ...

7. python拷贝文件函数_python笔记2小数据池,深浅copy,文件操作及函数初级

   小数据池就是在内存中已经开辟了一些特定的数据,经一些变量名直接指向这个内存,多个变量间公用一个内存的数据. int: -5 ~ 256 范围之内 str: 满足一定得规则的字符串. 小数据池: 1,节 ...

8. 还在痴迷于大数据？未来 “小数据” 会让你大开眼界

   编者按:本文作者 Roger Dooley 通过研究人的思维和行为欲将营销变得更加美好. 如今最重要的潮流是什么?如果你问任何一位 CMO,你得到的答案可能是 "移动" 或者 &q ...

9. matlab遗传算法拟合,基于遗传算法的数据拟合在MATLAB环境中的实现

   湖 南 农 机 2010 年 5 月 收稿日期:2010-04-02 作者简介:林鸿彬(1987-),男,海南海口人,主要从事信息与计算科学专业的学习. 摘 要:在自然科学中,常常在相关的 2 个量之 ...

最新文章

1. 2018/12/08 L1-045 宇宙无敌大招呼 java
2. linux命令date
3. el-table-column中格式化判断数据为空则显示指定内容
4. AJAX——AJAX请求递归
5. rust游戏解封了吗_柚子君宾馆爬墙听隔壁声，潇天傲解封不罢休！继续专场嘲讽散打哥...
6. 阿里AI再出神器，“你是什么垃圾”一拍便知
7. 2_C语言中的数据类型 （二）进制
8. oracle安装pdb报错,oracle12安装后pdb创建的用户无法连接
9. 韩顺平php视频笔记45 循环相关语句break,continue常量
10. maven创建一个web项目（springmvc项目）
11. java中的多态性_[转载] c++多态与java多态性_Java中的多态性
12. windows 10下hosts文件写入权限
13. 进击的django【第一集】
14. linux mysql导出表中的数据_MySQL导出指定表中的数据
15. Linux修改系统时间
16. android经典项目案例开发
17. php与elasticsearch视频,PHP如何与搜索引擎Elasticsearch交互？
18. CMake Tutorial
19. 服务器中心地址,互联网时间同步服务器地址（国家授时中心服务器）
20. csr867x入门之串口AT指令协议（三）

热门文章

1. 全球多元化布局成功，YY不再只是直播
2. 今天睡眠质量记录75分
3. 深入QuickRep
4. 东北林业大学计算机第三轮学科评估,全国第三轮学科评估结果.PDF
5. PHP基础——’tasklist‘内存管理系统
6. 90后女大学生创业，她居然用10万元开了家服装店
7. 2023年在建数据中心项目盘点
8. earthexplorer下载landsat数据
9. usb扩展坞同时接键盘鼠标_雷柏XD200 USB-C 10口扩展坞分线转换器上市
10. 使用PLCSIM Advanced仿真博途S7-1500 OPC UA