《
CSS3实例学习教程 data类型的Url》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332212013.htm
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
mediatype := [ type "/" subtype ] *( ";" parameter )
16 <div class="title">Hello, world,CSS3如何制作遨游LOGO!</div>
在浏览器中输入以上的Url，会得到一个加粗的"Hello, world!",css3基础教程：详解border color;。
06 data:text/css;base64,<base64编码的CSS代码>
18 </html>
parameter := attribute "=" value
base64编码跟内容的隐秘
也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。
把二进制数据转换成为Base64不是什么难事，比方Total Commander就有这样的功效。还有一些在线资源，
4 background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题,CSS3基础教程：详解background-size。
05 <style type="text/css">
urlchar指的就是个别url中容许的字符，有些字符需要本义,CSS3基础教程：box-shadow属性，
08 data:text/javascript;base64,<base64编码的Javascript代码>
06 .title {
11 data:image/jpeg;base64,base64编码的jpeg图片数据
<link rel="stylesheet" type="text/css"
这个例子会显示出"你好，中文！"。如果吧charset局部去掉，就会显示乱码，因为我用的是UTF-8编码。
当然，这种Url还有一种隐秘的好处，就是将一些一本正经者不爱好的货色，冠冕堂皇的放在页面上。
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
例如下面的例子。
5 }
可以在Html的Img对象中应用，例如
在RFC中，完全的语法定义如下。
--> [
网站建设之]CSS3实例学习教程:data类型的Url
07 background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D),css3圆角IE的兼容方法;
03 <,CSS3和jQuery动态时钟制作过程;html xmlns=" >
04 data:text/html;base64,<base64编码的HTML代码>
1 div.image {
换句话说，引入base64当前，就可以支持任意情势的数据格式。
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
可以在Css的background-image属性中使用，例如
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义
可以在Html的Javascript链接处使用，例如
简略的说，data类型的Url大抵有下面多少种形式。
例如"="要转义为",css3制作网页实例 点击切换不同的CSS列表;%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。
09 height:28px;
当然同时也增添了当前网页的大小。所以对“小”数据特殊有利益。
<script type="text/javascript"
2 width:100px;
parameter能够对mediatype进行属性的扩大，常见的是charset，用来定义编码格局，在多语言情形下须要用到。
12 data:image/x-icon;base64,base64编码的icon图片数据
11 text-align:center;
小例子：下面这个html代码可以在支撑data类型Url的阅读器中运行，例如Firefox。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
08 background-repeat:repeat-x;
17 </body>
这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行反复(repeat-x)构成的。
12 }
10 line-height: 28px;
07 data:text/javascript,<Javascript代码>
10 data:image/png;base64,base64编码的png图片数据
既然是Url，当然也可以直接在浏览器的地址栏中输入。
02 data:text/plain,<文本数据>
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
由于Url是一种基于文本的协定，所以gif/png/jpeg这种二进制属于需要用base64进行编码。
这个图片很小，不外104个字节，直接嵌入到html或css文件仍是很适合的。
09 data:image/gif;base64,base64编码的gif图片数据
data格式的Url最直接的好处是，这些Url底本会引起一个新的网络拜访，因为那里是一个网页的地址，现在不会有新的网络访问了，因为当初这里是网页的内容。这样做，会减少服务器的负载，
data := *urlchar
Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试成果阐明。
02 "
所谓"data"类型的Url格式，是在RFC2397中 提出的，目标对一些“小”的数据，可以在网页中直接嵌入,CSS3入门教程：target伪类简介，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片十分无比的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，假如浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。
04 <head>
3 height:100px;
,CSS3入门教程(9)：RGBA声明;
05 data:text/css,<,CSS3入门教程(8)：关于透明度;CSS代码>
运行后会看到一条蓝色渐变底色的题目。
Tag：类型 教程 实例 学习 类型 教程 实例 学习
可以在Html的Css链接处使用，例如
data类型Url的形式
data类型的Url格式早在1998年就提出了，时至本日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，然而IE直到7.0版本都还不支持，IE不支持的东西太多了，也不差这一个。:(
14 </head>
13 </style>
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
03 data:text/html,<HTML代码>
15 <body>
01 data:,<文本数据>
(责任编辑：网站建设)
CSS3实例学习教程 data类型的Url相关文章