获取网页 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>

JS 标题栏内容滚动

<script> 
       //定时器
       setInterval(function(){
           //获得页面标题, 是 string 类型
           var oldTitle=document.title;
           //转换为数组类型
           var titleArr=oldTitle.split('');
           //使标题的字符产生位置的变化
           titleArr.push(titleArr.shift());
           //连接为字符串
           document.title=titleArr.join('');
       },100);
</script>

PrismJS,一款漂亮的代码高亮工具

PrismJS 是一款轻量级、可扩展的语法高亮显示工具,在支持现代 Web 标准基础下增加了更多可选的风格插件。

PrismJS 支持自定义扩展代码的语言、主题和插件选项,勾选自己常用的代码语言和主题风格以及增强插件,将定制好的代码文件 prism.css 和 prism.js 如下方式链接到页面,再使用 <pre><code> 编辑方式编写代码文章即可展现漂亮的代码高亮。

<pre><code class="language-css">p { color: red }</code></pre>

PrismJS 支持常见的 Markup+HTML(html+css+js),以及 java、python、docker、bash、nginx、powershell 等 183 种程序语言,并且增强插件上支持命令行模式(Command Line)、行高亮模式(Line highlight)和行序号模式(Line Numbers)等功能。

完整功能预览页面:https://static.hexingxing.cn/product/prism/

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

 

官方网站:https://prismjs.com

记一次 Typecho 安装过程

0、在这之前请保证服务器中的 Ningx、PHP、Mysql 已经安装并正常运行;

1、下载

wget http://typecho.org/downloads/1.1-17.10.30-release.tar.gz

 

2、解压

tar -xvf 1.1-17.10.30-release.tar.gz
cd build

 

3、复制解压 Bliud 内的文件到根目录(上一级目录)

cp ./* ../ -r

 

4、安装
4.1 访问 http://127.0.0.1/install.php;
4.2 点击 “我准备好了, 开始下一步 » ” 按钮进行安装;
4.3 填写相关链接配置,如果没有特殊要求,一般只要填写数据库密码和 typecho 密码,默认的邮件地址记得修改;
4.4 上一步填写完成后,点击 “确认, 开始安装 »” ,若提示 “对不起,无法连接数据库,请先检查数据库配置再继续进行安装”,说明 typecho 无权创建数据库,可自行登录数据库管理平台创建为 typecho 的数据库;
4.5 完成上一步后,可能会提示 “安装程序无法自动创建 config.inc.php 文件
您可以在网站根目录下手动创建 config.inc.php 文件, 并复制如下代码至其中”,此时可按提示创建文件并放置要求的目录中,或者将该目录的权限临时调整为 chmod 777 rootdir -R;
4.6 以上全部完成后,提示以下信息即表示安装配置成功;

安装成功!
您的用户名是: admin
您的密码是: yourpassword
参与用户调查, 帮助我们完善产品
您可以将下面两个链接保存到您的收藏夹:

点击这里访问您的控制面板
点击这里查看您的 Blog
希望您能尽情享用 Typecho 带来的乐趣!

5、登录 typecho
如果提示 URL 为 http://127.0.0.1/index.php/action/login?name=admin&password=admin&referer=http%3A%2F%2F127.0.0.1%2Fadmin%2Findex.php&_=a6ca5a4fff943b47824c6b1f8af93cde
页面为 404 Not Found

出现这种情况时是 /etc/nginx/conf.d/http.conf 文件的 location 设置要支持 pathinfo,即将 location ~ \.php$ 改成 location ~ .*\.php(\/.*)*$

完整代码片段为

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
# location ~ \.php$ {
location ~ .*\.php(\/.*)*$ {
root html;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
include fastcgi_params;
}
}

 

以上修改完成后重启 nginx 和 php

service nginx restart
service php-fpm restart

6、完成。

CSS 转换文本大小写

<html>
<head>
<style type="text/css">
  h1 {text-transform: uppercase} /*全部大写*/
  p.uppercase {text-transform: uppercase} /*全部大写*/
  p.lowercase {text-transform: lowercase} /*全部小写*/
  div.capitalize {text-transform: capitalize} /*首字母大写*/
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<div class="capitalize">This is some text in a paragraph.</div>
</body>
</html>
text-transform: uppercase; /**单行范例**/
描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。