Url format "data" type, in the RFC2397 proposed, for the purpose of some "small" data to be embedded in a Web page, instead of loading from an external file.
For this example, img Tag, even if this picture is very, very small, only a small point, but also from other external image files such as gif file read, if the browser implements Url type of data format, the file It can be read directly from the file into the internal pages.
data types Url format as early as 1998 proposed the, to date, Firfox, Opera, Safari and Konqueror browsers already support them, but IE up to version 7.0 are not supported (IE does not support too many things, not bad this one)
The following html code can be run on supported data types Url browsers, such as Firefox. The title will see a blue gradient background after the operation.
<!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 >Hello, world!</div> </body> </html>
The blue background gradient is actually a small picture 1x28 repetition (repeat-x) formed by transverse. This image is very small, but 104 bytes, or embedded directly into html files css is very suitable.
The most immediate benefit data format Url these Url would otherwise lead to a new network access, because there is the address of a Web page, and now there will be no new network access, because now here is the content of the page. In doing so, would reduce the load on the server, of course, also increases the size of the current web page. So the "small" data is particularly good.
In the form of data type Url
Since it is Url, of course, can also be entered directly in the address bar of your browser.
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
Enter the above in your browser Url, will get a bold "Hello, world!". In other words, data: data directly used as the back of the content of the page, rather than the address of the web page.
Briefly, data type Url roughly the following forms.
:, Data < text data > Data: text / Plain, < text data > Data: Text / Html, < HTML Dai码> Data: text / HTML; Base64, < Base64 encoded HTML code > Data: text / CSS, < the CSS codes > Data: text / CSS; Base64, < Base64 encoding CSS code > data:text/javascript,<Javascript代码> Data: text / JavaScript; Base64, < Base64 encoded Javascript code > data: image / gif; base64, base64 encoded picture data gif data: image / png; base64, base64 encoded png image data data: image / jpeg; base64, base64 encoded picture data jpeg data: image / x-icon; base64, base64 encoded picture data icon
Because Url is a text-based protocol, gif / png / jpeg are in need of such a binary encoded with base64. In other words, after the introduction of base64, it can support any form of data format. Here is an example png images, a Mozilla icon is displayed in the browser.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==
data format of the various application examples Url
Html Img may be used in an object, e.g.
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
May be used in the background-image property of Css, e.g.
div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}
You can use the link at the Css Html, such as
<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
You can use the link at the Html Javascript, for example,
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
The full syntax definitions
In the RFC, the full syntax is defined as follows.
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
date = * urlchar
parameter := attribute "=" value
urlchar refers to the general url allowed characters, some characters need to be escaped, for example, "=" to be escaped as "% 3D", but my test down, at least in Firefox inside, no escape is possible.
parameter can be extended for mediatype attribute, it is common charset, used to define the encoding format, you need to use in a multi-language situation. For example the following Examples.
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
This example will show "Hello, Chinese!." If it charset partially removed, it will be garbled, because I use UTF-8 encoding.