协议://主机名[:端口]/ 路径/[:参数] [?查询]#Fragmentprotocol :// hostname[:port] / path / [:parameters][?query]#fragment
URI,URL,URN三者关系：
URL,URN是URI的子集
什么是Data URI Scheme
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。常用于将图片嵌入网页。
传统的图片HTML是这样用的：
img src="images/image.png"/
Data URI的图片内嵌式是这样用的：
img src="https://img-/202706300796146.png"/
Data URI的直接通过url传递方式：
https://img-/202706300796146.png
在浏览器地址栏中输入以上代码，可直接显示那个flag！！
Data URI的格式规范
data:[][;charset=][;],1.data ：协议名称；2.[]：可选项，数据类型(image/png、text/plain等)3.[;charset=]：可选项，源文本的字符集编码方式4.[;]：数据编码方式(默认US-ASCII，BASE64两种)5.,：编码后的数据
目前，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图片数据
Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器，它们由于无法被缓存和重复利用的缺陷，所以并不适合直接在页面中使用，但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性：大大减少请求数，现在大型网站的CSS引用了大量的图片资源。CSS和JavaScript都可以被缓存，间接的实现了数据的缓存。利用CSS可以解决Data URI的重复利用问题。
告别CSS Sprites，CSS Sprites的出现是为了减少请求数，但它除了带来在不确定情况下的异常外，CSSSprites还需要人为的图片合并，即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间，并带来维护的困难。当你遵循一定的设计原则后， 你就可以完全抛弃CSS Sprites来编写CSS，最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML，如《利用data-uri合并样式表和图片》中用python实现的工具，这可以节约大量的时间。
base64编码把图片文件增加了1/3，Data URI和MHTML同时使用相当于增加了2/3，但CSS和JavaScript可以使用gzip压缩，其可以节省2/3的数据量，所以使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最终流量是减少的。
它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具。
在网页上显示出来的标准方法是：
data:image/png;base64相当于图片的Data URL，它是利用base64编码把图片数据翻译成标准ASCII字符，等同于
换句话说我们把图像文件的内容内置在 HTML 文件中，节省了一个 HTTP 请求。
在 CSS 中使用：
body {background-image:url("https://img-/202706300796146.png");}
