HTML中Data的数据类型
"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。
例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持（IE不支持的东西太多了，也不差这一个）
下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。运行后会看到一条蓝色渐变底色的标题。
<!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>
这个渐变的蓝色底色实际上是用一个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大致有下面几种形式。
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是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说，引入base64以后，就可以支持任意形式的数据格式。下面是个png图片的例子，会在浏览器中显示一个Mozilla的图标。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==
data格式Url的种种应用举例
可以在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指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。
base64编码
PHP->base64_encode/base64_decode
HTML中Data的数据类型的更多相关文章
- 关于keil中data,idata,xdata,pdata,code的问题
转自关于keil中data,idata,xdata,pdata,code的问题 从数据存储类型来说,8051系列有片内.片外程序存储器,片内.片外数据存储器,片内程序存储器还分直接寻址区和间接寻址类 ...
- 单片机成长之路（51基础篇） - 017 C51中data,idata,xdata,pdata的区别(转)
从数据存储类型来说,8051系列有片内.片外程序存储器,片内.片外数据存储器,片内程序存储器还分直接寻址区和间接寻址类型,分别对应code.data.xdata.idata以及根据51系列特点而设定的 ...
- python中的特殊数据类型
一.python中的特殊数据类型 对于python,一切事物都是对象,对象基于类创建.像是“wangming”,38,[11,12,22]均可以视为对象,并且是根据不同的类生成的对象. 参照:http ...
- 对比 Verilog 和 SystemVerilog 中的基本数据类型
作为引子,首先来看一段描述,该段介绍了SystemVerilog对比Verilog在RTL设计和建模时的新特性之一(logic数据类型),然后下文我再展开对比介绍Verilog和SystemVeril ...
- PowerShell中的基础数据类型
PowerShell是一个面向对象的语言,在申明变量的时候不强制要求申明数据类型,使用$开头来申明变量即可. 基本数据类型 PowerShell本身是基于.Net开发出来的,所以在.Net中的基本数据 ...
- MySql中的字符数据类型
MySql中的varchar类型 1.varchar类型的变化 MySQL数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255根据不同版本数据库 ...
- [.net 面向对象编程基础] (3) 基础中的基础——数据类型
[.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...
- Mssql中一些常用数据类型的说明和区别
Mssql中一些常用数据类型的说明和区别 1.bigint 占用8个字节的存储空间,取值范围在-2^63 (-9,223,372,036,854,775,808) 到 2^63-1 (9,223,37 ...
- jQuery 中 data 方法的实现原理
前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...
随机推荐
- 使用powershell的remove
使用Remove-Module -Name Functions2 只是移除当前会话的模块 并且Import-Module -Name Functions2与 Remove-Module -Name F ...
- vue 中echart折线自适应
前端时间做一个vue的项目,echart是按需引入的如下: // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 i ...
- Jmeter接口测试+压力测试（转）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/github_27109687/artic ...
- jenkins 中MultiJob Phase的使用，简单的pipeline可以用这个写
- MySQL的密码操作命令
一.请问在win2K命令提示符下怎样更改mysql的root管理员密码? >mysql -u root -p Enter password: ****** mysql> use mysql ...
- Qbxt 模拟题 day3(am) T3 选数字 (select)(贪心)
选数字 (select Time Limit:3000ms Memory Limit:64MB 题目描述 LYK 找到了一个 n*m 的矩阵,这个矩阵上都填有一些数字,对于第 i 行第 j 列的位置上 ...
- noi.ac #531 神树和物品
题目链接:戳我 决策单调性 (蒟蒻终于会写决策单调性啦!考试全场切这题就我不会啊嘤) (证明?不会啊,自己打表看QAQ) 44pts \(O(n^2)\)代码: #include<iostrea ...
- docker下MySQL镜像的使用方法
预习: 使用到的docker命令: docker images 显示本地有的镜像 docker pull +镜像名称 从docker hub上面拉取镜像 docker run --nam ...
- 微信小程序 改变radio（单选钮）默认大小
/* 单选钮样式 */ radio { transform:scale(0.5); }
- zookeeper系列（三）zookeeper的使用--开源客户端
作者:leesf 掌控之中,才会成功:掌控之外,注定失败, 原创博客地址:http://www.cnblogs.com/leesf456/ 奇文共欣赏,大家共同学习进步. 一.前言 上一篇博客已 ...