| Article Introduction: Small Example: The following HTML code can be run in a browser that supports the data type URL, such as Firefox. |
The so-called "data" type of URL format, is proposed in the RFC2397, for some "small" data can be embedded directly in the Web page, rather than from the external file load. For example, the IMG tag, even if the picture is very small, small to only one point, but also from another external image file such as GIF file read, if the browser implementation of the data type URL format, this file can be directly from the page file to read.
The URL format of the data type was proposed as early as 1998, and today, Firfox, Opera, Safari and Konqueror browsers have been supported, but IE until the 7.0 version has not supported, IE does not support things too much, not bad this one. :(
Small example: The following HTML code can be run in a browser that supports the data type URL, such as Firefox.
After running, you will see the title of a blue gradient background.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<style type= "Text/css" >
Title {
Modified Background-image:url (Data:image/gif;base64, r0lgodlhaqacalmaamxh96hr97xz98hf98xg97dx97nb98lf97vc98tg973d96ru97ba97% 2FE96XS9WAAACH5BAAAAAAALAAAAAABABWAAAQVMLHVBDNITXESAURYDI2CGIXQLE4EADS%3D);
Background-repeat:repeat-x;
height:28px;
Ten line-height:28px;
One text-align:center;
12}
</style>
<body>
<div class= "title" >hello, world!</div>
</body>
This gradient blue background is actually formed by a 1x28 of a small picture through the horizontal repetition (repeat-x).
This picture is very small, but 104 bytes, embedded directly into the HTML or CSS file is very appropriate.
The most immediate advantage of the URL in data format is that these URLs would have caused a new network access, because there is a Web page address, there will be no new network access now, because here is the content of the Web page. Doing so will reduce the load on the server,
Of course, it also increases the size of the current page. So it's particularly good for "small" data.
The form of the data type URL
Since it is a URL, of course you can enter it directly in the browser's address bar.
Data:text/html,
If you enter the URL above in the browser, you will get a bold "Hello, world!".
In other words, data: The following is used directly as the content of the Web page, not the address of the Web page.
Simply put, the URL of the data type has roughly the following kinds of forms.
data:,< Text Data >
data:text/plain,< Text Data >
Data:text/html,
DATA:TEXT/HTML;BASE64,<BASE64 encoded HTML code >
DATA:TEXT/CSS,<CSS Code >
Data:text/css;base64,<base64 coded CSS code >
Modified Data:text/javascript,<javascript Code >
The DATA:TEXT/JAVASCRIPT;BASE64,<BASE64 encoded JavaScript code >
DATA:IMAGE/GIF;BASE64,BASE64 encoded GIF image data
DATA:IMAGE/PNG;BASE64,BASE64 encoded PNG image data
One-DATA:IMAGE/JPEG;BASE64,BASE64 encoded JPEG image data
DATA:IMAGE/X-ICON;BASE64,BASE64 encoded icon image data
Because a URL is a text-based protocol, gif/png/jpeg This binary belongs to the need to encode with base64.
In other words, when you introduce Base64, you can support any form of data format.
Can be used in an IMG object in HTML, such as
Can be used in Background-image properties of CSS, such as
1 Div.image {
2 width:100px;
3 height:100px;
4 Background-image:url (Data:image/x-icon;base64,aaabaaeaebaaaaaaaabobqaaf ...);
5}
can be used in HTML CSS links, such as
<link rel= "stylesheet" type= "Text/css"
Href= "Data:text/css;base64,lyogkioqkiogvgvtcgxhdgugkioq ..."/>
can be used in HTML JavaScript links, such as
<script type= "Text/javascript"
Href= "data:text/javascript;base64,dmfyihnjt2jqmsa9ig5ldybzy3jv ..." ></script> complete grammar definition
In the RFC, the complete syntax is defined as follows.
Dataurl: = "DATA:" [mediatype] ["; base64"] "," data
MediaType: = [Type]/"subtype] * ("; "parameter)
Data: = *urlchar
Parameter: = attribute "=" value
Urlchar refers to the characters allowed in a generic URL, and some characters need to be escaped,
For example, "=" to Escape to "%3d", but I test down, at least in Firefox, not escape is also possible.
Parameter can extend the properties of mediatype, often charset, to define the encoding format that needs to be used in multiple languages.
For example, the following example.
Data:text/plain;charset=utf-8;base64,5l2g5aw977ym5lit5pah77yb
This example will show "Hello, Chinese!" "。 If the charset part is removed, it will display garbled, because I use the UTF-8 code.
Firefox has a test page for the data type URL, which lists the test URLs for the data type URLs in various formats, and the test result description.
Base64 coding and the secrecy of the content
Converting binary data into Base64 is not a difficult task, as total commander has such a function. There are also some online resources,
Http://www.greywyvern.com/code/php/binary2base64
Some of the online conversion to base64 inside the "=" conversion into a%3d, this in the URL and "=" is the same, do not convert also no problem.
Of course, this URL also has a hidden advantage, that is, some of the pious people do not like things, and put it on the page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
