所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了，时至今日，Firefox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE不支持该格式。
来测试下你的浏览器是否支持该格式，请把下面的一行代码放到浏览到地址栏里，回车后能看到“hello,world!"，就表示你的浏览器支持该格式。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
如图： 
，能看到本图的浏览器也是支持该格式的。
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进行编码。
可以在Css的background-image属性中使用，例如
div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}
<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
<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"。
如果你能看到本文中的图片，请用右键查看下页面代码，看看img标签中的src的格式就是这个data格式，你可以把img后面的src的数据拷贝到浏览器地址中查看一下试试。
值得注意的是，用这种方法把数据保存在页面代码中，将使页面变大，延长了浏览器加载的速度，请衡量后使用。
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
