-----------------------------------------------------------------------------------------------

Data URI scheme is a URI scheme（统一资源定位符的模式）。

我们熟知的站点引用资源文件，都是类似http://www.chenwei.ws/demo.png这种的格式，但是data URI scheme 提供将外部资源嵌入到网页中的方法。

它是一种文件或文档的形式，这项技术允许普通的元素诸如要取的图片，样式表放在单一的http请求中，替代很多http请求。（相当于变成网页的一部分了）

用法=>

HTML:

<img src="data:image/png;base64,iVBORw0Rw0KGgoAA......">

CSS:

div {background: red url('data:image/png;base64,iVBORw0Rw0KGgoAA......') no-repeat scroll left top;}

JavaScript:(IE8不支持)

<script>

window.open('data:text/html;charset=utf-8,' + encodeURIComponent(

　　　　'<!doctype html>' +

　　　　'html lang='en' +

　　　　'<head><title>Embedded Window</title></head>' +

　　　　'<body><h2>42</h2></body>' +

　　　　'</html>'

　　);

</script>

data 表示数据名称，image/png 是数据类型名称; base64 是数据编码方法，后面是base64编码后的数据。

Data URI scheme支持的类型有：
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图片数据

注：PHP中可以用函数base64_encode()进行编码，base64_encode(file_get_contents('demo.png'));

复制下面数据到浏览器中，看看是什么吧。

data:text/plain;base64,d3d3LmNoZW53ZWkud3M=

-----------------------------------------------------------------------------------------------

参考Wiki: http://en.wikipedia.org/wiki/Data:_URL

Link: http://www.cnblogs.com/farwish/p/3787980.html

Data URI scheme - 数据的uri模式的更多相关文章

  1. 006-网页嵌入数据Data URI scheme

    在项目css中或者图片展示中: url(data:image/png;base64,iVBORw0KGgoAAA 在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入 ...

  2. JS魔法堂：Data URI Scheme介绍

    一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...

  3. Data URI Scheme,base64

    一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...

  4. 网页优化URI（http URI scheme与data URI scheme）

    网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...

  5. data URI scheme

    优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...

  6. data URI scheme及其应用

    data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取.这样从表面上看会降低一次HTTP的请求,实现了对于网页的优化(只是看了其它一些文章data URI ...

  7. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

  8. Data URI scheme:data:image/jpeg;

    今天在用一个croppic的jQuery裁剪图片的插件的时候,发现在后台获取图片时,无法通过Request.File获取了,但是通过Request.Form[]可以.用firebug跟了一下发现,图片 ...

  9. 什么是data:image/png;base64,？一道关于Data URI Scheme的入门级CTF_Web题

    一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...

随机推荐

  1. Centos7修改系统时区timezone

    第一步:查询服务器时间 [root@localhost ~]# timedatectl Local time: Sat 2018-03-31 01:11:46 UTC Universal time: ...

  2. CentOS设置网络，设置IP地址

    1.登录CentOS. 2.# dhclient 自动获取IP地址 3.# ip addr 1).第一个地址127.0.0.1是回环地址,网卡名叫做lo,Windows操作系统也有该地址,用来和自己通 ...

  3. 打通WordPress和微信公众号

    现在还坚持写博客的人越来越少,我的博客这几年也更新很少.写博客文章的人少了,有不少人都转战到微信公众号里去写文章了.相对于博客,微信公众号(特别是订阅号)是一个相对封闭.去中心化的平台,在移动互联网时 ...

  4. （转）Intellij IDEA 快捷键整理

    [常规] Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关 ...

  5. IOS 7层协议

    ios七层 (1)物理层——Physical 这是整个OSI参考模型的最低层,它的任务就是提供网络的物理连接.所以,物理层是建立在物理介质上(而不是逻辑上的协议和会话),它提供的是机械和电气接口.主要 ...

  6. CS229 6.1 Neurons Networks Representation

    面对复杂的非线性可分的样本是,使用浅层分类器如Logistic等需要对样本进行复杂的映射,使得样本在映射后的空间是线性可分的,但在原始空间,分类边界可能是复杂的曲线.比如下图的样本只是在2维情形下的示 ...

  7. Guava实现 过滤文本，排序，转换内容，分组计数转换map 等等

    重要点 :看注释 从access.log中统计数据 对healthcheck.html的请求不计入统计 输出请求总量,以及GET和POST分别的总量 输出请求最频繁的10个接口及其次数,按次数降序 输 ...

  8. Oracle bacic

    1.连接Oracle 2.操作数据库 3.单表查询 4.SUID 5.常用函数 6.集合运算 7.Oracle 对象 8.PL/SQL 9.存储函数 10.存储过程 11.触发器 1.连接到数据库 O ...

  9. Python——列表深浅拷贝

    一.深浅拷贝 如果希望将列表复制一份,通过列表的内置方法copy就可以实现: s = [[1,2],3,4] s1 = s.copy() print(s) print(s1) 拷贝出的列表s1与原列表 ...

  10. Check Kernel version of J2EE Engine

    1912674 - How to check kernel version of an AS Java Two types of the kernel are in SAP NetWeaver Jav ...