CSS3实例学习教程:data类型的Url -厦门优艾网络工作室_网站建设,网络博饼等网络专业服务提供商

首页 >> 网站建设

网站建设

CSS3实例学习教程:data类型的Url

5/3/2012 11:29:52 PM 来源：未知作者：jasen 浏览热度( 次) 字号：T|T

分享到：

网页制作cnwebshow文章简介：小例子：下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。

所谓"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。

data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是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 xmlns="http://www.w3.org/1999/xhtml" >

04 <head>

05 <style type="text/css">

06 .title {

07 background-image:url(data:image/gif;base64,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个字节，直接嵌入到html或css文件还是很合适的。

data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，

当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。

data类型Url的形式

既然是Url，当然也可以直接在浏览器的地址栏中输入。

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>

在浏览器中输入以上的Url，会得到一个加粗的"Hello, world!"。

也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。

简单的说，data类型的Url大致有下面几种形式。

01 data:,<文本数据>

02 data:text/plain,<文本数据>

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/javascript,<Javascript代码>

08 data:text/javascript;base64,<base64编码的Javascript代码>

09 data:image/gif;base64,base64编码的gif图片数据

10 data:image/png;base64,base64编码的png图片数据

11 data:image/jpeg;base64,base64编码的jpeg图片数据

12 data:image/x-icon;base64,base64编码的icon图片数据

因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。

换句话说，引入base64以后，就可以支持任意形式的数据格式。

可以在Html的Img对象中使用，例如

可以在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链接处使用，例如

href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

可以在Html的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"，不过我测试下来，至少在Firefox里面，不转义也是可以的。

parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。

例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。

Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。

base64编码和内容的隐秘

把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源，

http://www.greywyvern.com/code/php/binary2base64

有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。

当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上。

【返回】【关闭】

热门资讯更多>>

CSS3实例学习教程:data类型的Url