前端构建平台和环境 Vue React Angular npm Node Webpack

项目名称 网站(中文) 描述
Vue.js cn.vuejs.org Vue.js 是一个构建数据驱动的渐进式 JavaScript 框架。
React zh-hans.reactjs.org React 是一个用于构建用户界面的 JavaScript 库。
Angular angular.cn Angular 是一个用于构建移动和桌面 Web 应用程序的平台。
npmjs npmjs.cn npm 是一个 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
Node.js nodejs.org/zh-cn Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Webpack webpackjs.com Webpack 是一个模块打包器。Webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换 (transform)、打包 (bundle) 或包裹 (package) 任何资源 (resource or asset)。

CSS 定义事件

<style type="text/css">
	.outline{
		outline-color: #ccc; /*outline: none;*/
	}
</style>

//定义输入框和按钮边框线颜色

<style type="text/css">
input::-webkit-input-placeholder {
    color: #ffffff66;
}

input:-moz-placeholder { 
    color: #ffffff66;
}

input::-moz-placeholder { 
    color: #ffffff66;
}

input:-ms-input-placeholder { 
    color: #ffffff66;
}</style>

//definifion placeholder font color

<style type="text/css">
input[type=checkbox] {
  margin-right: 0px;
  cursor: pointer;
  font-size: 12px;
  width: 12px;
  height: 12px;
  position: relative;
}
 
input[type=checkbox]:after {
  position: absolute;
  width: 7px;
  height: 9px;
  right: 1px;
  content: " ";
  color: #fff;
  display: inline-block;
  visibility: visible;
  padding: 0px 1px;
  border-radius: 1px;
  background:#ffc107;
  border:1px solid #ffffff;
}
 
input[type=checkbox]:checked:after {
  content: "\2713"; /*markup is ✓*/
  font-size: 7px;
  font-weight:700;
  background-color: #63a2ff;
}</style>

//definifion bottom style

/* definifion input savepasswd bgcolor*/

<style type="text/css">
input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  </style>

input 自动填充颜色改变或透明之白色背景

<style type="text/css">
2. 设置透明:
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}</style>

//input 自动填充颜色改变或透明之透明

<style type="text/css">
input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  </style>

//input 自动填充颜色改变或透明之白色背景

<style type="text/css">
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}</style>

//input 自动填充颜色改变或透明之透明

<style type="text/css">
input{
    caret-color:red;
}</style>

//定义 input 光标颜色

<style type="text/css">
input{
    color:red;
}</style>

//定义 input 字体和光标颜色

html a 事件

<a href='javascript:window.print()'> 打印</a>

//打印当前页面

<a href="###" onclick=window.close();return false)> 关闭本窗口</a>

//关闭当前页面

<a href="javascript:void(0)" onclick="location.reload(true)"></a>

//点击刷新页面

<a href="javascript:void(0);" onclick="js_method()"></a>

//点击无效

html input 动作

<input type="submit" value=" 输入值" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" />

//鼠标激活和经过按钮颜色变换

<input type="text" value=" 输入值" onmouseover="javascript:this.focus();" />

//鼠标划过激活输入框

<input type="text" value=" 输入值" onmouseover="this.focus();this.select();" />

//鼠标划过激活并选中输入框内容

<input type="text" value=" 输入值" onfocus="this.select()" /> 

//选中输入框即选择内容

<input type="text" value=" 输入值" onclick="if(this.value==' 预置值')this.value=' 提示值'" />

//如果输入值等于预置值则显示提示值

<input type="text" value=" 输入值" onclick="if(this.value!=' 预置值')this.value=' 提示值'" />

//如果输入值不等于预置值则显示提示值

<input type="text" value="" onblur="if(this.value==''){this.value=' 自动填充内容';}" />

//鼠标激活并离开输入框后显示预置内容

<input type="text" value=" 输入值" onclick=javascript:this.value="" />

//激活输入框后清空内容

<input type="text" value=" 输入值" style="outline: none;" />

//去掉输入框和按钮边框默认淡蓝色框线

php Local 和 Global 作用域

Local 和 Global 作用域
函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。
函数内部声明的变量拥有 LOCAL 作用域,只能在函数内部进行访问。

php 代码

<!DOCTYPE html>
<html>
<body>

<?php
$x=5; // global scope
  
function myTest() {
   $y=10; // local scope
   echo "<p> 在函数内部测试变量:</p>";
   echo " 变量 x 是:$x";
   echo "<br>";
   echo " 变量 y 是:$y";
} 

myTest();

echo "<p> 在函数之外测试变量:</p>";
echo " 变量 x 是:$x";
echo "<br>";
echo " 变量 y 是:$y";
?>

</body>
</html>

输出结果

在函数内部测试变量:

变量 x 是:
变量 y 是:10
在函数之外测试变量:

变量 x 是:5
变量 y 是:

php include 引入 html 文件套接生成页面

index.php 前端套接页面

<?php
include "header.php";
include "body.php";
include "footer.php"
?>

header.php 头部页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> 这是标题</title>
  <style type="text/css">
    html,body,th{
      font-family: sans-serif;
      font-size: 12px;
      font-weight: 400;
    }
    .myPHP{
      padding: 20px 0 10px 0;
    }
  </style>
</head>

body.php 主体页面

<body>
  <div class="myPHP">
    这是 body 部分
  </div>
</body>

footer.php 页脚页面

<footer>
  这是 footer 部分
</footer>

</html>

通过 CSS 解决 HTML 页面的复选框或单选框与文字对齐问题

当文字 12px 时,单(复)选框 CSS 设置 height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。
CSS

.checkbox_align{height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px;}

HTML

<div style="font-size:12px;">
<input class="checkbox_align" type="radio" /> 单选框 <input class="checkbox_align" type="checkbox" /> 复选框
</div>

 

当文字 14px 时,单(复)选框 CSS 设置 vertical-align:text-bottom; margin-bottom:2px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。

CSS

.checkbox_align{vertical-align:text-bottom; margin-bottom:2px;}

 

当文字 12px 和 14px 以及 1em 时,单(复)选框 CSS 设置 vertical-align:middle; margin-top:-2px; margin-bottom:1px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。

CSS

.checkbox_align{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}

Windows & Linux Web 服务集成环境

WampServer
WampServer 是集成 Apache、Mysql、PHP 于一体的 Windows Web 开发环境,即在 Windows 下的 Apache、PHP 和 Mysql 的服务器软件。同时,PhpMyAdmin 允许您轻松管理数据库。
应用环境:Windows

XAMPP/LAMPP
XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包。这个软件包原来的名字是 LAMPP,但是为了避免误解,最新的几个版本就改名为 XAMPP 了。它可以在 Windows、Linux、Solaris、Mac OS X 等多种操作系统下安装使用。
应用平台:Windows、Linux、Mac OS X

phpStudy 
phpStudy 集成 Apache + Nginx + LightTPD + PHP + MySQL + phpMyAdmin + Zend Optimizer + Zend Loader,一次性安装,无须配置即可使用,是非常方便、好用的 PHP 调试环境。
应用平台:Windows、Linux、macOS

LNMP
LNMP 是一个用 Linux Shell 编写的可以为 CentOS/RHEL/Fedora/Aliyun/Amazon、Debian/Ubuntu/Raspbian/Deepin/Mint Linux VPS 或独立主机安装 LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQL/PHP/Apache)、LAMP(Apache/MySQL/PHP) 生产环境的 Shell 程序。
应用平台:Linux

LAMP 
LAMP 一键安装包是一个用 Linux Shell 编写的可以为 Amazon Linux/CentOS/Fedora/Debian/Ubuntu 系统的 VPS 或服务器安装 LAMP(Linux + Apache + MySQL/MariaDB/Percona + PHP) 生产环境的 Shell 脚本。
应用平台:Linux

点击 a 链接执行动作事件

<a href="####"> 使用 2 个到 4 个 # 或 #all 表示无执行,1 个 # 代表默认锚点 #top 位置,点击后会回到顶部。</a>

// 点击 a 链接不执行任何动作事件

<a href="javascript:void(0)" onclick="window.open('https://hexingxing.cn')" > 点击链接弹出窗口且原页面不变</a>

// 点击 a 链接响应自定义动作事件

HTML CSS 字体列表顺序

为了实现在苹果电脑中显示苹方字体,在 windows 里显示微软雅黑,我给前端的全局字体顺序通常是这样的:

font-family: "Pingfang SC", "Hiragino Sans GB", "Helvetica", "Droid Sans", "Microsoft YaHei", "Arial", "sans-serif";

Pingfang SC:macOS 和 iOS 系统系统字体,最先显示该字体;

Hiragino Sans GB:苹方出来之前苹果系统的早期字体,考虑低版本系统中没有苹方字体的情况;

Helvetica:苹果系统中的英文字体;

Droid Sans:安卓系统默认中文字体(并不是网传的思源黑体哦), 与 Droid Sans Fallback 的区别是,Droid Sans Fallback 除了中文还兼容了日文、韩文;

Microsoft Yahei:Windows 系统字体;

Arial:苹果和 windows 系统中都有的无衬线英文字体;

Sans-serif:无衬线字体(字体的种类非字体),当前面所有字体都缺失时系统自动选用该类字体中的一种。

forward(转发)和 redirect(重定向)的实际请求方式

forward 和 redirect 是 servlet 中的两种主要的跳转方式,forward 称做转发,redirect 称做重定向。

地址栏显示形式:
1. forword 是服务器内部的重定向,服务器直接访问目标地址的 url 网址,把里面的东西读取出来,但是客户端并不知道,因此用 forward 的话,客户端浏览器的网址是不会发生变化的;
2. redirect 是服务器根据逻辑,发送一个状态码,告诉浏览器重新去请求那个地址,所以地址栏显示的是新的地址。

逻辑跳转方式:
1. forword 在前端收到请求不是由自己处理时,在不告知用户的情况将数据跳转提交给应该处理的服务器,此时数据共享给到至少三方平台;
2. redirect 在前端收到请求不是由自己处理时,即在前端界面显示,由用户选择另外的服务器或显现正在跳转的过程,理论上数据不能共享。

请求应用情景:
1. forword 一般用于用户登录的时候,根据角色转发到相应的模块;
2. redirect 一般用于用户注销登录时返回主页面或者跳转到其他网站。

跳转效率:
1. forword 效率高;
2. redirect 效率低。
请求次数:
1. forword 只请求一次;
2. redirect 有两次请求。

Linux 踢出其他终端登录的会话

命令格式:
[root@localhost ~]# pkill [-t 终端号] 进程名

pkill 命令常用信号及其含义
信号编号 信号名 含义
0 EXIT 程序退出时收到该信息。
1 HUP 挂掉电话线或终端连接的挂起信号,这个信号也会造成某些进程在没有终止的情况下重新初始化。
2 INT 表示结束进程,但并不是强制性的,常用的 “Ctrl+C” 组合键发出就是一个 kill -2 的信号。
3 QUIT 退出。
9 KILL 杀死进程,即强制结束进程。
11 SEGV 段错误。
15 TERM 正常结束进程,是 kill 命令的默认信号。

 

命令实例:
1、使用 who 或 w 命令查询当前已经登录的会话;

who
hxx pts/0 2019-10-06 19:52 (1.2.3.4)
hxx pts/1 2019-10-06 21:22 (2.3.4.5)

 

2、使用 tty 命令查询自己的对应记录;

tty
/dev/pts/1

 

3、已知自己是 pts1,所以要踢出另外一个 tty0 的会话;

skill -KILL -v pts/0
pts/0 hxx 2471 bash

 

3.1、最新命令是 pkill -9 -t pts/0;

pkill -9 -t pts/0

 

4、查询是否已经成功踢出 pts0;

who
hxx pts/1 2019-10-06 21:22 (2.3.4.5)

 

获取网页 title 标题内容

cURL

<?php
$c = curl_init();
$url = 'https://hexingxing.cn';
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($c);
curl_close($c);
$pos = strpos($data,'utf-8');
if($pos===false){$data = iconv("gbk","utf-8",$data);}
preg_match("/<title>(.*)<\/title>/i",$data, $title);
echo $title[1];
?>

file()

<?php
$lines_array = file('https://labs.hexingxing.cn');
$lines_string = implode('', $lines_array);
$pos = strpos($lines_string,'utf-8');
if($pos===false){$lines_string = iconv("gbk","utf-8",$lines_string);}
eregi("<title>(.*)</title>", $lines_string, $title);
echo $title[1];
?>

file_get_contents

<?php
$content=file_get_contents("https://hxx.tw");
$pos = strpos($content,'utf-8');
if($pos===false){$content = iconv("gbk","utf-8",$content);}
$postb=strpos($content,'<title>')+7;
$poste=strpos($content,'</title>');
$length=$poste-$postb;
echo substr($content,$postb,$length);
?>

Sublime text 3 快速插入多行递增数字

配置
Ctrl Shift P 调用 Package Control
输入 pki,选择 Package Control:Install Package
输入 InsertNums,选择 InsertNums 安装

使用
选择需要标号的多行文本,按下 Ctrl Shift L 进入多行编辑模式
按下 Home 键,把所有光标移到行首,按下 Ctrl Alt N 回车,即可 1、2、3、4…自动编号
也可输入 a:b,比如 2:2,则会生成初始为 2、间隔为 2 的数字序列:2、4、6、8、10

Sublime text 3 同时快速编辑多行内容

1,鼠标选中多行,按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行;
2,鼠标选中文本,反复按 CTRL D (Command D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
3,鼠标选中文本,按下 Alt F3 (Ctrl Command G) 即可一次性选择全部的相同文本进行同时编辑;
4,Shift 鼠标右键 (Option 鼠标左键) 或使用鼠标中键可以用鼠标进行竖向多行选择;
5,Ctrl 鼠标左键 (Command 鼠标左键) 可以手动选择同时要编辑。

dataURI: 数据统一资源标志符

1、Img src 传统方式
传统的 HTML 嵌入图片都采用以下方式外部链接:

<img src="images/myimage.gif">

以上是目前主流的 HTML 链接图片的方式,通过 img 标记的 src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。

2、DataURI 现代方式
使用 dataURI 技术,图片数据以 base64 字符串格式嵌入到了页面中,与 HTML 成为一体,它的形式如下:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAA0AEEDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgUD/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAECBAMF/9oADAMBAAIQAxAAAAHHh2Pa8ZW7k5dSFda6rDnarqy44+Nb2Zm1iX+mTDvTolBbruTJO2ZIoNfF7MfE7TbFkJCVu6/SOR0KhzsE85qCu0gKygNQA1//xAAgEAACAgMAAwEBAQAAAAAAAAABAgADBBETEBIUBSEj/9oACAEBAAEFAvCr7G/Iqw2oyK8xynq2pqanB5waUJ63XflfVl1/lJjZd9B7Jie0fEdJwaPnVENehnaoR8tbFXL5j7LDBlPEzG13HgqRNeFQtApMWqxoKrN8nhC7tGOSpxkZWoKDLrDfR/gMkrLHNjzU5NPncn57p89k+ayDHsMK6OoJ0ffV99X32cTq5nRof6Z//8QAIREAAgIBBAIDAAAAAAAAAAAAAAECESEDEiIxBBATQVH/2gAIAQMBAT8Bs8eFvJr6dPiZMluRGbj0fNPsc5s5EZV9CnL8N8xuVZLLZuZuZbfr/8QAHhEAAwACAgMBAAAAAAAAAAAAAAECAxIRIQQQUWH/2gAIAQIBAT8B5R5ORyujxsjpdm6ORYpQ8U10yccT0hzJrJU/prP00gSnnr00cI1Ql6//xAApEAABAwIEBgEFAAAAAAAAAAABAAIRITEDEBJBEzJRkaHwYSAzgbHh/9oACAEBAAY/AsoCOFwteILk2XDOGGPPKQoP0WKsmErEfxNMwarCe15dAkolUIXKVZUBW6s7uohzehCOmSTucrquIV93ISL2zMbVVAhDCZso0GVZANPdEzMCglNnoJjz+vKxC1kQzp7utWj5tvX+JxLIEAD59r3Q0iIBA9/KLzc57d1FO6DdptK5UaWVGqM5lF01V1fwrq+f/8QAIxABAAICAQQCAwEAAAAAAAAAAQARITFBUWFxgZGxEKHR8P/aAAgBAQABPyGvqV24iCWUgYpizg1ca7yHDjX3HTeTjDX8LP5Snai0ihjhGsKemEiGRrLVHjnrqIVguJij3K+/wGhCj9yZt7GUyGRp4f8AdYhrtb1ev18R3klrh4iaCO5O0+I4hSQBduSCdC8ypg7S2YGqNFtGoKilSrctzSLStE7mOYouxU4OulSro/R+4gUOpOeHiIDCBfU8fL4IDF3GgwMvbb1KI5ArrQH1UME9tXQ3+8pRzyVKgnBM6Jar0hSy3hLTlYabz/GYx5Xz2uZR5sx+oIiMmPwwROItZnVXU60NtS6308/1mNQx2dKljNvUrMUrsTIULZR0n//aAAwDAQACAAMAAAAQxlOwxf8ATL8Dkc5M3/PgPf/EAB0RAAICAgMBAAAAAAAAAAAAAAABETEQIVFhofH/2gAIAQMBAT8QQTrlIqxxVE8BsSyObG2DiRHtsnv6NRpSk+CKqPDWUwSKZ2sfOyJt4//EAB4RAAICAgIDAAAAAAAAAAAAAAABETEhURBhobHx/9oACAECAQE/EOwzGZzMsSQ2VIogEkFDOHB3+hDamED+kds+TMW4Q7QtQtIhUuP/xAAkEAEAAgICAQQDAQEAAAAAAAABESEAMUFRYXGBofEQkbHR4f/aAAgBAQABPxBF04SzTAzGEY1JVAKA1bskrAzcrEgGU80jjje5EhkQy9Js5xiwMzkujCF1YYCCousLobE5vxAQoOWWIHiJDGY4gpJEAQtFy6YH00hRyDUcAR+crmvcVnnYIRPLDiFMOh+sWEdZrjRKias4/Aici8JcQLJ2f4hGqVvJLY3WCkvyGWpDUmfc8olNOTJNAixJPccXRwFATRa/gAid4CpCp2ylYInmUYdvRinjAogVj0BxUc6flLFOKTPvjI4+kJL9XIsWk4AjASAl7YscYVEiygcrtUDy9lLJmmhGTzCybhKnBQHF3I2Yto4hcWDEJ7sUAaBzw9owGaKlyEWNQAn/ALOp1NkURz6fgsbFgxMsHBERO56yyTNJRrzu8WfjMdg1MbD7zoBApaSc9M5qCYaYJmLnx/O8sMYXZoYfnIMSKOkz0Zw0oTFMhpIKnWsYJE2AXP1iYtWQhB4Hue+DhaKcEyQRVGTTeIZDV/64Sx2BBF7qPB+sgiElY25436z/2Q==">

以上 base64 字符串已经完全看不出任何跟图片相关的信息,图片内容已经和页面融为一体,已不会因从外部链接或外部链接的各种原因受影响。
dataURI 已经受到当前主流的现代浏览器支持,如:火狐,谷歌,Safari,Opera,以及较高版本的 IE 浏览器。

3、dataURI 不完善的方面
1> Base64 编码的数据体积通常是原数据的体积 4/3,也就是 dataURI 形式的图片会比二进制格式的图片体积大 1/3。
2> dataURI 形式的图片不会被浏览器缓存,这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。
3> 目前仅建议在链入小图标或小型单色图片时使用 dataURI,如果图片过大,会生成非常冗长的字符串。

4、dataURI 类型 URI 的形式
dataURI 数据可以直接在浏览器的地址栏中输入显示内容,如将以下代码在浏览器中运行,即可显示一个加粗的 "Hello, world!"data: 后面的数据直接用做网页的内容,并非网页的地址。

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

以下字符在浏览器中将显示为” 你好,中文!”,charset=UTF-8 为字符编码方式。

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

dataURI 形式:

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 图片数据

5、dataURI 使用规范
格式为 data:{mimeType};base64,{code}{mimeType}
图片规范为:JPG 文件:image/jpeg,GIF 文件:image/gif,PNG 文件:image/png。
{code}:指图片二进制转换成 base64 的字符串。dataURI scheme 在 RFC2397 中定义,旨在将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。

语法定义:

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value

在实际使用时,要将 dataURI 数据也放入浏览器缓存,可以使用引入 CSS 方式,CSS 中的 URL 操作符是用来指定网页元素的背景图片,浏览器并不在意 URL 里写的是什么,只要能通过它获取需要的数据。所以,可以将 dataURI 形式的图片存储在 CSS 样式表,然后再通过所有浏览器都会积极的缓存 CSS 文件的方式来提高页面加载效率。

实际应用:
1> HTML 嵌入方式

<img src="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABA..." />

2> CSS 引用方式

<style type="text/css">
.div {
  width: 100px;
  height: 100px;
  background-image: url("data:image/gif;base64,R0lGdhfODlhAwADAIAAAP///8zMzCH5BdgfhgAAAAAAALAAAAAADAAMAAAghghgIEBHIJBQA7...");
  border: 1px solid gray;
  padding: 10px;
  }
</style>
<div class="striped_box">
这是一个有条纹的方块
</div>

6、关于 dataURI 和 dataURL 名称
目前很多关于介绍 dataURI 的文章都混淆了 dataURI 和 dataURL,正确的是 dataURI
URI = Universal Resource Identifier 统一资源标志符
URL = Universal Resource Locator 统一资源定位符
URN = Universal Resource Name 统一资源名称

URL 代表资源的路径地址,而 URI 代表资源的名称。

通过 URL 找到资源是对网络位置进行标识,如:
http://example.org/absolute/URI/with/absolute/path/to/resource.txt
ftp://example.org/resource.txt

通过 URI 找到资源是通过对名称进行标识,这个名称在某命名空间中,并不代表网络地址,如:
urn:issn:1535-3613