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

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

小例子

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<style type="text/css">

.title {

background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);

background-repeat:repeat-x;

height:28px;

line-height: 28px;

text-align:center;

}

</style>

</head>

<body>

<div class="title">Hello, world!</div>

</body>

</html>

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

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

data类型Url的形式

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

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

在浏览器中输入以上的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:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==data格式Url的种种应用举例

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

<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..."
/>

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

div.image {

width:100px;

height:100px;

background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);

}

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

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..."
/>

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

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义

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

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

urlchar指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。

parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

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

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

base64编码和内容的隐秘

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

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html

有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。

（注：这篇文章是源自：http://blog.csdn.net/roadmore/article/details/38498719，主要是方便自己以后查看）

浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!(源自：http://blog.csdn.net/roadmore/article/details/38498719)的更多相关文章

  1. 【转】浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!

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

  2. (转载）RTMP协议中的AMF数据 http://blog.csdn.net/yeyumin89/article/details/7932585

    为梦飞翔   (转载)RTMP协议中的AMF数据 http://blog.csdn.net/yeyumin89/article/details/7932585 这里有一个连接,amf0和amf3的库, ...

  3. R语言中的正则表达式（转载：http://blog.csdn.net/duqi_yc/article/details/9817243）

    转载:http://blog.csdn.net/duqi_yc/article/details/9817243 目录 Table of Contents 1 正则表达式简介 2 字符数统计和字符翻译 ...

  4. 数组中&a与&a[0]的区别 转载自http://blog.csdn.net/FX677588/article/details/74857473

    在探讨这个问题之前,我们首先来看一道笔试题,如下: [摘自牛客网]下列代码的结果是:(正确答案是 C) main() { int a[5]={1,2,3,4,5}; int *ptr=(int *)( ...

  5. 向txt文件中写入内容（覆盖重写与在末尾续写+FileOutputStream与FileWriter）（转发：https://blog.csdn.net/bestcxx/article/details/51381460）

    !!!! 读取txt文件中的内容 import java.io.BufferedReader; import java.io.File; import java.io.FileReader; /** ...

  6. 虚拟机中的CentOS7如何上网？---https://blog.csdn.net/nothing2017/article/details/61420767

    虚拟机中的CentOS7如何上网?https://blog.csdn.net/nothing2017/article/details/61420767

  7. 转载 java枚举类型enum的使用 （原文地址：http://blog.csdn.net/wgw335363240/article/details/6359614）

    java枚举类型enum的使用 最近跟同事讨论问题的时候,突然同事提到我们为什么java中定义的常量值不采用enmu枚举类型,而采用public final static 类型来定义呢?以前我们都是采 ...

  8. 通信中的错误代码 (repost from https://blog.csdn.net/zzhuan_1/article/details/80066716)

    • 100 - 继续.• 101 - 切换协议.• 110 重新启动标记答复.• 120 服务已就绪,在 nnn 分钟后开始.• 125 数据连接已打开,正在开始传输.• 150 文件状态正常,准备打 ...

  9. C++ 中宏的使用 --来自：http://blog.csdn.net/hgl868/article/details/7058906

    宏在代码中的使用实例: g_RunLog2("Middleware client for Linux, build:%s %s", __DATE__, __TIME__); 下面详 ...

随机推荐

  1. Html概述

    Html概述 主要思想,主要思想很重要 一.Html是什么 一种标记语言(用标签进行标记) 对要显示的文字进行标记 二.Html核心 标签(只认标签) 封装,所以必须有头尾,你才知道标签的范围,你才知 ...

  2. php file_get_contents计时读取一个文件/页面 防止读取不到内容

    php file_get_contents计时读取一个文件/页面 防止读取不到内容 $url = 'http://www.baidu.com/index.php'; $opts = array( 'h ...

  3. 敏感性、特异性、假阳性、假阴性（sensitivity and specificity）

    医学.机器学习等等,在统计结果时时长会用到这两个指标来说明数据的特性. 定义 敏感性:在金标准判断有病(阳性)人群中,检测出阳性的几率.真阳性.(检测出确实有病的能力) 特异性:在金标准判断无病(阴性 ...

  4. codeforces 993c//Careful Maneuvering// Codeforces Round #488 by NEAR (Div. 1)

    题意:x轴-100和+100的有敌人飞船,纵坐标由输入数据给出,我方有2飞船在x轴0,y坐标待定.0时刻时敌人同时向我方2飞船发出光线,光线会穿透飞船打到敌人自己,问2飞船放在哪敌人损失最大? 假如- ...

  5. UVA-12558 Egyptian Fractions (HARD version) （IDA* 或 迭代加深搜索）

    题目大意:经典的埃及分数问题. 代码如下: # include<iostream> # include<cstdio> # include<cstring> # i ...

  6. UVA-11149 Power of Matrix（矩阵二分幂）

    题目大意:给一个n阶方阵,求A1+A2+A3+......Ak. 题目分析:令F(k)=A1+A2+A3+......Ak.当k为偶数时,F(k)=F(k/2)*(E+Ak/2),k为奇数时,F(k) ...

  7. python运维之使用python进行批量管理主机

    1. python运维之paramiko 2. FABRIC 一个与多台服务器远程交互的PYTHON库和工具 3. SSH连接与自动化部署工具paramiko与Fabric 4. Python批量管理 ...

  8. Session的方法getSession() 与 getSession(boolean para)区别

    getSession(boolean para)返回当前http会话,如果不存在,则创建一个新的会话getSession() 调用getSession(true)的简化版 [官方解释] getSess ...

  9. JAVA计算文件的crc32校验码

    import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStream; import java ...

  10. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...