访问器中的data种类的Url文件格式 data:image/png,da

日期:2021-03-12 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

所谓"data"种类的Url文件格式,是在RFC2397中 提出的,目地针对1些“小”的数据信息,能够在网页页面中立即嵌入,而并不是由外部文档加载。比如针对img这个Tag,哪怕这个照片十分十分的小,小到仅有1个 点,也是要从此外1个外界的照片文档比如gif文档中读入的,假如访问器完成了data种类的Url文件格式,这个文档便可以立即从网页页面文档內部读入了。
data种类的Url文件格式早在1998年就提出了,直到现在,Firfox、Opera、Safari和Konqueror这些访问器都早已适用,可是IE直至7.0版本号还没有有适用,IE不适用的物品太多了,也不差这1个。:(
小事例
下面这个html编码能够在适用data种类Url的访问器中运作,比如Firefox。运作后会看到1条蓝色渐变色底色的题目。

拷贝编码
编码以下:

<!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%三d);
background-repeat:repeat-x;
height:28px;
line-height: 28px;
text-align:center;
}
</style>
</head>
<body>
<div class="title">Hello, world!</div>
</body>
</html>


这个渐变色的蓝色底色具体上是用1个1x28的小照片根据猖狂反复(repeat-x)产生的。
这个照片很小,但是104个字节,立即嵌入到html或css文档還是很适合的。
data文件格式的Url最立即的益处是,这些Url本来会引发1个新的互联网浏览,由于那里是1个网页页面的详细地址,
如今不容易有新的互联网浏览了,由于如今这里是网页页面的內容。这样做,会降低服务器的负载,
自然另外也提升了当今网页页面的尺寸。因此对“小”数据信息非常有益处。
data种类Url的方式
既然是Url,自然还可以立即在访问器的详细地址栏中键入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在访问器中键入以上的Url,会获得1个加粗的"Hello, world!"。
也便是说,data:后边的数据信息立即用做网页页面的內容,而并不是网页页面的详细地址。
简易的说,data种类的Url大概有下面几种方式。


拷贝编码
编码以下:

data:,<文字数据信息>
data:text/plain,<文字数据信息>
data:text/html,<HTML编码>
data:text/html;base64,<base64编号的HTML编码>
data:text/css,<CSS编码>
data:text/css;base64,<base64编号的CSS编码>
data:text/javascript,<Javascript编码>
data:text/javascript;base64,<base64编号的Javascript编码>
data:image/gif;base64,base64编号的gif照片数据信息
data:image/png;base64,base64编号的png照片数据信息
data:image/jpeg;base64,base64编号的jpeg照片数据信息
data:image/x-icon;base64,base64编号的icon照片数据信息


由于Url是1种根据文字的协议书,因此gif/png/jpeg这类2进制属于必须用base64开展编号。
换句话说,引进base64之后,便可以适用随意方式的数据信息文件格式。
能够在Html的Img目标中应用,比如
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
能够在Css的background-image特性中应用,比如


拷贝编码
编码以下:

div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}


能够在Html的Css连接处应用,比如

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
能够在Html的Javascript连接处应用,比如

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>详细的英语的语法界定
在RFC中,详细的英语的语法界定以下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的便是1般url中容许的标识符,一些标识符必须转义,比如"="要转义为"%三d",但是我检测下来,最少在Firefox里边,不转义也是能够的。

parameter能够对mediatype开展特性的拓展,普遍的是charset,用来界定编号文件格式,在多語言状况下必须用到。比如下面的事例。

data:text/plain;charset=UTF⑻;base64,5L2g5aW977yM5Lit5paH77yB
这个事例会显示信息出"你好,汉语!"。假如吧charset一部分去掉,就会显示信息错码,由于我用的是UTF⑻编号。

Firefox有1个data种类Url的检测网页页面,列出了各种各样文件格式的data种类Url的检测Url,和检测結果表明。

base64编号和內容的秘密
把2进制数据信息变换变成Base64并不是甚么难事,例如Total Commander就有这样的作用。也有1些线上資源,

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
一些线上变换把base64里边的“=”变换变成%三d,这个在Url中合“=”是1样的,不变换也没甚么难题。

自然,这类Url也有1种秘密的益处,便是将1些正人君子者不喜爱的物品,文过饰非的放在网页页面上,比如下面
能够在Html的Css连接处应用,比如

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
能够在Html的Javascript连接处应用,比如

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>详细的英语的语法界定
在RFC中,详细的英语的语法界定以下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的便是1般url中容许的标识符,一些标识符必须转义,比如"="要转义为"%三d",但是我检测下来,最少在Firefox里边,不转义也是能够的。

parameter能够对mediatype开展特性的拓展,普遍的是charset,用来界定编号文件格式,在多語言状况下必须用到。比如下面的事例。

data:text/plain;charset=UTF⑻;base64,5L2g5aW977yM5Lit5paH77yB
这个事例会显示信息出"你好,汉语!"。假如吧charset一部分去掉,就会显示信息错码,由于我用的是UTF⑻编号。

Firefox有1个data种类Url的检测网页页面,列出了各种各样文件格式的data种类Url的检测Url,和检测結果表明。

base64编号和內容的秘密
把2进制数据信息变换变成Base64并不是甚么难事,例如Total Commander就有这样的作用。也有1些线上資源,

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
一些线上变换把base64里边的“=”变换变成%三d,这个在Url中合“=”是1样的,不变换也没甚么难题。

自然,这类Url也有1种秘密的益处,便是将1些正人君子者不喜爱的物品,文过饰非的放在网页页面上,比如下面的事例。

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

这个事例会显示信息出"你好,汉语!"。假如吧charset一部分去掉,就会显示信息错码,由于我用的是UTF⑻编号。

Firefox有1个data种类Url的检测网页页面,列出了各种各样文件格式的data种类Url的检测Url,和检测結果表明。

base64编号和內容的秘密

把2进制数据信息变换变成Base64并不是甚么难事,例如Total Commander就有这样的作用。也有1些线上資源,

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

一些线上变换把base64里边的“=”变换变成%三d,这个在Url中合“=”是1样的,不变换也没甚么难题。

自然,这类Url也有1种秘密的益处,便是将1些正人君子者不喜爱的物品,文过饰非的放在网页页面上。