data類型的Url格式早在1998年網(wǎng)站建設時就提出了，時至今日，F(xiàn)irfox、 Opera 、Safari和Konqueror這些瀏覽器都已經(jīng)支持，但是IE直到7.0版本都還沒有支持，IE不支持的東西太多了，也不差這一個。
小例子：下面這個 html 代碼可以在支持data類型Url的瀏覽器中運行，例如 Firefox 。
運行后會看到一條藍色漸變底色的標題。
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02 " http ://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03 <html xml ns="http://www.w3.org/1999/xhtml" >
04 <head>
05 <style type="text/ css ">
06 .title {
07 background-image:url(data:image/gif;b as e64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
08 background-repeat:repeat-x;
09 height:28px;
10 line-height: 28px;
11 text-align:center;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="title">Hello, world!</div>
17 </body>
18 </html>
這個漸變的藍色底色實際上是用一個1x28的小圖片通過橫行重復(repeat-x)形成的。
這個圖片很小，不過104個字節(jié)，直接嵌入到html或css文件還是很合適的。
data格式的Url最直接的好處是，這些Url原本會引起一個新的網(wǎng)絡訪問，因為那里是一個網(wǎng)頁的地址，現(xiàn)在不會有新的網(wǎng)絡訪問了，因為現(xiàn)在這里是網(wǎng)頁的內(nèi)容。這樣做，會減少 服務器 的負載，
當然同時也增加了當前網(wǎng)頁的大小。所以對“小”數(shù)據(jù)特別有好處。
data類型Url的形式
既然是Url，當然也可以直接在瀏覽器的地址欄中輸入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在瀏覽器中輸入以上的Url，會得到一個加粗的"Hello, world!"。
也就是說，data:后面的數(shù)據(jù)直接用做網(wǎng)頁的內(nèi)容，而不是網(wǎng)頁的地址。
簡單的說，data類型的Url大致有下面幾種形式。
01 data:,<文本數(shù)據(jù)>
02 data:text/plain,<文本數(shù)據(jù)>
03 data:text/html,<HTML代碼>
04 data:text/html;base64,<base64編碼的HTML代碼>
05 data:text/css,<CSS代碼>
06 data:text/css;base64,<base64編碼的CSS代碼>
07 data:text/javascr ip t,<Javascript代碼>
08 data:text/ javascript ;base64,<base64編碼的Javascript代碼>
09 data:image/gif;base64,base64編碼的gif圖片數(shù)據(jù)
10 data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
11 data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
12 data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)
因為Url是一種基于文本的協(xié)議，所以gif/png/jpeg這種二進制屬于需要用base64進行編碼。
換句話說，引入base64以后，就可以支持任意形式的數(shù)據(jù)格式。
可以在Html的Img對象中使用，例如
<img src=http://www.jzxue.com/wangyesheji/css/201203/"data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
可以在Css的background-image屬性中使用，例如
1 div.image {
2 width:100px;
3 height:100px;
4 background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
5 }
可以在Html的Css鏈接處使用，例如
<link rel="stylesheet" type="text/css"
href=http://www.jzxue.com/wangyesheji/css/201203/"data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />