点击 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,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">

以上 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

CSS 字体文件引用

<!DOCTYPE html>
<html>
<head>
	<title> 字体文件引用</title>
<style type="text/css">	
@font-face {
    font-family: 'fontsTest'; 
    src: url('PingFangSCRegular.ttf'); /*fonts file dirpath*/
}
html,body {
	font-family: fontsTest, sans-serif; 	
    font-weight: 700; /*100 400 700*/
    font-style: normal; /*normal italic oblique*/
    font-size: 24px; /*12px 22px 24px*/
}
</style>
</head>
<body>
	ABCDEFGHIJKLMNOPQRSTUVWXYZ<BR>
	abcdefghijklmnopqrstuvwxyz<BR>
	你在我心里永远是一个可爱的人.<BR>
</body>
</html>

编程语言注释规范

Linux
行注释:#这里是注释
块注释:none
扩展名:.bash/.conf/…

PHP
行注释://这里是注释
块注释:/*这里是注释*/
扩展名:.php

Python
行注释:#这里是注释
块注释:'''这里是注释'''

Java
行注释://这里是注释
块注释:/*这里是注释*/
扩展名:.java

HTML
行注释:none
块注释:
扩展名:.htm/.html

CSS
行注释:none
块注释:/*这里是注释*/
扩展名:.css

JavaScript
行注释://这里是注释
块注释:/*这里是注释*/
扩展名:.js

SQL
行注释:– 这里是注释
块注释:/*这里是注释*/
扩展名:.sql

XML
行注释:none
块注释:
扩展名:.xml

C
行注释://这里是注释
块注释:/*这里是注释*/
扩展名:.c/.h

C++
行注释://这里是注释
块注释:/*这里是注释*/
扩展名:.cpp/.h

C#
行注释://这里是注释
块注释:/*这里是注释*/
xml 注释:///这里是 xml 注释
扩展名:.cs

VB
行注释:'这里是注释
块注释:none
扩展名:.bas

VB.NET
行注释:'这里是注释
块注释:none
xml 注释:///这里是 xml 注释
扩展名:.vb

Perl
行注释:#这里是注释
块注释:none
扩展名:.pm

PrismJS Examples

Bash

cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini

 

PowerShell

dir


    目录: C:\Users\hexingxing.WD


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-r---        2019/5/17     11:59                3D Objects
d-r---        2019/5/17     11:59                Contacts
d-r---        2019/7/10     17:24                Desktop
d-r---        2019/5/17     18:41                Documents
d-r---        2019/5/17     11:59                Downloads
d-r---        2019/5/17     11:59                Favorites
d-r---        2019/5/17     11:59                Links
d-r---        2019/5/17     11:59                Music
d-r---        2019/5/17     11:59                Pictures
d-r---        2019/5/17     11:59                Saved Games
d-r---        2019/5/17     11:59                Searches
d-r---        2019/5/17     11:59                Videos

 

HTML

<!DOCTYPE html>
<html>
<head>
	...
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="prism.js"></script>
</body>
</html>