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

例：下面这一段代码放到url地址栏访问会得到一个加粗的"Hello, world!"

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

简单的说，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以后，就可以支持任意形式的数据格式。

data类型的url的更多相关文章

  1. 【转】浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!

    所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag, ...

  2. 浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!(源自：http://blog.csdn.net/roadmore/article/details/38498719)

    所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入.例如对于img这个Tag,哪怕这个图片非常非常 ...

  3. MVC验证12-使用DataAnnotationsExtensions对整型、邮件、最小值、文件类型、Url地址等验证

    原文:MVC验证12-使用DataAnnotationsExtensions对整型.邮件.最小值.文件类型.Url地址等验证 本文体验来自http://dataannotationsextension ...

  4. 设计一个方法injectBeforeAsyncSend，能够实现如下功能：在发起异步请求之前打印出请求的类型、URL、method、body、timestamp 等信息。

    异步请求逻辑注入 工作中我们需要对异步请求的请求信息打印日志,但是又不能耦合在业务代码中打印.请设计一个方法injectBeforeAsyncSend,能够实现如下功能:在发起异步请求之前打印出请求的 ...

  5. ssm整合快速入门程序(三)之Data类型转换器

    今天就写写springmvc配置Data类型转换器 首先在创建一个转换器的包cn.my.ssm.controller.converter,创建一个CustomDateConverter类实现Conve ...

  6. 第 7 章 Data 类型

    目录 第 7 章 Data 类型 一.创建方式 二.转时间戳 其他 第 7 章 Data 类型 @(es5) 参考了: 阮一峰javascript的标准.<javascript高级教程> ...

  7. 如何将查出的日期Data类型以Json格式输出到前端

    方法一 在返回的实体的属性中加上注解 // 创建时间    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")    private ...

  8. go学习笔记-Data类型（Arrays, Slices and Maps）

    Data类型(Arrays, Slices and Maps) array array就是数组,定义方式如下: var arr [n]type 在[n]type中,n表示数组的长度,type表示存储元 ...

  9. MySQL中DATA类型数据和DATATIME类型数据的比较

    在网上大题查了下这个问题,网上有的人说可以直接比较,并给出了测试用例,也有的人说不能比较,于是我自己尝试了一下,实际测试是可以的,不过,当传入DATA类型时间与DATATIME类型时间进行比较的时候, ...

随机推荐

  1. Python高级编程-Python一切皆对象

    Python高级编程-Python一切皆对象 Python3高级核心技术97讲 笔记 1. Python一切皆对象 1.1 函数和类也是对象,属于Python的一等公民 ""&qu ...

  2. windows脱密码总结

    方式1:通过SAM数据库获得本地用户HASH sam文件:是用来存储本地用户账号密码的文件的数据库system文件:里面有对sam文件进行加密和加密的密钥 利用方式: 导出sam和system: re ...

  3. django3开发完整博客带评价

    纯django开发最完美博客 2020年5月打造最时尚博客系统教程 为了学习速度,集中精力学习django和博客开发, 没有使用其它框架,也没有使用css预处理等 这样学起来最方便, 博客前后端都完成 ...

  4. P2002 消息扩散(缩点)

    描述:https://www.luogu.com.cn/problem/P2002 有n个城市,中间有单向道路连接,消息会沿着道路扩散,现在给出n个城市及其之间的道路,问至少需要在几个城市发布消息才能 ...

  5. python学习笔记-零碎知识点

    1. 绝对值 abs(-4) 结果: 4 2.

  6. Coursera课程笔记----计算导论与C语言基础----Week 4

    感性认识计算机程序(Week 4) 引入 编程序 = 给计算机设计好运行步骤 程序 = 人们用来告诉计算机应该做什么的东西 问题➡️该告诉计算机什么?用什么形式告诉? 如果要创造一门"程序设 ...

  7. XSS挑战之旅（通过看代码解题）

    XSS 挑战之旅 level 1 没有什么过滤 payload: <script>alert(1)</script> level 2 php关键代码: echo "& ...

  8. 关于tez-ui的"All DAGs"和"Hive Queries"页面信息为空的问题解决过程

    近段时间发现公司的HDP大数据平台的tez-ui页面不能用了,页面显示为空,导致通过hive提交的sql不能方便地查找到Yarn上对应的applicationId,只能通过beeline的屏幕输出信息 ...

  9. Spring学习笔记(三)：面向切面的Spring

    Spring之面向切面编程 一.理解何为面向切面编程 对于这个的理解,我觉得Spring实战中的例子讲得很明白: 假设我现在是一个小区用户,每个月小区都要收电费,这时候就会来人查看电表,算出来这个月电 ...

  10. Vue与 Vue组件部分

    1.Vuex作用?哪种功能场景使用它? 答案:vue框架中状态管理. 场景有:单页面应用中,组件之间的状态.音乐播放. 登录状态.加入购物车 2.解释vuex最常用的两种属性 答案:分别State.G ...