一、从HTTP URI Scheme入手
对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了，href属性值http://github.com就是HTTP URI Scheme，那么什么是DATA URI Scheme呢？其实就是形如data:text/jpeg;base64,XINGSXXIANGJIJIGSAG==的资源链接，一般出现在img元素的src属性。
DATA URI Scheme的作用，一般就是将经过Base64编码的数据嵌入网页中，从而减少请求资源的链接数。上面的DATA URI Scheme中 base64, 后的字符就是经过base64编码后的数据，浏览器会对其解码并渲染该图片资源。
二、Data URI Scheme格式
data:①[<mime type>]②[;charset=<charset>]③[;<encoding>]④,<encoded data>⑤
①. data ：协议名称；
②. [<mime type>] ：可选项，数据类型（image/png、text/plain等）
③. [;charset=<charset>] ：可选项，源文本的字符集编码方式
④. [;<encoding>] ：数据编码方式（默认US-ASCII，BASE64两种）
⑤. ,<encoded data> ：编码后的数据
注意：
[a]. [<mime type>][;charset=<charset>] 的缺省值为HTTP Header 中Content-Type的字段值；
[b]. [;<encoding>] 的默认值为US-ASCII，就是每个字符会编码为%xx的形式；
[c]. [;charset=<charset>] 对于IE是无效的，需要通过 charset 设置编码方式；而Chrome则是 charset 属性设置编码无效，要通过 [;charset=<charset>] 来设置；FF就两种方式均可。
[d]. 若 ,<encoded data> 不是以 [;<encoding>] 方式编码后的数据，则会报异常
三、示例
/** * data:,文本数据 * data:text/plain,文本数据 * data:text/html,HTML代码 * data:text/css;base64,css代码 * data:text/javascript;base64,javascript代码 * data:image/x-icon;base64,base64编码的icon图片数据 * data:image/gif;base64,base64编码的gif图片数据 * data:image/png;base64,base64编码的png图片数据 * data:image/jpeg;base64,base64编码的jpeg图片数据，示例： */ body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");} /** * data:text/css,css代码，示例： * 注意：下列方式是无法设置background-image:url()样式的 */ <link rel="stylesheet" type="text/css" href="data:text/css;charset=gbk,#pseudo{color:red;}"/> //data:text/javascript,javascript代码，示例： <script type="text/javascript" charset="gbk" src="data:text/javascript;charset=gbk,alert('