黄琦雲的博客

个人博客网站添加文章搜索功能

Mon, 04 Mar 2019 00:00:00 +0000

现在很多网站页面里都有搜索模块，包括在线搜索、站内搜索等等，尤其是博客类网站，文章搜索功能就显得比较重要，现在以个人博客网站为例，详细介绍如何给页面添加搜索功能模块，至于如何搭建个人博客网站，可以参考这篇文章：https://knightyun.github.io/2018/04/01/github-pages-blog；

功能分析

为网页添加搜索模块的第三方网站有不少，实现效果也都不错，既然人家都能通过代码实现此功能，与其过度依赖第三方，何不自己研究一下原理自己实现呢_；

网页内搜索功能无非就是在文本输入框内输入一串想要搜索的关键字符串，点击搜索按钮后查找匹配出站内所有文章的匹配结果进行输出，再附上一个文章的链接；针对这个功能，作者本人第一时间想到的则是前端领域里的 Ajax，利用 XMLHttpRequest() 实现数据的交互，不清楚的可以自行百度快速补习，然后一般博客类网站都有 RSS 订阅功能及其数据页面，不清楚的也可以迅速百度了解一下，其实就是站内某个目录内存在一个叫 feed.xml 或者类似名字的页面，XML格式的，早期用于实现新闻内容订阅的，现在用的也比较广泛，里面存储的就是文章相关的一些数据，因此我们就可以获取这个文件里面的所有内容然后实现搜索匹配；

如果像我一样用 Gihub Pages 搭建的个人博客网站的话，无论用的 jekyll 或者 hexo，一般这个 feed.xml 文件就位于 根目录 下，并且该文件同时记录着某一篇文章所对应的 标题、页面链接、文章内容 等内容，这三个部分后面将用到，xml 内容大致如下：

当然有其他更好的实现方法可以自行参考或者在文末评论，那么接下来便通过这个方法来一步步实现搜素功能；

功能实现

先预览一下页面最终的实现效果：

或者在这里：https://knightyun.github.io/ 预览我的博客的搜索模块的最终实现；

HTML部分

即页面样式，组成很简单，即一个文本输入框<input>和一个搜索图标，这里图标可以自行搜索下载一个，或者像下面一样使用在线图标，全部代码如下：

先在<header></header>内部添加以下代码，使用在线图标：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

然后在网页内需要添加搜索栏的合适位置添加以下代码，一般放在顶部导航栏：

<div class="search">
    <i class="material-icons search-icon search-start">search</i>
    <input type="text" class="search-input" placeholder="Searching..." />
    <i class="material-icons search-icon search-clear">clear</i>
	<div class="search-results"></div>
</div>

上面的clear是一个清除输入框内容的图标，search-results是用于输出匹配到的结果的板块；

CSS部分

然后来看一下CSS样式代码，仅供参考：

.search {
    position: relative;
    height: 30px;
    text-align: right;
    line-height: 30px;
    padding-right: 10px;
}

.search .search-icon {
    float: right;
    height: 100%;
    margin: 0 10px;
    line-height: 30px;
    cursor: pointer;
    user-select: none;
}

.search .search-input {
    float: right;
    width: 30%;
    height: 30px;
    line-height: 30px;
    margin: 0;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
}

.search .search-clear {
    display: none;
}

.search .search-results {
    display: block;
    z-index: 1000;
    position: absolute;
    top: 30px;
    right: 50px;
    width: 50%;
    max-height: 400px;
    overflow: auto;
    text-align: left;
    border-radius: 5px;
    background: #ccc;
    box-shadow: 0 .3rem .5rem #333;
}

.search .search-results .result-item {
    background: aqua;
    color: #000;
    margin: 5px;
    padding: 3px;
    border-radius: 3px;
    cursor: pointer;
}

样式可以自行随意调整，最终感觉好看就OK；

JavaScript部分

接下来就是重头戏了，也是实现搜索功能的核心部分，搜索逻辑的实现；

再来大致分析一下逻辑，和实现的思路：

利用XMLHttpRequest()获取站内feed.xml内的所有数据，保存到一个XML DOM对象中；
将XML对象中的文章标题、链接、内容、索引等通过getElementsByTagName()等方法获取并保存到对应数组变量中；
用户在输入框输入查找内容，提交后内容保存到一个字符串类型变量中；
遍历保存文章内容的数组，通过.search()等方法和输入值进行匹配；
匹配成功后得到所有匹配成功的数组元素的索引值，该索引值也是该内容的标题、链接数组对应的索引值；
将最终搜集的文章标题、链接，以及匹配到的内容片段摘取输出到页面；

这里附上最终的 js 实现代码与注释：

// 获取搜索框、搜索按钮、清空搜索、结果输出对应的元素
var searchBtn = document.querySelector('.search-start');
var searchClear = document.querySelector('.search-clear');
var searchInput = document.querySelector('.search-input');
var searchResults = document.querySelector('.search-results');

// 申明保存文章的标题、链接、内容的数组变量
var searchValue = '',
    arrItems = [],
    arrContents = [],
    arrLinks = [],
    arrTitles = [],
    arrResults = [],
    indexItem = [];
var tmpDiv = document.createElement('div');
tmpDiv.className = 'result-item';

// ajax 的兼容写法
var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        xml = xhr.responseXML;
        arrItems = xml.getElementsByTagName('item');
        
        // 遍历并保存所有文章对应的标题、链接、内容到对应的数组中
        for (i = 0; i < arrItems.length; i++) {
            arrContents[i] = arrItems[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;
            arrLinks[i] = arrItems[i].getElementsByTagName('link')[0].childNodes[0].nodeValue.replace(/\s+/g, '');
            arrTitles[i] = arrItems[i].getElementsByTagName('title')[0].childNodes[0].nodeValue;
        }
    }
}

// 开始获取根目录下 feed.xml 文件内的数据
xhr.open('get', '/feed.xml', true);
xhr.send();

searchBtn.onclick = searchConfirm;

// 清空按钮点击函数
searchClear.onclick = function(){
    searchInput.value = '';
    searchResults.style.display = 'none';
    searchClear.style.display = 'none';
}

// 输入框内容变化后就开始匹配，可以不用点按钮
searchInput.onkeydown = function () {
    setTimeout(searchConfirm, 0);
}
searchInput.onfocus = function () {
    searchResults.style.display = 'block';
}

function searchConfirm() {
    if (searchInput.value == '') {
        searchResults.style.display = 'none';
        searchClear.style.display = 'none';
    } else if (searchInput.value.search(/^\s+$/) >= 0) {
    
        // 检测输入值全是空白的情况
        searchInit();
        var itemDiv = tmpDiv.cloneNode(true);
        itemDiv.innerText = '请输入有效内容...';
        searchResults.appendChild(itemDiv);
    } else {
    
        // 合法输入值的情况
        searchInit();
        searchValue = searchInput.value;
        searchMatching(arrContents, searchValue);
    }
}

// 每次搜索完成后的初始化
function searchInit() {
    arrResults = [];
    indexItem = [];
    searchResults.innerHTML = '';
    searchResults.style.display = 'block';
    searchClear.style.display = 'block';
}

function searchMatching(arr, input) {

    // 在所有文章内容中匹配查询值
    for (i = 0; i < arr.length; i++) {
        if (arr[i].search(input) != -1) {
            indexItem.push(i);
            var indexContent = arr[i].search(input);
            var l = input.length;
            var step = 10;
            
            // 将匹配到内容的地方进行黄色标记，并包括周围一定数量的文本
            arrResults.push(arr[i].slice(indexContent - step, indexContent) +
                '<mark>' + arr[i].slice(indexContent, indexContent + l) + '</mark>' +
                arr[i].slice(indexContent + l, indexContent + l + step));
        }
    }

    // 输出总共匹配到的数目
    var totalDiv = tmpDiv.cloneNode(true);
    totalDiv.innerHTML = '总匹配：<b>' + indexItem.length + '</b> 项';
    searchResults.appendChild(totalDiv);

    // 未匹配到内容的情况
    if (indexItem.length == 0) {
        var itemDiv = tmpDiv.cloneNode(true);
        itemDiv.innerText = '未匹配到内容...';
        searchResults.appendChild(itemDiv);
    }

    // 将所有匹配内容进行组合
    for (i = 0; i < arrResults.length; i++) {
        var itemDiv = tmpDiv.cloneNode(true);
        itemDiv.innerHTML = '<b>《' + arrTitles[indexItem[i]] +
            '》</b><hr />' + arrResults[i];
        itemDiv.setAttribute('onclick', 'changeHref(arrLinks[indexItem[' + i + ']])');
        searchResults.appendChild(itemDiv);
    }
}

function changeHref(href) {

    // 在当前页面点开链接的情况
    location.href = href;

    // 在新标签页面打开链接的代码，与上面二者只能取一个，自行决定
    // window.open(href);
}

可以把上面的代码保存到search-box.js这样的 js 文件中，然后引入到 html 页面里；

看一下最终效果：

或者来我的主页查看：https://knightyun.github.io/

编程范式之命令式与函数式

Sun, 27 Jan 2019 00:00:00 +0000

很多语言是聚范式/多重范式编程，即支持多在编程范式，如面向对象(Java)，面向过程(C语言)，泛函(函数式)，元程序设计等；以下例子都用 JavaScript 举例；

命令式编程(Imperative)

如命令一般指导程序一步步完成功能，如 for 循环：

function myFn(n) {
    for (i = 0; i < 3; i++) {
        n++;
    }
    console.log(n);
}
myFn(0);  // 3

函数式编程/声明式(Functional/Declarative)

函数式编程特点：

函数式编程是声明式的；
提倡纯函数理念，变量私有，不同于面向对象编程的成员共享；
无副作用，不影响其他外部变量；
有些类似初中数学纯函数f(x)的定义，提供输入值，返回新的输出值，每次提供相同输入值总能返回相同输出值，使线程安全可靠；

Array.map();    // 纯函数，输出唯一
Math.random();  // 非纯函数，输出不唯一

函数的大量使用，变量中存储函数，动态创建函数，返回值为函数，函数作为参数传递，等等；

// 字符串通过函数储存在变量中
var myStr = function(){return 'Hello World'};
console.log(myStr);  // Hello World

// 对象属性值储存为函数
var myObj = {
    name: 'Cloud',
    getName: function(){
        return this.name;
    }
}
console.log(myObj.getName()); // Cloud

// 动态创建函数，用时调用，用完销毁
console.log('Hello ' + (function(){
    return 'World';
})());  // Hello World

// 函数作为参数进行传递
function paraFn() {
    return 'Hello';
}
function myFn(a, b) {
    return a + b;
}
console.log(myFn(paraFn(), 'World')); // Hello World

// 函数作为返回值
function myFn2() {
    var a = 'Hello ';
    return function(){
        return a + 'World';
    }
}
console.log(myFn2()());  // Hello World

总结：例如for循环一个数组，命令式便是写出具体循环的方式，声明式便是只写声明函数，只要循环结果，具体方式交给程序执行；

例如：

// 命令式
var a = [1, 2, 3];
var b = [];
for (i = 0; i < 3; i++) {
    b.push(a[i] * a[i]);
}
console.log(b);  // [1, 4, 9]

// 声明式
var a = [1, 2, 3];
var b = a.map(function(i){
    return i * i;
});
console.log(b);  // [1, 4, 9]

同样的结果，代码量和理解难易上，声明式都明显优于命令式对吧；

声明式编程：

特点：

说明想要实现的功能，让机器完成步骤以及如何实现；
免去一些不必要的命令步骤，让思维集中在功能开发上，而不是冗长的复杂过程实现；

递归实现阶乘便是一个典型的函数式：

function factorial(n) {
    if (n == 0) return 1;
    return n * factorial(n-1);
}
console.log(factorial(3));  // 3 x 2 x 1 = 6

.map() .reduce()等也是申明式编程函数；

函数合成

一个值变成另一个值，中间经过多个函数，将多个函数合并为一个函数来实现；

举个例子：

// 高中数学常见的过程
g(x) = 2x;
h(x) = x + 3;
f(x) = 2x + 3;
// 则可变换为以下形式，即我们所学的复合函数
f(x) = h(g(x));

上面的f(x)便是一个合成函数，实现了变量x到2x + 3的转变；

js的实现：

function gFn(x) {
    return x *2;
}
function hFn(x) {
    return x + 3;
}
console.log(hFn(gFn(1)));  // 5

// 使用函数合成
function fFn(x) {
    return hFn(gFn(x));
}
console.log(fFn(1));  // 5

函数柯理化(Currying)

以逻辑学家Haskell Curry命名，即使接收多个参数的函数变成接受单个参数的函数的过程。单参数会使函数合成更简单；

例如：

// 原函数
function plusFn(x, y, z) {
    return x + y + z;
}
console.log(plusFn(1, 2, 3));  // 6

// 柯理化后
function plusFn(x) {
    return function(y) {
        return function(z) {
            return x + y + z;
        }
    }
}
console.log(plusFn(1)(2)(3)); // 6

Kali Linux 自定义分辨率

Sun, 27 Jan 2019 00:00:00 +0000

Kali中无分辨率1920 x 1080，自定义的步骤：

方法一

控制台输入：

cvt 1920 1080

会得到以下内容：

# 1920x1080 59.96 Hz (CVT 2.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz
Modeline "1920x1080_60.00"  173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync

复制后面的内容，然后在新控制台输入：

sudo xrandr --newmode "1920x1080_60.00" 173.00 1920 2048 2248 2576 1080 1083 1088 1120 -hsync +vsync

然后再输入：

sudo xrandr --addmode Virtual1 "1920x1080_60.00" 

最后系统设置选择分辨率或者：

sudo xrandr --output Virtual1 --mode "1920x1080_60.00"

但是此方法重启会失效，因此可以使用方法二；

方法二

在 /etc/profile 文件末尾假如以下代码：

xrandr --newmode "1920x1080_60.00" 173.00 1920 2048 2248 2576 1080 1083 1088 1120 -hsync +vsync
xrandr --addmode Virtual1 "1920x1080_60.00"

重启完成。

Linux强行取消挂载

Sun, 27 Jan 2019 00:00:00 +0000

Linux系统有时需要取消挂载一些设备或者目录，

例如：

# /dev/sdb挂载到了 /mnt/usb
umount /mnt/usb

但是多半会提示：

umount: /mnt/usb: target is busy

如果已备份了数据需要强行卸载，并且尝试 umount -f /mnt/usb 还是失败的情况

可以使用命令：

fuser -cu /mnt/usb  #查看挂载文件进程
fuser -mv /dev/sdb  #或者查看挂载点进程
fuser -ck /mnt/usb  #结束进程
fuser -mk /dev/sdb  #使用挂载点结束进程

或者使用“懒卸载”方式，命令执行后系统会自动关闭相关进程后再卸载：

umount -l /mnt/usb

Linux中apt install的lock问题

Sun, 27 Jan 2019 00:00:00 +0000

Linux系统中有时执行 apt install 时，可能会显示以下问题：

E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
E: 无法锁定管理目录(/var/lib/dpkg/)，是否有其他进程正占用它？

根据提示分别找到对应的两个lock文件，移除即可；

解决方法：

sudo rm /var/cache/apt/archives/lock
sudo rm /var/lib/dpkg/lock

再次运行就成功了。

JavaScript深度迭代遍历未知对象

Sun, 27 Jan 2019 00:00:00 +0000

面向对象编程的语言，都存在对对象的一些操作，其中就包括遍历未知对象的属性值。

通常情况

常见的遍历对象的方法：

var o = {
    name: 'cloud',
    age: 20
}
for (i in o) {
    console.log(i + ': ' + o[i]);
}
// name: cloud
// age: 20

特殊情况

但是对象中又含有子对象，对象的属性又是另一个对象，或者更深层嵌套，上面方法就不适用了；

下面使用递归实现这个功能：

var o = {
    name: {
        firstName: 'cloud',
        lastName: 'huang'
    },
    age: 20
}
function myFn(obj) {
    for (i in obj) {
        console.log(i + ': ' + obj[i]);
        // 这里使用递归，属性类型为对象则进一步遍历
        if (typeof(obj[i]) == 'object') {
            myFn(obj[i]);
        }
    }
}
myFn(o);
// 输出：
// name: [object Object]
// firstName: cloud
// lastName: huang
// age: 20

这样的话不论对象有多复杂的结构都能全部遍历到位；

困境

但同时，这也是个问题，一些对象层次非常深甚至是死循环的情况就尴尬了，类似于子对象属性与父对象属性一样，尝试用上诉函数遍历一下浏览器的window 对象就能体会了，你会后悔的；

所以为避免这种尴尬情况，设置一个迭代深度值吧，指定遍历到第几代：

var depth = 0;  // depth为迭代深度值
function myFn(obj) {
    for (i in obj) {
        console.log(i + ': ' + obj[i]);
        depth++;
        if (depth < 10
        && typeof(obj[i]) == 'object') {
            myFn(obj[i]);
        }
    }
}

或者使用一种类似懒加载的形式：

function myFn(obj) {
    for (i in obj) {
        console.log(i + ': ' + obj[i]);
        if (typeof(obj[i]) == 'object') {
            // 判断用户是否要继续迭代
            if (confirmFn('是否深入遍历？')) {
                myFn(obj[i]);
            }
        }
    }
}

css属性前浏览器厂商前缀

Sun, 27 Jan 2019 00:00:00 +0000

CSS3中一些新功能也是目前导致各大浏览器不兼容的一个原因，这些新功能的出现，浏览器厂商们变便开始尝试融合、试验，所以就在这些功能前加上自己的特定前缀来执行自己的特定解决方法，为了让这些功能能在完全确认下来前使用；

下面就是我们经常用到的前缀及其兼容浏览器：

-webkit-

Apple Webkit团队，兼容Android, Safari, Chrome, BlackBerry等；

-moz-

Mozilla，兼容Firefox等;

-ms-

Microsoft基金会，兼容IE;

-o-

兼容Opera, Opera Mini, Opera Mobile;

因此对于一些较新的css3特性，需要添加以上前缀兼容每个浏览器，例如实现线性渐变，标准写法是 linear-gradient()，但是一下浏览器还未完全确定这一特性，就在前面添加一个前缀来进行试验执行，如 -webkit-linear-gradient；

下面是开发中常用的兼容写法：

body {
    background: linear-gradient(0, green, blue);
    background: -webkit-linear-gradient(0, green, blue);
    background: -moz-linear-gradient(0, green, blue);
    background: -o-linear-gradient(0, green, blue);
    background: -ms-linear-gradient(0, green, blue);
}

CSS3过渡与动画

Sun, 27 Jan 2019 00:00:00 +0000

CSS3中出现很多新的特性，下面就讲一下其中比较好玩的3D操作，过渡和动画效果；

过渡(transition)

过渡就是使瞬间的样式变化，按照一定方式变得缓慢平缓；

例如鼠标划过超链接时颜色的变化，点击按钮后的颜色变化等，默认转化都是瞬间完成，可能你已经习惯了这种变换，但有时候平缓一些看着还是比较舒适的；

要实现样式的过渡变化，那么首先就学要有样式变换，例如鼠标划过，单击按钮，点击图片等操作，来实现颜色，尺寸，位置等样式的变化；

下面是鼠标划过段落使文本变红的操作，应用所有 transition属性：

p:hover {
    color: red;
}
p {
    transition-property: color;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

一共四个值，功能基本都是字面翻译的意思：

transition-property

执行过渡的属性，例子设置为颜色color的变化，也可以是width, font-size等，不设置的话默认是all，即所有属性；

transition-duration

过渡的时间，单位是秒，如1s, 2.3s，不设置的话默认 0s，即无过渡效果；

transition-timing-function

设置过渡时的变化方式，默认是 ease，即速度由慢到快再到慢，常用的还有 linear，线性变化速度均匀，还有其他几个方式，过渡时间短的话看不出什么区别；

transition-delay

延迟时间，即多少秒后执行过渡效果，默认 0s，不延迟；

当然这么多单词可能记不住，一般使用快捷写法：

p {
    transition: color 2s linear 0;
}
/*最少要指定过渡时间*/
p {
    transition: 2s;
}

也可以设置每个样式分别过渡，例如：

p {
    transition: color 2s linear,
                font-size .5s,
                background: 1s;
}

每个样式过渡之间用逗号隔开就行了；

最后，由于是新特性，为了兼容性需要加上浏览器厂商前缀：

p {
    transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
}

动画(animation)

CSS3的动画是个很不错的技术，基本能取代一些动图，javascript，flash等；

而动画里最重要的概念就是关键帧，也许你用PS做gif动图的时候看见过这个概念，所谓动画就是一帧一帧图片连续切换实现的效果，关键帧就是里面主要的一些帧；

实现CSS动画也需要设置关键帧 @keyframes：

@keyframes my-animation {
    0% {
        color: red;
    }
    50% {
        color: green;
    }
    100% {
        color: blue;
    }
}

格式如上，@keyframes后面跟的是自定义的动画名称，后面会用到。里面的0%，50%，100%便是设置的三个关键帧及其对应样式，如果只需要设置首尾两个关键帧，可以这样写：

@keyframes my-animation {
    from {
        color: green;
    }
    to {
        color: blue;
    }
}

效果：

当然样式除了color还能设置多项样式；

定义好关键帧后就直接在需要应用动画的元素标签内使用就行了，格式及所有属性如下：

p {
    animation-name: my-animation;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-play-state: running;
}

发现了吧，很多属性和transition里面一样，简单介绍下：

animation-name

就是之前跟在@keyframea后面的自定义名称，之前设置的是 my-animation;

animation-duration
animation-timing-function
animation-delay

和前面一样，默认分别为 0, ease, 0；

animation-iteration-count

动画播放的次数，默认 1，但一般设置为 infinite，即无限循环；

animation-direction

动画播放的方向，normal为默认，正向播放，reverse为反向播放，alternate为正向后反向，alternate-reverse为反向后正向；

animation-play-state

播放状态，默认 running，运行，paused为暂停，可以在javascript中使用对动画进行控制；

当然，这个属性比之前的transition还多，也有简便写法：

p {
    animation: my-animation 3s linear infinite alternate;
}

其中 animation-name 和 animation-duration为必须设置的属性；

同样，记得考虑浏览器兼容：

@-webkit-keyframes mycanimation {
    from {
        color: green;
    }
    to {
        color: blue;
    }
}
p {
    -webkit-animation: my-animation 3s linear infinite;
}
/* -moz-, -ms-, -o- 格式类似 */

CSS3之2D与3D变换

Sun, 27 Jan 2019 00:00:00 +0000

关于坐标轴

初中数学的几何学里我们便开始接触坐标轴，最基本的是平面直角坐标系XoY，然后延伸出空间直角坐标系XYZ，现在我们来说一下css中的坐标系；

css甚至一下设备相关的开发中，基本都遵循这样一套坐标系：以手机屏幕为例，坐标系圆点位于屏幕最左上角；x轴水平，向右为正方向；y轴垂直，向下为正方向；z轴垂直于整个屏幕平面，向外为正方向，就是屏幕光线射向你眼睛的方向；

如图：

2D变换

包括平移translate()，旋转rotate()，缩放scale()，倾斜skew()，矩阵matrix()；

translate(x,y)

平移操作，包括translateX(x), translateY(y)，括号内填平移参数值，可以是负值，即反方向；

例如：

div {
    /*元素向右平移50px，向下移60px*/
    transform: translateX(50px);
    transform: translateY(60px);
}
/*简写形式，效果相同*/
div {
    transform: translate(50px, 60px);
}

注意translate()只指定一个值则默认是x轴位移，即水平移动；

rotate(deg)

元素旋转，括号中参数为旋转角度，顺时针为正值，逆时针为负值，单位为deg，即多少度；

例如：

div {
    /* 顺时针旋转30° */
    transform: rotate(30deg);
}

scale(x,y)

缩放元素，参数分别为x轴，y轴缩放倍数，包括scaleX(x)和scaleY(y)，提供一个参数表示按比例缩放；

例如：

div {
    /* 横向缩小一半，纵向放大一倍 */
    transform: scale(.5, 2);
}

div {
    /* 按比例放大3倍 */
    transform: scale(3);
}

skew(xdeg,ydeg)

包含skewX(deg), skewY(deg)，表示在水平和垂直方向倾斜的角度；

例如：

div {
    transform: skewX(30deg);
    transform: skewY(45deg);
}
/* 简写 */
div {
    transform: skew(30deg, 45deg);
}

需要注意，如果元素为一个矩形，那么skewX(30deg)表示矩形顶边固定，底边向右倾斜30deg；skewY(30deg)表示矩形左边框固定，右边框向下倾斜30deg；

可以根据上面讲的屏幕坐标系来记忆，x轴位于屏幕顶部，方向向右；y轴位于屏幕左部，方向向下；

如果skew()只指定一个值，默认是水平倾斜；

skewX(30deg) 的效果：

skewY(30deg) 的效果：

matrix(a,b,c,d,e)

这是一个综合属性，之前的平移，缩放，旋转，倾斜都能通过这个矩阵函数实现，对，大学里线性代数中的矩阵 T_T；

其实这个函数就是前面四种操作的原理，函数共有六个参数，四种操作都对应不同的参数改变方式，像我们这种非数学专业的就不赘述原理了，前面的操作基本够用了(想寻找刺激就去百度“css matrix”吧)~~;

3D变换

所谓3D就是在前面2D平面上多了一个z轴，方法名也差不多，然后能以分别以三根轴位基准进行变换，实现立体效果；

看一下所有3D操作方法：

translate3d(x,y,z)

结合前面讲的空间坐标系和 x, y, z轴的位置，三个参数分别对应元素在三个坐标轴方向的平移值，也包含三个方法translateX(x), translateY(y), translateZ(z)；

举例：

div {
    transform: translateX(50px);
    transform: translateY(60px);
    transform: translateZ(70px);
}
/* 简写 */
div {
    transform: translate3d(50px, 60px, 70px);
}

注意： 关于设置 translateZ(z) 看不出效果的问题，后面说到设置persoective时会解释；

rotate3d(x,y,z,deg)

参数x, y, z为空间坐标系的一个坐标位置，然后由原点(0, 0, 0)指向这个点形成一个有方向的新轴，数学中称矢量，最后一个参数就是元素围绕刚才所形成的新轴旋转的度数；

也包括 rotateX(deg), rotateY(deg), rotateZ(deg)，之前2D的 rotate() 便是这里的 rotateZ()；

至于旋转的方向，判断方法类似于物理中的左手定则：角度指定为正的话，左手拇指与四指垂直，拇指指向元素围绕旋转的坐标轴或自定义轴，四指弯曲围绕方向就是旋转方向；

举例：

div {
    transform: rotateX(30deg);
    transform: rotateY(30deg);
    transform: rotataZ(30deg);
}
/* 自定义轴旋转 */
div {
    transform: rotate3d(10, 10, 10, 30deg);
}

rotateX(30deg) 的效果：

rotateY(30deg) 的效果：

关于为什么这里的旋转不是想象中的效果，而是缩小，主要是没有设置视点，后面会讲；

scale3d(x,y,z)

元素关于三个轴的缩放比例，包括scaleX(x), scaleY(y), scaleZ(z)，举例：

div {
    transform: scaleX(2);
    transform: scaleY(2);
    transform: scaleZ(2);
}
/* 简写 */
div {
    transform: scale3d(2, 2, 2);
}

需要注意这里的scaleZ()，正常情况下，扩大z轴会是物体变厚，但是css里面呈现的平面元素并没有厚度，所以这里的缩放z轴其实是缩放元素在z轴的坐标，所以要有效果必须要指定translateZ()的值；

举例：

body {
    perspective: 500;
}
div {
    /* 必须这个顺序，先缩放后平移，不然无效果 */
    transform: scaleZ(2) translateZ(100px);
}

按照上面样式才能看到scaleZ(2)的效果，因为后面在z轴上移动了100px，缩放比例为2，最终会移动200px，屏幕上则表现为元素放大了一下，这是透视效果，就是那个 perspective 值，下面会讲到；

matrix3d()

和前面2D的matrix()相似，只不过这里括号里的参数有16个，矩阵更加复杂，跳过吧﹋o﹋，有兴趣可以自行百度~~；

perspective

在上面的示例中，有关z轴的平移和缩放通常情况下是看不出效果的，正是缺少这项属性值，叫做透视，美术或设计中会出现这个词汇，就是实现物体近大远小的效果，远小最终会小到一个点，那就是 透视点，perspective就是用来设置那个点距离元素有多远，一般300~600很体现很好的透视效果，值越小元素透视变形越严重；

需要注意的是，这项属性设置在应用透视效果元素的父元素的样式中，才能看出效果，例如：

body {
    perspective: 500;
    /* 考虑浏览器兼容 */
    -webkit-perspective: 500;
}

也可以设置在元素本身，格式为：

div {
    transform: perspective(500);
    -webkit-transform: perspective(500);
}

rotateX(45deg) 的更真实的效果：

rotateY(45deg) 的效果：

perspective-origin

此项设置透视点的位置，默认在元素几何中心，需要设置的话，格式如下：

body {
    /* 默认中心 */
    perspective-origin: center center;
    /* 左上角 */
    perspective-origin: left top;
    /* 右边中心 */
    perspective-origin: right center;
    /* 底部中心 */
    perspective-origin: bottom center;
    /* 也可以是长度 */
    perspective-origin: 30px 40px;
    /*最后记得加 -webkit- 兼容 */
}

perspective-origin: left center 的效果：

perspective-origin: right center 的效果：

backface-visibility

翻译过来叫背面是否可见，可以设置visible和hidden，默认可见，比如元素正面有文字，设置背面可见，则关于y轴旋转180°后元素内文字变成镜像，否则不会出现；

backface-visibility: visible 的效果：

backface-visibility: hidden 的效果(有旋转，只是背面不可见，则看不见了)：

其他属性

transform-origin

设置2D/3D变化的基准，可以是长度值，也可以是 left, right, top, bottom，例如：

div {
    /* 关于元素左上角旋转 */
    transform-origin: left top;
    transform: rotate(30deg);
}

transform-style

设置元素如何在3D空间呈现被嵌套的元素，选择是 flat 和 preserve-3d，默认flat；

这里这么来理解，之前我们对一个元素执行变换时，都是以屏幕所在平面的坐标系在变换，但是元素如果存在子元素的话，transform-style就是用来确定在哪套坐标系上进行变换，flat表示任然以屏幕坐标系为基准，preserve-3d表示以变换后的父元素所在平面的坐标系为基准；

#parent {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: perspective(500) rotateY(45deg);
    -webkit-transform: perspective(500) rotateY(45deg);
}
#child {
    transform: perspective(500) rotateX(45deg);
    -webkit-transform: perspective(500) rotateX(45deg);
}

flat 的效果：

preserve-3d 的效果：

例如，父元素绕x轴旋转了45度，并且设置transform-style: preserve-3d，而嵌套的子元素只绕y轴旋转45度，那么最终效果就是子元素绕父元素平面的y轴旋转了45度，看起来就像先x轴转45度后y轴转45度的效果；

最后，别忘了为以上所有特性添加浏览器兼容前缀；

顺便附上一个以上功能综合效果的演示页面，请戳下面：

CSS 3D

CSS单位与尺寸参数

Sun, 27 Jan 2019 00:00:00 +0000

css单位

px

常用的单位，即像素pixel缩写，但通常被当做绝对单位，但严格说并不是，因为官方考虑到观看不同设备显示屏时，使网页设计出的某一图形的显示大小在人眼中的观看效果差不多，而定义的一个相对值，即人以一臂之遥观看96DPI的显示屏的角度，大概就是利用透视的近大远小原理，照顾不同设备的最终观看效果。

比如某网页图形设置为一固定的px值，在手机浏览器上显示是用直尺测大概1cm，但是同样在不缩放情况下，电脑显示屏测量可能就是1.5cm左右，如果是打印机打印出来的话也许就是2cm左右了。

em

常用的相对单位，前面的数字是比例，即相对于父元素的字体尺寸的比例，比如父元素字体16px，子元素设置1em，也可以理解为100%，那么子元素也是16px，同样，2em就是200%，32px，也可以是小数0.2em，1.5em等等。

rem

类似于em，但rem是相对于根元素html，例如用css标签选择器给html标签设置字体尺寸font-size大小为20px，那么文档中的每个1rem就代表20px，1.5em代表30px，以此类推。

in，cm，mm

这些虽然是生活中的物体测量单位，但网页的1cm尺寸的元素显示到显示器上，用直尺测量通常不是标准1cm，因为css已经默认设置1in=96px，前面也讲过px会因显示屏而不同，因此最终尺寸也不是绝对的，其他也差不多，所以这类尺寸很少用。

尺寸比较：

显示原理

dpi, ppi

dpi(dot per inch)，即每英寸多少点，是针对打印机的一个概念，点可以理解为墨点；

ppi(pixel per inch)，即每英寸多少像素，是针对显示器的概念，开发中一般关心显示器问题，所以一般认为dpi和ppi是同一个概念；

dpr

dpr(device pixel ratio)，即物理像素与独立像素的比例；

物理像素

物理像素也叫设备像素，屏幕显示图像都是由很多个像素点组成，屏幕出厂时本身带的点阵数就是它的物理像素；

独立像素

而独立像素，又叫逻辑像素，或者css像素，顾名思义，逻辑嘛，当然是独立于物理的概念，大小没有固定实际值，也是前面提到的css里面的1px；

逻辑像素可以通过js代码获取，screen.width获取逻辑像素宽度，screen.height是高度；至于dpr，可以通过devicePixelRatio这个全局属性获取，现在的新一些的安卓智能手机一般这个比例是3，电脑的一般是1，iphone、iPad一般是2；

注意，dpr为1，说明一个css像素块由1x1个物理像素块来显示，也就是一个物理像素，如果为2，则是一个css像素由2x2个物理像素来显示，也就是4个像素块，以此类推；这里也就能明白了，dpr的存在就是为了是小尺寸设备屏幕显示出高画质图形，细节更高就更清晰了；

现在来说设备像素的获取，并没有直接的获取方法，所以可以通过dpr乘以逻辑像素的方法获取；

综合举例：

var logicWidth = screen.width;
var logicHeight = screen.height;
var dpr = devicePixelRatio;
var deviceWidth = logicWidth * dpr;
var deviceHeight = logicHeight * dpr;
// 输出逻辑像素
console.log('逻辑像素：' + logicWidth + 'x' + logicHeight);
// 输出设备像素
console.log('物理像素：' + deviceWidth + 'x' + deviceHeight);

用CSS画一些多边形状

Sun, 27 Jan 2019 00:00:00 +0000

CSS是个很强大的网页开发工具，使生硬的网页变得丰富绚丽，css能实现很多效果，比如css3中的过渡与动画效果都很好看，最基本的就是画一个具有长宽的矩形，通过设置 border-radius 又能实现画圆形和椭圆形，但是其他多边形似乎没有直接能用的属性，比如三角形，五角星，六边形等等；

下面根据几何顺序依次来实现一下：

圆形

分析:

在长宽相等的正方形中使用 border-radius 属性，其值等于长或宽的一半；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width: 40px;
            height: 40px;
            background: red;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

椭圆形

分析

同样是 border-radius 属性，只不过其值有变化，使用 border-radius: 30px/20px，意思是原矩形宽度方向半径设为 30px，高度方向半径设为 20px，或者简写为 boder-radius: 50%，一个意思，宽度和高度方向的半径各位宽度和高度的一半；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width: 40px;
            height: 40px;
            background: red;
            border-radius: 30px / 20px;
            /* 或者这样
            border-radius: 50%;
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三边形

分析

没有直接能用的三角形的属性，可以利用CSS的盒子模型，就是下面这种，像 <p>, <h1>, <div> 这些标签都是一个“盒子”，标签内的文本是内容区，周围的彩色边界设置的是 border 值，当然还有边界与内容区中间的 padding 值，以及边界外的 margin 值；

内容

所以由图就能想到办法了，就是让某一条边界的宽度值直接等于盒子的宽度，并设置一个边界颜色，其他边界线设置不同的宽度值来调整三角形的斜度，并把边界线颜色设置为透明 transparent 即可；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width:30px;
            height:40px;
            border-left:20px solid transparent;
            border-right:20px solid transparent;
            border-bottom:40px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

矩形

最简单的形状，就不分析了；

梯形

分析

方法有些像三角形，只不过底部边界线宽度等于矩形高度，左右两边的边界线宽度小于矩形宽度值即可（感觉这两句话绕就比划着再读几遍 -_-）;

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        div {
            width: 60px;
            height: 40px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 40px solid red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

平行四边形

分析

看成一个倾斜过的矩形，所以可以使用 transform: skew() 属性，括号内是倾斜角度，比如30度就是 30deg，还有 transform 是CSS3中的一个新属性，所以需要加浏览器前缀进行兼容，例如：

div {
    transform: skew(30deg);
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -ms-transform: skew(30deg);
    -o-transform: skew(30deg);
}

另外脑洞够大可以发挥一下想象，平行四边形可以看成一个直角梯形与一个直角三角形的组合，或者一个矩形与两个直角三角形的组合；

直角梯形与直角三角形组合的代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            display: inline-block;
            width: 60px;
            height: 40px;
            border-left: 10px solid transparent;
            border-bottom: 40px solid red;
        }
        #div1 {
            display: inline-block;
            width: 10px;
            height: 40px;
            border-left: 10px solid red;
            border-bottom: 40px solid transparent;
        }
    </style>
</head>
<body>
    <div id="div0"></div><!--
    --><div id="div1"></div>
</body>
</html>

注意： 两个 <div> 标签之间如果有换行或者空格的话，最终两个块图形间会出现一条细缝，所以写的时候就要避免换行，或者像上面一样把换行注释掉；

五边形

分析

五边形可以看成上面的三角形与下面梯形的组合，当然数学好的可以计算一下尺寸就能画出一个正五边形了；

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            width: 50px;
            height: 10px;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 10px solid red;
        }
        #div1 {
            width: 50px;
            height: 40px;
            border-top: 40px solid red;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
    </style>
</head>
<body>
    <div id="div0"></div>
    <div id="div1"></div>
</body>
</html>

更多边的形状基本思路都一样，想着用三角形，矩形，梯形这些基本形象进行组合基本上都能实现，下面的形状就只放形状和源码了；

五角星

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            width: 40px;
            height: 60px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 60px solid red;
        }
        #div1 {
            height: 20px;  
        }
        #div2 {
            width: 60px;
            height: 18px;
            border-top: 25px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            margin-left: -30px;
        }
        #div3 {
            width: 40px;
            height: 15px;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 15px solid white;
            margin-left: -20px;
        }
    </style>
</head>
<body>
    <div id="div0">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

六边形

代码：

<html>
<head>
    <title>CSS</title>
    <style>
        #div0 {
            width: 60px;
            height: 30px;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 30px solid red;
        }
        #div1 {
            width: 60px;
            height: 30px;
            border-top: 30px solid red;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
        }
    </style>
</head>
<body>
    <div id="div0"></div>
    <div id="div1"></div>
</body>
</html>

当然网页上画像上面这种基本图形，或者跟复杂的几何图形，曲线图形等，多半用到canvas或者SVG这两个工具，功能很强大，可以自行了解；

Base64码简介

Sun, 27 Jan 2019 00:00:00 +0000

简介

base64是一个保存二进制数据的工具，将多种形式的二进制数据或其构成的文件以ASCII的形式保存，因为很多地方不支持直接的二进制文件保存或呈现，比如可以将图片直接转换成base64码嵌入HTML文档中，而避免使用网络http加载图片；

组成

A-Z a-z 0-9 + / 共64个字符(不信自己数一下);

转换

如果是图片直接转换成二进制文件，字符先转换成ASCII字符码，再转换成二进制；网上直接搜“base64转换工具”就会出来很多在线转换网站，上传图片或者输入文本，一键转换；
将上面的64个字符按上面顺序排列得到64个索引，索引从0开始，63结束；
因为 64 = 2^6，所以要使二进制包含64种不同情况，需要取6比特位，即000000这种，把之前文件转换得到的二进制数据按每6比特位取一次，然后得到一个6位二进制数再转换成相应十进制数，这个数就是索引，然后按照索引取相应的64字符中的某一个，最后把所有取得的字符连接就是base64码；
编码需要原文本总字节数(字符数)能被3整除(字节数除以3无余数)，因此取到最后的字符时如果凑不够，缺位全部用 0 补齐，最后的只要是全为0的6比特位，全部转换成字符 =，所以最多会出现2个 =；

使用

假设一个 .png 图片转换得到的base64码为 abcdefg，标准格式为：

data:image/png;base64,abcdefg

在浏览器地址栏输入以上字符串回车就能看见图片了，一般浏览器都支持解析base64码(里面的base64码换成自己的)；

或者用在html的 img 标签中：

<img alt="" src="data:image/png;base64,abcdefg" />

再或者用在markdown格式文本中：

![base64](data:image/png;base53,abcdefg)

可以把 data: 看成像 http: 一样的一种协议，下面是其他格式，根据格式应该就能猜到其用途：

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

效果

例如下面的星星图标：

其实它的base64码是这样的：

 iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAA
 AA2UlEQVR4AZWSAQZCQRCGv05QgXpQqCggukAgQeSpEwRE
 oO4Qqg5RoYA6T6GqIIACvKqMMdZK9C1r5t+dmbE7/E+SKj
 26nz3BV9IseTlrSQqPHGc9jIjUOlPAIeBiGdZszD4SYCyc
 MjXqjjdHifM0cUuMGAfzn8QRQnGGdAgpAlAipMNQgtsIfY
 nZkcUly070PsJAU18pg1LmquoAoWUdjEAZm9byG28AFSpA
 028cZioFTHkQMSGjysx/zBsnK3Li/tkvpHDI2wVb7MnjEb
 D6+cFGQkalZ6PyD2/u1Ikpara+FgAAAABJRU5ErkJggg==

为了显示方便所以进行了换行，理论上是很长的一行连续文本，中间不能有空格或者换行，这个图片仅有274字节(Byte)大，所以base64码还算短，几十上百K的图片就很长了，100K图片就有13万多个字符；

如果是文本的话，例如：

Hello World

以字符串 Hello 举例，后面类推，先将每个字符转换成ASCII码，再转换成二进制：

字符	H	e	l	l	o	空格
ASCII	72	101	108	108	111	32
二进制	01001000	01100101	01101100	01101100	01101111	01000000

以字符串 Hel 为例，将二进制转化成base64码：

字符	H								e								l
二进制	0	1	0	0	1	0	0	0	0	1	1	0	0	1	0	1	0	1	1	0	1	1	0	0
Base64补0	0	1	0	0	1	0	0	0	0	1	1	0	0	1	0	1	0	1	1	0	1	1	0	0
Base64结果	S						G						V						s

上面是不用补码的情况，即字符总数是3的倍数；下面是最后剩两个字符需要补码的情况：

字符	H								e
二进制	0	1	0	0	1	0	0	0	0	1	1	0	0	1	0	1
Base64补0	0	1	0	0	1	0	0	0	0	1	1	0	0	1	0	1	0	0	0	0	0	0	0	0
Base64结果	S						G						T						=

然后是最后只剩一个字符的例子：

字符	H
二进制	0	1	0	0	1	0	0	0
Base64补0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Base64结果	S						A						=						=

值得注意的是base64码 A 的二进制也是 000000，上面例子中 A 的二进制码是部分补全后全为0，只有6个0全是补全的时候才都转换为字符 =；

UTF-8, ASCII, unicode的介绍与区分

Sun, 27 Jan 2019 00:00:00 +0000

背景

人类能通过肉眼识别文字和字符，并能通过知识了解他们的含义，但是计算机内部不论存储还是控制，都是通过二进制码实现，因为二进制的 0, 1 刚好对应基础电路中的开和关，然后组合进行复杂的系统控制；

将人类识别的字符转换成计算机识别的二进制数据的过程，叫做编码，顾名思义，编程二进制数字码，如 0101101100011001这样的；相反，就叫做解码，把二进制码解释为字符；

ASCII

首先ASCII全称(American Standard Code for Information Interchange，美国信息交换标准代码)，是一个字符集，顾名思义，很多字符的集合；

像前面提到的，人类与计算机语言不通，一个识别字符，一个识别二进制，所以ASCII就充当了这样一个翻译官，其内容是编码与字符的映射，即一个字符只对应一个固定的编码，例如字符 A 的编码为 65，字符 a 的编码为 122；当然这个编码是十进制的，计算机内部把十进制转换成二进制就能供底层使用了；

另外需要知道的是，一字节(1 Byte)等于八比特位(8 bit)，8 bit就是这样的：01010101，八位二进制的所有不同表示一共 2^8 = 256 个，而且一般都是从 0 开始数，所以表示的十进制数的范围就是 0 - 255，这也是ASCII编码映射字符数的范围，包含大小写字母和一些其他常用的符号；

Unicode

看完上面肯定就会疑惑ASCII总共才表示256个字符，怎么处理当今世界巨大的信息量的，由于这个字符集最初是老外发明的，表示所有字母和一些字符对他们当时来说可能很足够了，但是先进计算机遍布全球大部分地方，汉语、韩语、日语、阿拉伯语等语言数不过来，所以ASCII明显不够用了；虽然中国之前也制定了是和中文的编码字符集叫 GB2313 等系列；

因此，便顺应时代需要产生了一种更庞大的字符集叫 Unicode，有时也叫万国码，顾名思义，几乎表示了世界上所有语言的字符，可以理解为 Unique code，独一无二的的编码；

目前Unicode的编码范围达到了21位，即 0x0000 - 0x10ffff 的范围，二进制为 1 0000 1111 1111 1111 1111，刚好21位；十进制表示为 1114111，就是一百万多个字符，已经相当多了；

如果要使用UNIcode，以在 HTML 中为例，假如知道一个字符的Unicode码是 0x0394,那么就在标签中添加代码：

&#x0394;

放在标签中就是：

<h5>这个Unicode码对应的字符是：&#x0394;</h5>

结果是这样：

这个Unicode码对应的字符是：Δ

其实那个Unicode编码就是对应的大小希腊字母德尔塔，数学或物理中经常用到的字符；

也可以用 JavaScript 来遍历一部分Unicode与字符的对应关系：

for (i = 0x0000; i <= 0x00ff; i++) {
    document.write(i + ': &#x' + i + ';<br>');
}

页面就会出现前256个字符及其Unicode码；

UTF-8, UTF-16, UTF-32

首先UTF全称(Unicode Transformation Format)，所以它是一种针对前面提到的Unicode的编码格式，常见的格式就是 UTF-8，还有 UTF-16, UTF-32；

UTF-8 其中的 8 表示的是 8 bit，即Unicode中每8位表示一个字符，UTF-16 和 UTF-32 类似，因为Unicode最多才21位，32位大于21位，所以 UTF-32 的格式就可以表示所有字符对应的Unicode码了，但是呢，32位也就是4字节，让每个字符都占用4字节太费空间了，所以出现了UTF-8和UTF-16;

UTF-8 定义 0 - 7 bit 的 Unicode 用一字节表示，这里就与ASCII一样了，8 - 11 bit 用两字节表示，12 - 16 bit 用三字节表示，17 - 21 bit 用四字节表示;

UTF-8 编码规则如下：

Unicode	bit	UTF-8	byte
0x0000 - 0x007f	0 - 7	0XXX XXXX	1
0x0080 - 0x07ff	8 - 11	110X XXXX 10XX XXXX	2
0x0800 - 0xffff	12 - 16	1110 XXXX 10XX XXXX 10XX XXXX	3
0x1 0000 - 0x1f ffff	17 - 21	1111 0XXX 10XX XXXX 10XX XXXX 10XX XXXX	4

规律是：

每个字节中不足8位的，高位(左边)先用0补上，比如 0XXXX XXXX；
超过两字节表示的UTF-8，第一个字节高位添加两个 1 和一个 0，后面的字节高位添加 10；
三、四字节同理，几个字节高位就添几个 1 再加上一个 0，其余字节高位添 10；

可以看出 UTF-8 这种针对不同位数使用不同字节数编码的方式有效的利用了空间，避免了一些浪费，当然，事物都有利弊，空间降下去，时间也就升上去了；

电脑固态硬盘接口辨析

Sat, 08 Dec 2018 00:00:00 +0000

固态硬盘相比传统机械硬盘读写速度快许多，固态硬盘目前分为M.2接口与SATA接口。

SATA接口

SATA（Serial ATA，Serial Advanced Technology Attachment，串行高级技术附件），一种硬盘接口规范。

SATA3是目前大多数笔记本使用的接口规范版本，尺寸比msata大一些，有个硬壳盒包装；

如下图，就是笔记本上取下的固态：

PCI-E(PCI Express)新一代总线接口，取代PCI总线接口，称为第三代I/O总线技术，提高了带宽，PCI Express的接口根据总线位宽不同而有所差异，包括x1、x4、x8以及x16(x2)模式将用于内部接口而非插槽模式。

PCI-E传输速度大于SATA。

M.2接口

M.2是intel推出替代mSATA(mini-SATA，小尺寸SATA规范接口，多应用于笔记本固态硬盘接口)的新接口规范，尺寸更小，传输性能更高，为满足超级本用户而推出；

M.2接口有两种类型：Socket 2（ngff）和Socket 3（nvme），Socket2支持SATA、PCI-E X2接口，PCI-E ×2接口标准，最大的读取速度可以达到700MB/s，写入达到550MB/s。Socket 3可支持PCI-E ×4接口，理论带宽达4GB/s。

NVME(Non-Volatile Memory express，非易失性内存主机控制器接口规范)，充分利用PCIE通道的低延时和并行性，降低AHCI的高延时和提高SATA的性能；

NVME缺口靠右边，使用一缺固态;

NGFF缺口靠左边，使用两缺m.2固态;

购买更换时需要注意主板插槽上缺口靠哪边，一般安装是固态条元器件面朝上。

并且，不要把它和内存条搞混，区别在于接口位置。

搭建个人论坛网站图文教程

Sun, 25 Nov 2018 00:00:00 +0000

关于建站

前面的文章介绍过如何使用Github Pages提供的仓库服务搭建Jekyll个人博客，链接在这 https://knightyun.github.io/2018/04/01/github-pages-blog，现在来了解一下如何一步步搭建自己的论坛网站。

搭建个人论坛网站，也相当于建站的一种，通常的套路便是域名+主机空间+网页源码程序，网页文件上传到虚拟空间，一般这些空间都安装有网站所需环境，如PHP和数据库等，然后把域名和主机空间绑定，这样就能在浏览器中输入域名（网址）访问所建网页，不然理论上只能通过虚拟主机的IP访问，但是通常有IP访问限制不允许你这么做。

域名和主机空间可以在各大网站市场购买，通常是按年或按月付费，如阿里云和华为云。这里说一个需要注意的东西，产品列表中的虚拟空间、虚拟主机这类产品，指的是云服务器分配出的一部分磁盘空间，也叫网站空间，即只能通过服务商提供的控制面板进行访问控制，上传或者下载网页文件；而云服务器、云主机这类名称指的是有独立操作系统的服务器，可理解为一台可远程桌面控制访问的-云电脑。当然他们也能通过价格区分，一般情况，域名几十块每年，空间几百每年，主机几千每年，更高级的企业级服务就更贵了-_-。

关于论坛

能力强大的大佬可以自己编写网页和程序文件上传到主机空间，普通选手一般选择使用一些开源的网站源码，网上能找到很多，懂一些网页基础的也可以后期修改一些内部样式效果。

这里我们使用Discuz提供的论坛建设服务，相当于让你下载一份网站源码压缩包，解压后上传到自己的网页空间，然后安装他们的程序。先看一下其官网的简介：

他们提供的服务还是不错的，这个源码也是免费下载的，当然也有其他付费服务可以自行了解，下面是他们提供服务的企业，看样子还是很厉害的：

开始安装

首先到其官网下载页面，然后选择下载的版本，我们这里选择简体UTF-8，点击下载等待完成：

也可以到其官方论坛了解，版本更新就在这里发布，我们去其官方gitee，点击下载页面下载：

如图所示下载zip压缩文件即可。由于作者使用最上面那个下载页面的压缩文件测试不成功，因此使用这个下载页面的压缩包。

解压后进入upload文件夹，其他都是一些说明性文档，可以自行了解一下：

然后把upload目录下的所有文件复制到自己购买的空间的网页根目录下，一般是wwwroot这类名字，可以在里面新建一个文件夹例如discuz，然后拷贝到这个文件目录里面，这样就不妨碍以后用虚拟空间制作其他网页。

其主要文件大概就这些，我这里用自己的虚拟机建设的网站做演示，大家就上传到自己虚拟空间目录下，然后在自己电脑浏览器输入绑定的域名进行访问，关于如何绑定域名，很简单并且网上教程很多，自行了解。我自己电脑作为服务器因此网址如图所示，如果域名为test.com，并且上面提到的所有文件保存在discuz·里面，那么访问网址就输入test.com/discuz/`，然后进入安装页面：

然后点同意，下一步，进入如下页面，选择全新安装：

设置数据库，数据库名，用户名，密码，一般买虚拟空间有送一个数据库，没有的话就单独买一个数据库服务器，把地址改一下就行了，邮箱填常用的，用于发送错误报告：

等待页面安装完成，就能点击访问了：

那些推荐应用可以暂时不管，以后还能安装，直接点击右下方访问，看看效果：

右上方是用户注册和登录的地方，管理员就用刚才安装页面设置那个账号和密码，就是admin那个。点击右上方模块管理，管理中心就可以进入后台管理一个内容和功能了，会再次验证密码，还是刚才那个。

整个系统比较庞大，功能模块也相当多，有时间多多摸索一下就能熟练管理了。

JavaScript逻辑运算符“&&”和“||”短路原则的应用

Fri, 01 Jun 2018 00:00:00 +0000

逻辑运算符

在Javascript中，有逻辑运算符 与 &&, 或 ||, 非 !，常在条件句或循环中进行逻辑判断。

例如：

var a = 1, b = 1, c = 2;
if (a = b && (b = c || a != c)) 
{
	alert("true");
} else 
{
	alert("false");
}

括号中表达式值为真，最后提示“true”。

短路原则

在逻辑运算中，这是一个通用的原则，这是由于表达式从左到右执行的特性，为了减少运算量而给运算器规定的操作。主要针对 && 和 || 两种运算。

&& 的判断是同真为真，一假为假，则运算如果左边的表达式值为 false，那么就不会再执行右边的表达式了，如果左表达式为 true，就会继续执行右表达式；
|| 的判断是一真为真，同假为假，则运算如果坐表达式值为 true，那么就不用执行右边的表达式了，如果左表达式为 false，就会继续执行右表达式；

举例说明：

(1 == 1) && alert("msg1");
(1 != 1) && alert("msg2");
(1 == 1) || alert("msg3");
(1 != 1) || alert("msg4");

结果是提示“msg1”和“msg4”。原理如上述。

因此，如果有以下表达式：

var a = 9;
if (a > 0) 
{
	alert("true");
} else 
{
	alert("false");
}

也许你会使用三目运算简化成这样：

var a = 9;
(a > 0) ? alert("true") : alert("false");

其实也可以这样写：

var a = 9;
(a > 0) && alert("true");
(a > 0) || alert("false");

Javascript中的应用

在javascript中，只有对象(Object)和布尔值true为真，其它例如 undefined, NaN, false 等，值为 false。为被定义的对象或未赋值变量也是 false，因为其值都是 undefined，这里就可以应用于检查某变量是否已定义。

举例说明：

var a = 1;
var o = new Object();
var b;
a && alert("defined");       //已定义a，提示“defined”
o && alert("defined");       //已定义对象o，提示“defined”
Object && alert("defined");  //Object是一个已知的全局对象，提示“defined”
b || alert("not defined");   //b未赋值，提示“not defined”
p || alert("not defined");   //未定义p，提示“not defined”

除了这个也能衍生出其它相同原理的应用，类似于判断赋值 var a = (b > 0) && '9' 或判断定义变量 var abc = abc || "" 等。

js中使用这种方法可以减少代码量，提示性能，但同时也降低了代码可读性，比如个人觉得还是看以下代码比较舒适：

var a = 1;
if (a > 1)
{
	alert("true");
}

方法的选择就要视情况而权衡了。

jQuery初识之安装与语法简介

Fri, 01 Jun 2018 00:00:00 +0000

概念

jQuery是一个JavaScript函数库，是一个比较流行的js框架，功能就是简化 js 代码的书写，因为一些功能用原生javascript书写代码量是很大的。可以理解为javascript query，毕竟Query也是它的一个功能。

安装

要使用jQuery库，可以从网上下载得到jQuery的 .js 文件，也可以使用CDN (Content Delivery Content 内容分发网络)加载jQuery。

下载

需要去jQuery官网：jquery.com 下载需要的jQuery库，一般有两个版本，production 表示已被压缩精简的版本，用于放到实际网站中，development 表示测试开发版，用于编写和开发，是可读的代码。

例如目前最新的版本是 jquery-3.3.1.js，压缩版后缀是 .min.js，开发版文件有一万多行，就是正常格式的JavaScript源代码，包含一些注释，文件大小为 266k；压缩版就是去掉里面不必要的空格，回车与注释，所以最后文件实际内容只有一行！，文件大小为 85k，压缩了近三倍，这也是网页都使用压缩版，提升网页性能的原因。

下载好后放到网页文件夹中，然后使用 <script> 标签引用，例如：

<script scr="/js/jquery-3.3.1.min.js"></script>

路径中填写 .js 文件的实际存放位置。

CDN

使用CDN（内容分发网络）就可以不用下载jQuery文件，优点是可以使用这个机制尽量避开网络中一些影响数据传输的路线，提高访问速度和稳定性。原理就是使用在各处配置的节点服务器，让用户就近获取所需内容。

常见CDN有很多，例如百度、新浪、谷歌、微软等，如果是国内站点的话，建议使用国内CDN，国外站点可以使用谷歌或微软，提高速度。

以百度CDN为例，安装方法如下：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

微软CDN：

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>

微软jQuery历史版本可以从这里查看https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0。

更多内容可以访问百度静态资源公共库(http://cdn.code.baidu.com/)，其他CDN可以自行百度搜索。

语法

jQuery的基础语法是通过选取（query）文档中的元素，对其进行操作（action），语法是：

$(selector).action()

选择器

selector 是选择器，类似于CSS选择器，常见的有：

元素选择器，如： $("p")
ID选择器，如：$("#myId")
类选择器，如：$(".myClass")
属性选择器，如：$("[href]")

操作

action() 是对所选元素执行的操作，例如：

隐藏元素：.hide()
单击事件：.click(myFunction())
双击：.dblclick()
悬停：.hover()

其他语法与JavaScript类似，代码写在 <script> 中，例如隐藏 p 元素：

<script>
	$("p").hide();
</script>

有时需要等文档加载完毕后执行代码，很像JavaScript中的 window.onload：

window.onload = function(){
	alert();
}

jQuery中就要这么写：

$(document).ready(function(){
	$("p").hide();
});

简化写法：

$(function(){
	$("p").hide();
});

结果都是在整个文档加载完后执行语句。

方法链接

相对于JavaScript，jQuery又一种特殊的操作方法叫做方法链接（chaining），即在一条语句上，对一个元素执行多个操作，语法是： $(selector).action1().action2().action3()

例如：

$("p").html("<b>Hello</b>").click(function(){
	alert("Hello world");
});

结果就是改变元素文本内容后绑定点击事件的调用函数，操作可以绑定多个，并且是依次执行，方法类似，其他操作以此类推。

addEventListener方法与on事件的区别

Thu, 31 May 2018 00:00:00 +0000

on事件

Javascript中可以对一些页面的事件设定触发值，例如常用的点击 onclick，鼠标移动 onmousemove，或者移动端屏幕点击 ontouchstart，其它类似的还有 onmousedown, onmouseup, onchange, onfocus, onmouseenter, ontouchmove, ontouchend 等等，可以对其设定值来实现事件触发后执行的操作，例如：

<h1 onclick="alert('hello');">Click me</h1>

点击后就会弹出提示框，也可以这样写：

<h1 onclick=(function(){alert("hello");})()>Click me</h1>

这样也能实现同样效果，只是它的值变成了一个匿名函数。

addEventListener()方法

这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：

addEventListener(event, function, useCapture)

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是**捕获，true表示捕获，默认的false表示冒泡。

移除事件监听

如果要移除 addEventListener() 添加的事件监听，就要使用removeEventListener()，语法是：

removeEventListener(event, function)

参数与addEventListener()一致。

兼容性

IE 8及更早的版本，和Opera 7.0及更早的版本，不支持 addEventListener() 和 removeEventListener() 方法，他们使用的是一下方法代替：

添加事件： attachEvent(event, function)

移除事件： detachEvent(event, function)

可以用以下方法解决兼容性问题：

<div id="div1">Click me</div>
<script>
	var div1 = document.getElementById("div1");
	if (div1.addEventListener) {
		div1.addEventListener('click', function(){
			this.innerHTML = "your browser is compatible with addEventListener!";
		});
	} else if (div1.attachEvent) {
		div1.attachEvent('click', function(){
			this.innerHTML = "your browser is not compatible with addEventListener!"
		});
	}
</script>

冒泡与捕获

这个参数设置的是元素事件的触发顺序，即页面中某元素设置了事件监听，其内部元素也设置有事件监听，冒泡是先触发最内部元素的事件，再依次触发外一层元素的事件，捕获刚好相反，由外到内依次触发。

综合举例：

<div id="parent1">
	<div id="child1" style="height:200px;background:#0cc">
	冒泡
	</div>
</div>
<div id="parent2">
	<div id="child2" style="height:200px;background:#0cc">
	捕获
	</div>
</div>

<script>
	var parent1 = document.getElementById("parent1");
	var child2 = document.getElementById("child1");
	var parent2 = document.getElementById("parent2");
	var child2 = document.getElementById("child2");
	parent1.addEventListener('click', function(){
		alert("this is parent element");
	});
	child1.addEventListener('click', function(){
		alert("this is child element");
	});
	parent2.addEventListener('click', function(){
		alert("this is parent element");
	}, true);
	child2.addEventListener('click', function(){
		alert("this is child element");
	}, true);
</script>

点击“冒泡”模块，先提示子元素后提示父元素；点击“捕获”模块，由于同时设置为 true，先提示父元素后提示子元素。

区别

为某元素设定事件触发函数时，可能会觉得addEventListener和on事件的功能差不多，但是，addEventListener除了可以设置元素触发顺序外，还能多次绑定事件，因为 on 事件多次绑定的话会出现覆盖。

举例说明：

<div id="div1" style="height:200px;background:#0cc">
Click me
</div>

<script>
	var dib1 = document.getElementById("div1");
	div1.addEventListener('click', function(){
		alert("message1");
	});
	div1.addEventListener('click', function(){
		alert("message2");
	});
</script>

结果会依次提示“message1”，“message2“。

但是js这么写的话：

div1.onclick = function(){
	alert("message1");
};
div1.onclick = function(){
	alert("message2");
}

这里就只会提示最后一个“message2”，因为onclick作为对象div1的一个属性，第二次对其进行赋值就会覆盖之前的函数值，这样on事件在某些场合就不适用了。

JavaScript闭包详解

Thu, 31 May 2018 00:00:00 +0000

变量作用域

首先来了解一下Javascript中变量的作用域，除了常见的普通变量外，对象和函数也是一种变量。变量分为局部变量和全局变量。

局部变量

局部变量就是指在函数内部定义的变量，作用域是函数内部网，此变量通常只能在函数内部访问，和外界是区分开的，所以变量名即使和外部的重复，也是两个独立的变量，不会相互影响。局部变量在函数执行是创建，执行完后销毁。

全局变量

全局变量就是函数外部定义的变量，作用域是网页中的所有脚本和函数，它们都能够访问，全局变量是页面加载时创建，页面关闭后销毁。

综合举例：

var a = 0;
function fun1() {
	var a = 1;
	b = 2;
}

这里的 var a = 0; 就是全局变量，var a = 1; 是局部变量，虽然名字重复，但这里是两个独立变量，但是还是不建议出现重复，提高代码可读性；b = 2; 也是全局变量，因为规定函数内部申明的变量，如果不加 var，即会被认为是全局变量，尤其这点需要小心。

闭包

先通俗的总结一下，闭包就是一个可以访问其他函数内部变量的函数，即一个定义在函数内部的函数，也叫内嵌函数。

其次，是闭包的作用，因为通常情况函数内部变量是无法在外部访问的，即全局变量也局部变量的区别，而闭包，就实现了能在外部访问某函数内部变量的功能，让这些变量值始终保存在内存中。

然后，来讲一下如何实现闭包。有以下代码：

function fun1() {
	var a = 1;           //定义一个局部变量
	function fun2() {    //这里的 fun2() 就是闭包
		alert(a);    //fun2() 是 fun1()的子函数，所以能访问之前定义的局部变量，这个是关键
	}
	return fun2;         //然后通过这里，把之前得到的局部变量成功返回到外部去
}
fun1();                      //正常执行函数
var result = fun1();         //将内部变量传递出去，传给变量 result
result();                    //执行这个函数实现对局部变量的访问

当然形式不止这一种，万变不离其宗，最后实现的功能是一样的，例如下面的方法也是可行的：

function fun1() {
	var a = 1;
	return function(){
		alert(a);
	};
}
fun1();
var result = fun1();
result();

注意

也许在很多文章中都能看到这句话“避免滥用闭包”，的确，由于闭包会使一些变量一直保存在内存中，所以如果大量使用的话就会消耗大量内存，影响网页性能。

同时，由于闭包的特性，还会在外部改变函数的内部变量值，有时候这是很危险的，举个例子：

function fun1() {
	var a = 1;
	function fun2() {
		a++;
	}
	alert(a);
	return fun2;
}
fun1();                   //函数正常执行，输出 1
var change = fun1();
change();                 //在外部执行这个函数后，函数内部变量 a 的值就被改变了，输出 2

JavaScript计时器函数用法

Thu, 24 May 2018 00:00:00 +0000

Javascript中和大多数语言一样，存在计时函数，使某语句或函数不用立即执行，可以延时设定的时间值之后再执行。

setTimeout() 方法

这个函数表示括号中的代码，延时指定时间后再执行，格式为 setTimeout("function()", time)，其中 time 的单位是毫秒。

例如：

function fx()
{
	alert();
}
setTimeout("fx()", 2000);

也可以写成：

setTimoeout(function(){
	alert();
}, 2000);

结果就是页面加载完 2 秒后弹出提示框。

clearTimeout() 方法

clearTimeout() 方法用于结束 setTimeout() 方法的执行，括号中参数为 setTimeout() 返回的 ID 值。

举例说明：

var int1 = setTimeout(function(){alert();}, 5000);
clearTimeout(int1);

这样就能终止代码执行，不会弹出提示框。

setInterval() 方法

这个函数表示每隔指定时间间隔执行一次括号中的代码，格式为：setInterval("function()", time)， time 单位依然为毫秒。

例如：

function fx()
{
	document.write("0");
}
setInterval("fx()", 2000);

这里就不要用 alert() 做实验了，后果你懂的 -_- .

同样也能写成：

setInterval(function(){
	document.write("0");
}, 1000);

效果就是不断输出字符“0”。

clearInterval() 方法

用法与 clearTimeout() 一样，终止 setInterval() 的执行，括号中填 setInterval() 的返回值。

例如：

var int2 = setInterval(function()[
	document.write("0");
}, 1000);
clearInterval(int2);

这样就能终止输出。

注意

有个小问题，用 setTimeout() 举例，假如代码像下面这样写：

function fx()
{
	alert();
}
setTimeout(fx(), 3000);

相比上面，就是函数第一个参数少了双引号，猜一下后果会怎样……

后果当然是页面加载后立刻弹出提示框，并不会延时 3 秒。下面的写法也是类似的效果：

setTimeout((function(){
	alert();
})(), 3000);

原因都一样，无论是语句块 fx() 还是匿名函数 (function(){})()，都是会立刻执行的语句，而加双引号的 "fx()" 和 function(){} 就是当成一个参数传递给了函数 setTimeout()，然后这个参数语句直到 setTimeou() 真正执行时才生效，也就是延时3秒后执行。

函数 setInterval() 的这个性质与 setTimeout() 类似。

JavaScript中语句与函数的执行辨析

Wed, 23 May 2018 00:00:00 +0000

Javascript代码中，语句和函数以及匿名函数的执行存在一些区别，所以在编写过程中也存在一些“坑“。

script 中的语句

html文档中的javascript语句是写在 <script></script> 中的，每条语句末尾需要添加分号 ;，表示此条语句执行结束。例如下面的代码：

<script>
	var x = 9;
	alert(x);
</script>

文档加载到这块代码区域时，就会立刻执行这两条语句，即弹出提示框为x的值，但是如果把语句换成函数定义，代码如下：

<script>
	var x = 9;
	function fx()
	{
		alert(x);
	}
	fx();
</script>

这时第一行语句会被执行，第二至五行是函数定义，并不会执行这个函数，直到最后一行语句才会真正执行这个定义过的函数。

如果需要立刻执行函数的话，就需要使用匿名函数了。所谓匿名函数，顾名思义，即不会给这个执行的函数定义“函数名”，而且是一个立即执行的语句。格式如下：

<script>
	var x = 9;
	(function(){
		alert(x);
	})();
</script>

注意代码中的三个括号的位置，以及最后跟的那个分号，表示这是一个立即执行的语句。

当然匿名函数也能传递参数，例如：

<script>
	(function(var x){
		alert(x);
	})(9);
</script>

效果和上面一样。

但有时又需要不立即执行的函数，例如：

<script>
	setTimeout(function(){
		var x = 9;
		alert(x);
	}, 2000);
</script>

效果与下面代码一样：

<script>
	var x = 9;
	setTimeout("alert(x)", 2000);
</script>

这是Javascript中的延时函数，表示2秒后弹出提示。setTimeout() 自身就是一个函数，里面的 “alert(x)” 是这个函数的一个参数，即一个加引号的语句。便于理解，可以写成这样：

setTimeout("alert();", 2000);

这样写并不会出错。

所以这个函数 setTimeout() 的参数是一个不用立即执行的匿名函数 function(){}，也可以是一个语句块，从而进行参数传递。

通俗讲，这里加引号的语句块相当于不加引号的匿名函数。

标签属性中的语句

在 html 标签中也能使用语句，通常用于设置元素的属性。

先对比区分以下代码：

<script>
	function fx()
	{
		alert();
	}
</script>

<button onclick="alert()">Button1</button>

<button onclick="fx()">Button2</button>

<button onclick=fx()>Button3</button>

<button onclick=(function(){alert();})()>Button4</button>

<button onclick="(function(){alert();})()">Button5</button>

<button onclick=function(){alert();}>Button6</button>

<button onclick="function(){alert();}">Button7</button>

猜一下哪个按钮点击无效……

答案是最后的“Button6”和“Button7”，然后就能发现规律了，属性所设置的值必须是能立即执行的语句块、函数或匿名函数，最后那两种情况是行不通的。

web浏览器进化简史

Tue, 22 May 2018 00:00:00 +0000

发展史与时间线

1989年，科学家Tim-Berners-Lee发明了World Wide Web（万维网）。
1990年，他开发了世界上第一款网页浏览器，为避免与万维网混淆，改名为NEXUS，但不支持图片。
1993年，伊利诺大学的NCSA组织创造了第一款可显示图片的浏览器，Mosaic（马赛克）
1994年10月在麻省理工学院计算机科学实验室成立万维网联盟。建立者正是万维网的发明者蒂姆·伯纳斯·李。万维网联盟(World Wide Web Consortium，简称W3C)。
1994年，Mozilla出现了。不过，鉴于当时 Mosaic 的权势。为了避嫌，最终改名成了Netscape Navigator（网景公司开发的网络浏览器）。凭借着html框架显示等新特性，很快成为了新的霸主。
1995年微软发布了跟系统“捆绑”的浏览器Internet Explorer（IE），凭借着操作系统的占有率，IE就把Netscape挤下了霸主宝座。
和 IE 差不多时间诞生，还有一直不温不火的 Opera。
NetScape并未放弃，围绕着浏览器引擎衍生出了人们熟知 Firefox。
2003年，苹果推出的 Safari。
2008年 Google 携 Chrome 参战，让 IE 逐渐失利。
2015年，微软为了改变局面，推出了 Edge。
但 Chrome 以及类似内核的浏览器依旧是主流。

CSS样式之内容居中方法

Tue, 22 May 2018 00:00:00 +0000

水平居中

HTML中要实现某一内容水平居中显示，要通过设置css样式来实现，主要分为行内元素和块状元素两种情况，块状元素又可分为块状定宽与块状不定宽两种情况，接下来依次介绍分析。

行内元素

像 a、span、i 这类元素叫做行内元素，文本和图片也是行内元素。行内元素水平居中方法简单，只需要给行内元素的父元素设置 text-align: center; css样式就内实现内容水平居中，例如： html:

<div class = "txt">居中内容</div>

css:

.txt {
	text-align: center;
}

文本内容的父元素就是 div ，这样就内实现水平居中，效果如下：

居中内容

块状定宽元素

常见块状元素有 div, p, h 等，定宽即为其设置固定宽度值 width，这时我们可以为元素设置 margin-left 和 margin-right 来实现水平居中，也可以简写为 margin: 0 auto;，例如： html:

<div class = "txt">居中内容</div>

css:

.txt {
	width: 100px;
	margin: 10px auto;
}

实现效果如下：

居中内容

块状不定宽

有时候我们不能限制块状元素的宽度，就是块状不定宽元素，主要有三种方法，接下来一次介绍。

1、加入 table 标签

利用 table 标签的长度自适应性，长度根据内容自动调整，然后通过设置 margin: auto; 实现水平居中，例如： html:

<table>
	<tbody>
		<tr>
			<td>
			<div class = "txt">居中内容</div>
			</td>
		</tr>
	</tbody>
</table>

css:

.txt {
	margin: auto;
}

效果如下：

居中内容

2、设置为行内元素

就是通过设置 display: inline; 将块状元素设置为行内元素，然后就是像行内元素一样设置 text-align: center; 来是内容水平居中，例如： html:

<div class = "txt">居中内容</div>

css:

.txt {
	display: inline;
	text-align: center;
}

效果为：

居中内容

注：

使用这种方法虽然可以不用像table增加无语义标签，但是改变了display，所以会少了一些功能，例如不能设置宽度。

3、设置浮动和相对定位

这种方法设置就相对复杂，同时设置浮动和相对定位来实现元素的水平居中。首先设置父元素：

float: left; 
position: relative; 
left: 50%;

然后设置子元素：

position: relative;
left: -50%;

通过代码应该好理解，就是通过50%那个关键位置来实现水平居中效果，因为50%是界面的中央位置，将父元素右移，直到左边框移到中线位置，在将子元素向左移，这样子元素不就居中了吗。

这里要注意的是分别设置父元素的 50% 和子元素的 -50%。实现效果如下：

居中内容

垂直居中

说完水平居中接着说垂直居中，这里主要又分为两种情况：父元素高度确定的单行文本 和父元素高度确定的多行文本。

单行文本

对于父元素高度确定的单行文本，可以通过设置父元素的 height 和 line-height 高度一致来实现。

这里可以这样理解，height 是元素的高度，例如文本字体的高度，line-height 是行高，例如文本的行间距，一行文本中，行间距被分为两部分，分别位于这行文本的顶部和底部（因为行间距是两行之间的距离），所以设置 height 和 line-height 一样大的话，line-height 就被均分为两部分，分别位于元素顶部和底部，这样中间设置为 height 的元素不就实现垂直居中了吗 ^_^ .

例如： html:

<div class = "txt">居中内容</div>

css:

.txt {
	height: 200px;
	line-height: 200px;
}

效果如下：




居中内容

这里需要注意的是关键词“单行文本”，如果使用这种方法但是一行文本超过宽度限制的话，某些内容就会脱离元素块，子元素有多行的话，这几行就会并排居中，并保持设置的行高。

多行文本

对于父元素高度确定的文本和图片等内容设置垂直居中，主要有两种方法。

1、使用 table 标签

对元素使用table标签，包括 tbody，tr，td，然后对父元素设置 vertical-align: middle; 样式，就能使 inline-block 类型的子元素垂直居中显示。

因为 td 标签默认设置了 vertical-align: middle，所以也可以不用单独设置 vertical-align。例如： html:

<table>
	<tbody>
		<tr>
			<td class="txt">
				<p>居中内容</p>
				<p>居中内容</p>
				<p>居中内容</p>
			</td>
		</tr>
	</tbody>
</table>

css:

.txt {
        height: 300px;
	background-color: #ccc;
}

这里的父元素就是 td，父元素的高度必须确定，就要为其设置 height。

注意这里的 p 元素是 inline 类型的，所以设置 vertical-align: middle 的话会出现错误，若果是图片元素 img 的话，就可以设置 vertical-align: middle，但是由于 td 标签默认，所以都可以不写。

效果如下：




居中内容

2、设置 table-cell

第二种方法是把要垂直居中显示的元素的父元素设置为table-cell (表格单元)类型：display: table-cell;，然后设置 vertical-align: middle就能实现元素垂直居中。

但是这个方法存在兼容性问题，chrome, firefox, IE8以上才支持这个操作。

例如： html:

<div class="txt">
	<p>居中内容</p>
	<p>居中内容</p>
	<p>居中内容</p>
</div>

css:

.txt {
        height: 300px;
	background-color: #ccc;
	display: table-cell;
	vertical-align: middle;
}

同样，要为父元素 div 设置高度 height

效果如下：




居中内容

这种方法除了兼容性问题外，同时也改变了 display类型，会在某些方面带来不便。

css布局模型详细介绍

Fri, 04 May 2018 00:00:00 +0000

HTML中元素有三种布局模型：流动模型、浮动模型、层模型。

流动模型（flow）

HTML网页默认布局就是流动模型，布局如下：

块级元素(block)自上而下垂直分布，因为块级元素默认宽度为浏览器窗口的100%，或者理解为每个块级元素默认占一行。常见块级元素有 div, p, h 等；

内联元素(inline)从左到右水平分布，即不像块级元素那样每个独占一行。常见内联元素有 a, span, em 等。

浮动模型（float）

上面提到的块级元素是每个独占一行显示，但是定义css浮动模型后就能使两个块级元素并排一行显示。例如HTML代码：

<div id = "div1">
	<p>Hello</p>
</div>
<div id = "div2">
	<p>World !</p>
</div>

显示结果是这样：

Hello
World !

但是设置浮动css后：

div {
float: left;
}

效果就是这样：

HelloWorld !

也可以设置元素一左一右显示：

#div1 {
float: left;
}

#div2 {
float: right;
}

层模型（layer）（position）

类似于PS中的图层编辑，HTML中也存在层模型布局，对元素进行定位。层模型有三种：绝对定位(absolute)、相对定位(relative)、固定定位(fixed)。

绝对定位

理解就是字面上的意思，简言之就是相对于上级设置了 position 属性的元素进行定位，如果没有这类上级就是相对于 body 标签，也是浏览器窗口。需要设置css：position: absolute;，然后就可以使用 top, right, bottom, left 这类属性进行定位。例如：

div {
position: absolute;
top: 100px;
left: 150px;
}

这样就使板块向下移动100像素，向右移动150像素。

相对定位

这里的相对较难理解，与数理中的“相对”不太一样，这里是“相对于自己原来应在的位置”，需要设置css：position: relative;，重要的是不用关心上级是否设置了position属性，这样就很方便。例如：

div {
position: relative;
top: 100px;
right: 100px;
}

板块就相对于自己没设置样式前的位置，同时向左向下移动100px。

固定定位

这个就好理解了，所谓固定就是指固定于整个浏览器网页窗口不动，即使滚动网页内容也不改变位置，需要设置css：position: fixed，也可以设置 top, right等调整固定的位置。还记得浏览器某些网页右下角的小广告吗，是不是固定在那怎么浏览网页都不动 -_- .

CSS选择器详细介绍

Wed, 02 May 2018 00:00:00 +0000

文章出自个人博客https://knightyun.github.io/2018/05/02/css-selector，转载请申明

基础

CSS（层叠样式表Cascading Style Sheets）,用于修饰HTML网页内容，根据使用位置不同可分为三种样式：内联式，嵌入式，外部式。

内联式：标签 <>内部使用，例如：

<p style = "color: red; font-size: 20px"></p>。

嵌入式：写在 <style></style> 之中，并放在 <head></head> 内，例如：

<head>
<!--这里放其它标签，例如 meta，link，script之类-->
<style>
p {
	color: red;
	font-size: 20px;
}
</style>
</head>

外部式：写在外部 .css 文件中，使用如下方式引用：

<link rel = "stylesheet" type="text/css" href="css/index.css"> href 写 .css 文件路径，可以是绝对路径或相对路径，相对路径类似于：../../css/index.css，绝对路径类似于：/css/index.css。

选择器（Selector）

三种样式中，嵌入式和外部式需要使用到选择器，也是组成 css 样式的主体例如上例中的 p { }，主要分为：元素选择器、类选择器、ID选择器、子选择器、后代选择器、通用选择器、属性选择器、伪元素选择器、组选择器、相邻同级选择器。

元素选择器（Type selector）

也叫类型选择器，可以理解为标签选择器，最基本的选择器，就是使用常见的HTML元素，例如：body { }, h { }, p { }, div { }, span { }, a { } 等。

类选择器（Class selector）

前提需要在标签内使用类标记某处文档，类似：class = "myClass"，然后它的选择器的格式就为：.myClass { }，就是在类名前面加个小数点。

ID选择器（ID selecctor）

和类选择器类似，前提需要在标签内使用ID标记某处文档，类似：id = "myId"，格式为：#myId { }，就是在 ID 前加个符号 #。

ID选择器与类选择器的区别： 类选择器可以使用多次，ID选择器只能使用一次，例如： <p class = "one">This is a test content, </p> <p class = "one">hello world !</p>，但是ID不能这样。并且能同时使用多个类分别标记不同样式，例如：<p class = "one two"></p>，ID也不能这样。

子选择器（Child selector）

用于指定标签元素的子元素，使用符号 > 隔开父元素与子元素，例如： HTML：

<p1>
Hello World !!!
<p2>This is a test content</p2>
</p1>

CSS:

p1>p2 {
color: green;
font-size: 20px;
}

这里就指定了父元素 p1 的子元素 p2 的样式，但是只作用于子元素，不作用于父元素。

后代选择器（Descendant selector）

用于指定标签元素的后代元素，使用空格符号隔开，例如： html:

<p1>
Hello world !!!
<p2>
This is a <a>test</a> content
</p2>
</p1>

css:

p1 a {
color: green;
font-size: 20px;
}

这里指定了元素 p1 的后代元素 a 的样式，注意这里不是子代元素 p2，就是作用于所有指明的后代元素。

子代选择器与后代选择器的区别： 顾名思义的理解，后代就是包含子代在内的所有下代的元素，可以跨越子代直接作用于孙代；而子代只包含父级的第一代子代元素。子代选择器使用符号 > 隔开，后代选择器使用空格 隔开。

通用选择器

顾名思义，使用通配符 * 设置 html 中所有标签的样式，例如：

* {
color: red;
font-size: 20px;
}

这样就设置了HTML中所有的标签的样式了。

属性选择器（Attribute selector）

对具有指定的属性(attribute)设置样式，使用方括号符号 [ ]。

简单属性选择器

不用管属性值，例如：

[href] {color: red}
a [href] {color: red}
a [href] [title] {color: red}

以上格式都能实现相同效果，即具有该属性的 a 标签。

属性和值选择器

具有指定属性与其指定值的标签，格式为：

a [title = "link"] {color: red}

伪元素选择器

HTML中存在一类与元素控制内容相同的抽象元素，但是并不实际存在于HTML文档，给标签的某种状态设置样式，例如单击某内容或鼠标滑过某内容，然后设置改变的样式。伪元素种类较多，只列举几个常用例子。

:active

为激活的元素设置样式，就是用户单击该标签时的样式，例如：

a:active {color: red}

则用户点击这个链接文本时颜色变为红色。

:hover

悬停状态伪元素，为用户鼠标所停靠的标签设置样式，例如：

p:hover {color: red}

则鼠标停留在该段落时，段落内容变为红色。

:focus

用于具有焦点的元素，常用就是输入框，用户点击输入框准备输入时则该输入框就具有了焦点，例如：

input:focus {background-color: green} 则点击输入框时背景颜色变为绿色。

::selection

为选中的元素设置样式，例如：

::selection {color: red}

为文档中鼠标选定的内容设置为红色字体。注意可以追加应用范围：p::selection 表示段落中选中的字体才应用该样式，不追加直接使用 ::selection 表示应用于所有内容。 火狐浏览器支持需要使用 -moz-selection。

:first-child

为元素的第一子代应用样式，例如：

p:first-child {color: red}

这个比较好理解。

:nth-child()

为元素的父元素的第 n 个子代设置样式，只是括号内需要输入数字表示第几代，例如：

p:nth-child(2) {color: red}

假如p标签父元素是body，就表示为body的第二个子元素设置样式。

组选择器

为多个元素设置相同样式时，可以使用逗号分隔元素，达到同时设置的效果。例如：

p1,p1 {color: red}

表示为p1和p2 同时设置相同的样式。

相邻同级选择器

选择与指定元素同级的相邻的第一个某元素，设置样式，例如：

div+p {color: red}

表示为 p 设置样式，并且这个 p 与 div 同级，并且是与 div 相邻的第一个 p，div 内部的 p 并不包含在内。

返回顶部

C语言之变量存储类型与链接属性

Sat, 28 Apr 2018 00:00:00 +0000

C语言中一个重要的东西就是弄清申明变量的类型、作用域、存储类型、链接属性等，例如是整型还是浮点型，存储于普通内存还是堆栈或者寄存器，作用于全局还是局部，能否被其他文件引用等。

链接属性

申明变量或函数时需要标识符，标识符的链接属性一共有三种：external(外部), internal(内部), none(无)，external和internal常用，none表示无链接属性，该标识符的多个申明被当成独立不同的实体。

顾名思义，external表示能被其它源文件访问的变量或函数，internal则不能被其它源文件访问，并且缺省情况下代码块(block)外部的变量为external属性，也就是外部变量，代码块内部的变量为internal属性，即局部变量.

如果需要改变链接属性需要使用 extern 和 static 关键字，extern 是转化为external属性，static 是转化为internal属性。举例说明：

#include<stdio.h>
int a = 1;              /* 这里是代码块外部，external 属性，缺省为"extern" */
extern int aa = 11;     /* 与上面效果一样 */
static int aaa = 111;   /* 这里申明的是 internal 属性，不能被其它源文件访问 */
void example()          /* 这里申明的 example() 函数也是external属性，能被其它源文件访问 */
{
	int b = 2;          /* 这里是代码块内部，internal 属性 */
	extern int bb = 22; /* 这里的意思是访问其它源文件的全局变量 */
}

注意上面指出的代码块内部和外部，定义的函数的花括号之外叫做代码块外部，之内叫做代码块内部。 代码块外部缺省为extern，并且代码块外部使用extern表示被其它源文件访问，代码块内部使用extern表示访问其它文件的外部变量。

存储类型

存储类型指申明的变量将被存储到什么地方去，并且与其存储周期有关，就是这个变量何时被创建，何时被销毁，保持多久。

存储类型有三种：静态变量(static) —> 存储于普通内存。自动变量(auto) —> 存储于堆栈。寄存器变量(register) —> 存储于寄存器。

静态变量

任何代码块之外定义的变量，总是处于静态内存中，无需使用 static 关键字，在程序运行之前创建，程序整个执行期间始终存在。

自动变量

代码块内部申明的变量，并且缺省情况下都是(auto)类型，所以很少使用，存储于堆栈中，程序执行到申明变量处被创建，离开后被销毁，每次在堆栈中占据的内存位置都可能不同。

寄存器变量

用于申明自动变量，即在代码块内部使用，使这类变量存储于寄存器中，寄存器中的变量比内存中的变量访问效率更高。但是，如果有太多变量申明为 register ，只会选取前几个存储于寄存器中，其它处理为普通自动变量。

通常把使用频率最高的变量申明为寄存器变量，或者指针申明为寄存器变量，以提高效率。例如可以把函数的形参申明为寄存器变量（有可能它节省的时间空间开销抵不上复制这几个值的开销）。

综合举例

#include<stdio.h>
int a = 1;                  /* 静态变量(static)，这里不能使用 register */
int main()
{
	int b = 2;              /* 自动变量，省略 auto */
	register int c = 3;     /* 寄存器变量(register) */
	int aaa(register int d) /* 申明函数形参为 register */
	static int e = 4;       /* 申明静态变量，和变量 b 一个属性 */ 
}

初始化

静态变量在不指定初始值的时候，初始化为 0；自动变量是否初始化赋值，并无效率的改变（每次执行都要重新初始化），这也是它的优点：可以用任何“表达式”作为初始值。例如：

int add(int a)
{
	int b = a + 1;      /* 将表达式 a + 1 的值初始化给 b */
	return b;
}

注意

static 申明函数或代码块之外的变量时，只修改链接属性 ``external 为 internal`，存储类型和作用域不变。
static 申明代码块内部变量时，将自动变量修改为静态变量，但是链接属性和作用域不变。

综合举例

#include<stdio.h>
int a = 1;             /* 链接属性为 external，缺省 extern */
static int b = 2;      /* 修改连接属性为静态变量，不能被其它源文件访问，依然为全局变量，存储于静态内存中 */
int main()
{
	int c = 3;         /* 自动变量，存储到堆栈 */
	static int d = 4;  /* 静态变量，存储到普通内存，依然不能被其它源文件访问 */
}

C语言之随机数函数(rand())的使用方法

Wed, 25 Apr 2018 00:00:00 +0000

在程序设计中，难免会使用到随机值函数，其原理与语法大多类似，接下来以C语言为例介绍其随机值函数 rand() 用法。

原理

引用百度百科，首先，需要包含头文件：

#include <stdlib.h> rand()函数是按指定的顺序来产生整数，因此每次执行上面的语句都打印相同的两个值，所以说C语言的随机并不是真正意义上的随机，有时候也叫[伪随机数][wei]，使用 `rand()` 生成随机数之前需要用随机发生器的初始化函数 `srand(unsigned seed)`（也位于 `stdlib.h` 中） 进行伪随机数序列初始化，`seed` 又叫[随机种子][seed]，通俗讲就是，如果每次提供的 `seed` 是一样的话，最后每一轮生成的几个随机值也都是一样的，因此叫伪随机数，所以需要每次提供不同的 `seed` 达到完全的随机，我们通常用时间函数 `time(NULL)` 作为 `seed` ，因为时间值每秒都不同，这个函数需要包含以下头文件：

#include <time.h>

理论太泛，下面用例子分析理解。

举例分析

先来理解以下伪随机数，编译以下代码：

#include <stdio.h>
#include <stdlib.h>
#include <time.h>
int main()
{
	srand(1);
	int i;
	for (i = 0; i < 10; i++)
	printf("%d, ", rand()%11); 
} 

运行结果

8, 9, 9, 1, 7, 5, 5, 10, 1, 0,

然后无论运行多少次，结果都依然是以上随机数，不会改变，因为每次设置的种子 seed 都是 1 。

但是假如把 seed 换成 time(NULL)，每次就不一样了，如下：

#include <stdio.h>
#include <stdlib.h>
#include <time.h>
int main()
{
	srand(time(NULL));
	int i;
	for (i = 0; i < 10; i++)
	printf("%d, ", rand()%11); 
} 

结果是就变了，并且每次都不一样：

6, 3, 4, 5, 5, 9, 8, 10, 10, 4,
6, 4, 2, 4, 3, 2, 5, 1, 2, 9,

这里的 time(NULL) 的结果是一个类似于 1524655706 的数字，并且每秒都在递增 1，也就达成了 srand() 的 seed 不断变化的目的，不断生成新的随机数。

拓展

这里注意一下例子中函数 rand() 的用法，函数括号内不需要加参数，如果直接调用 rand() 的话会生成下面这样的数：

17163, 2663, 24810, 4875, 26975, 14119, 22193, 11233, 26009, 20105, 所以我们想要生成指定范围的随机数的话就需要使用到**求余**运算符 `%`，这里有个规律：例如我们需要 0--10的随机数时，就写成 `rand()%11`，0--100就写成 `rand()%101`，就是运算符后的数字需要比需求范围极值大 1，当然这也是取余运算的原理。

贪吃蛇C语言源码与算法分析

Tue, 24 Apr 2018 00:00:00 +0000

经典的贪吃蛇游戏算法，无疑是一个较大的挑战，综合性较高，像我这种刚入门C语言的也差不多花了整整一周时间才差不多理解透彻，内部包含了较多的函数，数组，二维数组，循环等思想。 Github项目地址：https://github.com/knightyun/gluttonousSnake/

接下来以C语言为例，针对此算法截取代码片段进行详细分析，源码位于文章底部。

算法分析

概述

首先分析一下，贪吃蛇最基本和重要的动作，一段在屏幕上移动和转向的躯干，但是C语言没有移动字符的函数，只能不断向屏幕打印输出和清屏实现移动，躯干位置在屏幕上的变化可以用二维坐标系实现，用一个二维数组保存屏幕所有可见内容的x，y坐标，并赋予几种初始值，然后用函数打印出各种值对应的字符，再用循环和坐标值自增自减实现移动。使用输入函数判断方向，随机函数生成食物，根据头部坐标判断撞墙或吃到自己而结束游戏。

头文件

Windows环境中需要包含的头文件：

#include<stdio.h>     
#include<stdlib.h> 
#include<Windows.h>       /*需要使用system("cls")清屏函数*/
#include<conio.h>         /*非标准库函数，VS中自带，需要使用_getch()函数获取输入*/
#include<time.h>          /*使用随机数函数需要使用time()函数*/

预定义

游戏内可自定义设置界面宽度与高度，需要给二维数组定义一个最大值：

#define MAXX 10000                /* 定义游戏最大界面宽度坐标值 */
#define MAXY 10000                /* 定义最大高度 */

申明变量

需要用到的变量和功能如下：

int speed = 10;                    /* 设置蛇移动速度 */
int mapArr[MAXX][MAXY];            /* 保存界面坐标值的二维数组 */
int inputX = 50, inputY = 20;      /* 默认游戏界面宽度和高度 */
int randX = -1, randY = -1;        /* 生成的随机食物的坐标值 */
int foodFlag = 0;                  /* 判断是否更新食物 */
int sx = 1, sy = 1;				   /* 设置蛇身坐标值 */
int l = 0;				           /* 蛇身长度 */
int *body[MAXX * MAXY];			   /* 储存蛇身的指针数组 */
char input = '6';			       /* 默认移动方向 */
int overFlag = 1;                  /* 判断游戏结束，撞墙或吃到自己 */
int moveX = 1, moveY = 1;          /* 游戏开始的动画效果坐标值 */
int moveFlag = 0;                  /* 开始动画的循环判断 */

这里使用了指针数组控制蛇身，方便赋值 数组中的参数虽然不能是变量，但是可以是宏定义

函数

接下来就是重要环节了，分析实现游戏效果的各个函数。

第一步，定义初始化函数 InitMap() 将屏幕上每个点通过二维数组赋予坐标值 x、y，确定游戏界面的大小，我们将四周的墙赋值为 1，中间空白赋值为 0，蛇身赋值为 2，随机出现的食物赋值为 3。
第二步，定义 PrintMap() 函数给每个坐标值打印对应的字符，我们将墙用字符 + 表示，空白用空字符 " " 表示，蛇身用星号 * 表示，食物用字符 @ 表示。
第三步，定义函数 StartMsg() 显示屏幕信息，提示控制的按键。
第四步，定义函数 GetSet() 使玩家可以自定义游戏界面宽和高和移动速度，使用 scanf() 函数获取并改变默认界面尺寸。
第五步，定义函数 SetRandNum() 在界面中随机出现食物，并且不与蛇身和墙重叠，使用 srand(time(0)) 初始随机函数，然后用一个循环不断用随机函数 rand() 生成随机坐标值，直到所生成位置是空白为止。
第六步，最核心的算法，较为复杂，定义函数 SetSnakeNum() 设置蛇身的坐标值，并通过通过输入判断前进方向，以设置的速度时间间隔不断自增或自减坐标值实现移动，里面用到了 _kbhit() 函数，作用是：有用户输入时，返回值为真，无输入时值为假。还有 _getch() 函数与 getchar() 的区别：_getch() 输入值后不用输入回车就能获取输入值。感觉最不好理解的就是蛇身的转弯算法，我的方法是：蛇身每一节在每一次循环不断继承前一节的值，然后蛇头位置不断获得新坐标值，这样就能实现身体的转向，这里就可以用到之前定义的指针数组 *body[] 来实现。算法中还需要注意的一点是，蛇身朝某个方向移动时，只能控制另外两个方向，例如向右移动时不能控制向左移动。然后随后的函数就好说了。
第七步，定义函数 EatFood() 实现遇到食物坐标值时，增加一节蛇身长度值 l 。
第八步，定义函数 StartGame() 来综合之前的函数并开始游戏，需要通过 overFlag 判断游戏结束。
第九步，定义函数 SetMoveNum() 实现游戏开始时的动画效果，对于游戏存在意义不大，仅供研究训练思维和算法。
第十步，定义函数 JudgeEnd() 判断之前的函数 SetMuveNum() 的结束时刻，然后不断循环动画效果。
第十一步，定义函数 StartView() 开始游戏，按任意键游戏正式开始。

下面是函数申明：

void InitMap();                   /* initialize the background coordinate system */
void PrintMap();                  /* print every point in the arr mapArr to the screen */
void StartMsg();                  /* start message */
void GetSet();                    /* judge whether to edit the game setting */
void SetRandNum();                /* set a random 'food' point in the screen */
void SetSnakeNum();               /* the most complex and important algorithm of this game */
void EatFood();                   /* judge when to eat food and elongate the body */
void StartGame();                 /* start the game */
void SetMoveNum();                /* algorithm of the start animation, some complex */
void JudgeEnd();                  /* judge the end of the animation and loop again*/
void StartView();                 /* start the start animation view */

源码

#include<stdio.h>
#include<stdlib.h>
#include<Windows.h>                /* use the function 'system("cls")' to clear screen */
#include<conio.h>                 /* use the function '_getch()' to get input */
#include<time.h>                  /* the random function need the 'time()' function */
#include "public-fun.h"

#define MAXX 10000                /* define the max width of game space */
#define MAXY 10000                /* define the max height */

void InitMap();                   /* initialize the background coordinate system */
void PrintMap();                  /* print every point in the arr mapArr to the screen */
void StartMsg();                  /* start message */
void GetSet();                    /* judge whether to edit the game setting */
void SetRandNum();                /* set a random 'food' point in the screen */
void SetSnakeNum();               /* the most complex and important algorithm of this game */
void EatFood();                   /* judge when to eat food and elongate the body */
void StartGame();                 /* start the game */
void SetMoveNum();                /* algorithm of the start animation, some complex */
void JudgeEnd();                  /* judge the end of the animation and loop again*/
void StartView();                 /* start the start animation view */

int speed = 10;                   /* default snake move speed */
int mapArr[MAXX][MAXY];            /* arr to store the point in the screen */
int inputX = 50, inputY = 20;      /* default width and height */
int randX = -1, randY = -1;        /* set a random food point in the background */
int foodFlag = 0;                  /* judge when to change random food point*/
int sx = 1, sy = 1;				/* body x, y point */
int l = 0;						/* body lenth */
int *body[MAXX * MAXY];				/* body array pointer */
char input = '6';			     	/* default direction */
int overFlag = 1;                 /* judge when the game over, hit wall or eat self*/
int moveX = 1, moveY = 1;         /* start move effect */
int moveFlag = 0;                /* restart the loop effection */

void GetSet() 
{
	printf("\n");
	printf("请输入游戏空间的宽度：\n(Please enter the width of game space:)\n");
	scanf_s("%d", &inputX);	
	printf("\n");
	printf("请输入游戏空间的高度：\n(Please enter the height of game space:)\n");
	scanf_s("%d", &inputY);
	printf("\n");
	printf("请输入游戏速度（1 到 n，1 最慢）：\nPlease enter the speed of snake moving:(1 is slowest)\n");
	scanf_s("%d", &speed);
}

void InitMap()
{
	int x, y;
	for (y = 0; y < inputY; y++)
	{
		for (x = 0; x < inputX; x++)

		{
			if ((x == 0) || (x == inputX - 1) || (y == 0) || (y == inputY - 1))
			{
				mapArr[x][y] = 1;
			}
			else
			{
				mapArr[x][y] = 0;
			}
		}
	}
}

void PrintMap()
{
	int x, y;
	for (y = 0; y < inputY; y++)
	{
		for (x = 0; x < inputX; x++)
		{
			switch (mapArr[x][y])
			{
			case 0:
				printf(" ");
				break;
			case 1:
				printf("+");
				break;
			case 2:
				printf("*");
				break;
			case 3:
				printf("@");
			}
		}
		printf("\n");
	}
}

void StartMsg()   
{
	printf
	("'2(top)', '8(down)', '4(left)', 6(right)' 或 \n'w(top)', 'a(left)', 's(down)', 'd(right)'\n控制方向(control the direction)\n");
}

void SetRandNum() 
{
	srand(time(0));
	while ((mapArr[randX + 1][randY + 1] != 0) && (foodFlag == 0))
	{
		randX = rand() % (inputX - 2), randY = rand() % (inputY - 2);
	}
	mapArr[randX + 1][randY + 1] = 3;	/* set foot number 3 */
	foodFlag = 1;
}

void SetSnakeNum()
{
	if (_kbhit())         /* if there is an input, get it; if not, go on	*/
	{
		int a = _getch();		
		switch (input)
		{
		case '2':
		case 'w':
			if (a == '4' || a == '6' || a == 'a' || a == 'd' || a == '2' || a == 'w')
				input = a;
			break;
		case '8':
		case 's':
			if (a == '4' || a == '6' || a == 'a' || a == 'd' || a == '8' || a == 's')
				input = a;
			break;
		case '4':
		case 'a':
			if (a == '2' || a == '8' || a == 'w' || a == 's' || a == '4' || a == 'a')
				input = a;
			break;
		case '6':
		case 'd':
			if (a == '2' || a == '8' || a == 'w' || a == 's' || a == '6' || a == 'd')
				input = a;
			break;
		}
	}
	switch (input)				/* judge the direction by value of input */
	{
	case '2':					/* up */
	case 'w':
		sy--;
		break;
	case '8':					/* down */
	case 's':
		sy++;
		break;
	case '4':					/* left */
	case 'a':
		sx--;
		break;
	case '6':					/* right */
	case 'd':
		sx++;
		break;
	}
	int i;
	for (i = l; i != 0; i--)           /*  every point's address of body move back one point */
	{
		body[i] = body[i - 1];
		*body[i] = 2;                 /* change value by pointer */
	}
	body[0] = &mapArr[sx][sy];
	if ((*body[0] == 1) || (*body[0] == 2))    /* judge when the snake hit the wall or eat itself */
	{
		overFlag = 0;
	}
	*body[0] = 2;              /* assign the head of snake by pointer */
}

void EatFood() 
{
	if (*body[0] == 3)
	{
		l++;
		foodFlag = 0;
	}
}

void StartGame()
{
	sx = 1;
	sy = 1;
	l = 0;
	input = '6';
	int j;
	for (j = 0; j < l; j++)             /* assign the snake body initial address value*/
	{
		body[j] = &mapArr[sx - j][sy];   
	}
	while (overFlag)    /* loop until the game over */
	{
		InitMap();
		SetSnakeNum();
		SetRandNum();
		EatFood();
		PrintMap();
		StartMsg();
		Sleep(1000/speed);
		system("cls");
	}
}

void SetMoveNum()
{
	/* x move 1 -- (X - 2 ); y move 1 -- (Y - 2) */
	/* move x from left to right */
	if ((moveY == 1 + moveFlag) && (moveX < inputX - 2 - moveFlag))
	{
		mapArr[moveX][moveY] = 2;
		moveX++;
	}
	/* move y from top to buttom */
	else if ((moveX == inputX - 2 - moveFlag) && (moveY < inputY - 2 - moveFlag))
	{
		mapArr[moveX][moveY] = 2;
		moveY++;
	}
	/* move x from right to left */
	else if ((moveY == inputY - 2 - moveFlag) && (moveX > 1 + moveFlag))
	{
		mapArr[moveX][moveY] = 2;
		moveX--;
	}
	/* move y from buttom to top */
	else if ((moveX == 1 + moveFlag) && (moveY > 1 + moveFlag))
	{
		mapArr[moveX][moveY] = 2;
		moveY--;
		if (moveY == 2 + moveFlag)     /* judge when to jump to a deeper layer */
		{
			moveFlag++;
		}
	}
}

void JudgeEnd() 
{
	int i, j;
	int tmp = 1;
	for (j = 0; j < inputY; j++)
	{
		for (i = 0; i < inputX; i++)
		{
			if (mapArr[i][j] == 0)
				goto out;
		}
	}
	moveX = 1, moveY = 1;
	InitMap();
	moveFlag = 0;
out:;
}

void StartView()
{
	moveX = 1, moveY = 1, moveFlag = 0;
	int startFlag = 1;
	InitMap();
	while (startFlag)
	{
		SetMoveNum();
		PrintMap();
		printf("按任意键开始游戏：\n(Press any key to start game: )\n");
		Sleep(10);
		system("cls");
		JudgeEnd();
		if (_kbhit())
		{
			int c = _getch();
			if ((c != '2') && (c != 'w') && (c != '8') && (c != 's') && (c != '4') && (c != 'a') && (c != '6') && (c != 'd'))
				startFlag = 0;
		}
	}
}

int main()             /* main function */
{
	while (1)
	{
		printf("是否修改设置（修改输入“y”,否则按任意键）：\nEdit the game setting or not ? (Press 'y' to edit, or press another key to go on:)\n");
		if (_getch() == 'y')
		{
			GetSet();          
		}
		StartView();  /* an animation before game start */
		StartGame();
		printf("Game Over !!!\n游戏结束，按任意键继续：\n(Press any key to restart: )\n");
		_getch();
		overFlag = 1;   /* restart the game by the flag */
		system("cls");
	}
} 

返回顶部

有更简单的算法欢迎评论指正！

Kali Linux之软件安装、卸载、更新和修改更新源

Sat, 21 Apr 2018 00:00:00 +0000

使用Linux系统，与Windows系统一样，也需要及时进行软件与系统的更新。

软件

这里以 Kali Linux 系统为例，介绍常用的软件安装、卸载与更新命令：

软件安装

安装前先搜索一下更新源中是否有该软件，这里使用 apt 命令，貌似比另外一个类似的命令 apt-get 友好一些。

例如我们安装 leafpad 这个软件：

apt search leafpad

然后安装这个软件：

apt install leafpad >**然后确定安装就行了。** >**有时会出现一些 `failed` 可以按照提示使用命令 `apt install --fix-missing` 修复。**

软件卸载

简单卸载软件：

apt remove leafpad >**卸载软件并移除配置文件：**

apt-get purge leafpad >**卸载自动安装并且未使用的软件**

apt autoremove

软件更新

先更新一下源：

apt update >**这个操作并没有开始更新软件，类似于将远程源中的最新版本信息更新到本地**

接下来才开始更新软件：

apt upgrade 更新系统：

apt full-upgrade 或者：

apt-get dist-upgrade 清理安装包：

apt-get clean
apt-get autoclean #### 更新源

Linux 更新源文件位于 /etc/apt/sources.list ，系统就是从这个文件中读取一些网址参数下载安装软件，默认的是 kali 官方源，我们可以修改为国内一些较快的源，例如阿里、中科大、网易等，加快下载速度。

找到并编辑上述 sources.list 源文件，替换为以下内容：

#aliyun 阿里云
deb http://mirrors.aliyun.com/kali kali-rolling main non-free contrib
deb-src http://mirrors.aliyun.com/kali kali-rolling main non-free contrib

# ustc 中科大
deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib
deb-src http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib
#deb http://mirrors.ustc.edu.cn/kali-security kali-current/updates main contrib non-free
#deb-src http://mirrors.ustc.edu.cn/kali-security kali-current/updates main contrib non-free

# kali 官方源
deb http://http.kali.org/kali kali-rolling main non-free contrib 
deb-src http://http.kali.org/kali kali-rolling main non-free contrib 

# 默认的，可以注释掉不用管
#deb http://security.kali.org/kali-security kali-rolling/updates main contrib non-free
#deb-src http://security.kali.org/kali-security kali-rolling/updates main contrib non-free

以上是目前加快的，也可以百度一下增加其它源

Linux初识之Kali Linux系统安装详细教程（虚拟机）

Sun, 15 Apr 2018 00:00:00 +0000

一、Kali Linux 介绍

1、Linux

引用一下百度百科： Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

Linux有多个发行版本，以下是官网提供下载的一些版本：

2、Kali

kali是linux其中一个发行版，基于Debian，前身是BackTrack（简称BT系统）。kali系统内置大量渗透测试软件，黑客工具箱已不足以形容它，可以说是巨大的渗透系统，涵盖了多个领域，如无线网络、数字取证、服务器、密码、系统漏洞等等，知名软件有：wireshark、aircrack-ng、nmap、hashcat、metasploit-framework(msf)。

二、虚拟机软安装与配置

1、下载

这里将详细介绍在Windows虚拟机中安装kali linux，使用的虚拟机软件是 VMware，可以去官网下载最新版本，注意： VMware 10.0版本之后只支持64位系统，如果是32位系统用户需要下载10.0及之前的版本。然后下载发型版的kali linux，官网下载，根据自己情况选择下载32位或64位，完整版或者轻便版，这里我下载的64位完整版。

1、安装配置

接下来一步步安装：选择安装位置，注意保证空间充足：

等待安装完成：

这是试用版本，需要购买密钥，鼓励购买正版，蛮穷的可以使用以下任一密钥：

FF31K-AHZD1-H8ETZ-8WWEZ-WUUVA

CV7T2-6WY5Q-48EWP-ZXY7X-QGUWD

安装完成，然后新建虚拟机：

选择推荐的即可：

这里选择安装程序映像文件，浏览选择刚才下载的kali linux文件，后缀是 .iso：

选择操作系统“linux”，版本是“Debian”：

名称随便取，然后选择虚拟机文件存放位置：

注意选择合适位置，这里需要存放几十G的虚拟磁盘文件

设置虚拟磁盘的大小，一般不能低于默认值，下面一般选择单个文件，方便：

新建完成，硬件可以之后自定义：

觉得默认配置不合适可以自定义调整，例如修改内存大小，增加磁盘：

设置网络适配器模式，可以桥接物理网络（例如电脑连接wifi，虚拟机就和电脑连接同一个wifi），或者NAT模式（类似于电脑成为一个路由器，虚拟机连接电脑的热点），如果不想联网，只用于物理机和虚拟机之间的交流，可以选择主机模式：

虚拟机配置完成，接下来开始安装 kali 系统。

三、Kali系统安装与配置

点击启动虚拟机：

鼠标点击安装界面，之后用键盘方向键和Enter键操作：

Live 开头的不是系统安装，类似于Windows PE，用于恢复系统，其他选项可以不用管，也暂时用不着。 这里我们选择简单的图形化安装 Graphical install 此时鼠标无法操作，退出虚拟机操作界面使用 ctrl + alt 键。

选择简体中文：

等待配置一会：

设置主机名称，和Windows的主机名一样：

可以暂时不用输入：

设置用户密码登录：

等待配置：

可以选择使用整个磁盘：

注：这里简单介绍一下里面的 LVM 选项：详见百度百科，LVM是 Logical Volume Manager（逻辑卷管理）的简写，它是Linux环境下对磁盘分区进行管理的一种机制。安装Linux时常出现的一个问题就是合理分区，根据使用情况设置 /boot, /var, /home 等区块的大小，设置好之后再想要改变就很麻烦，要用分区工具压缩一部分的空闲区出去，然后合并到空间不足的区域。

个人对LVM的理解是，它类似于使用一种文件夹的机制，直接使用整块磁盘，把每个分区设置成一种类似文件夹的存在，因为文件夹不会限制大小，因此就能动态调整各区的大小，方便管理。

继续：

可以使用推荐的：

确定分配，或者更改区块大小和新增区块：

确认写入：

接下来安装时间有点长，喝杯茶休息一下 -_-

终于安装完成，半小时安静的过去了…… 这里选择不使用网络镜像：

配置GRUB：

安装完成：

选择启动，第二个选项是恢复模式：

初始用户名是 root：

之前设置的密码：

到此kali系统就安装完毕了：

内置大量软件，更多功能可以自行发掘：

返回顶部

C语言自增自减运算辨析

Tue, 10 Apr 2018 00:00:00 +0000

c语言中，自增(++)和自减(–)运算是很有c语言“感觉”的一种运算符，但是在实际编写中，尤其对初学者或者很久没接触它的，会对它的原理和运算结果产生混淆，接下来做详细辨析。

自增运算（++）

语法为：a++，其结果与：a = a + 1 一样，也和：a += 1 一样，作用很明显，方便阅读，减小代码量。例如下面的例子，就能看出明显的效果了：

((3+a)*sqrt(3)/(a%2))=((3+a)*sqrt(3)/(a%2))+1;

/*简化后*/
((3+a)*sqrt(3)/(a%2))++;

辨析

自增也可以表示为 ++a， 它们都能把a 的值加 1，但是两个表达式的值却不同，用一个例子说明：

#include<stdio.h>
int main()
{
    int a = 1, b = 1, a2, b2;
    a2 = a++;
    b2 = ++b;
    printf("a = %d, b = %d, a2 = %d, b2 = %d", a, b, a2, b2);
}

输出结果为：

a = 2, b = 2, a2 = 1, b2 = 2

其实，a++ 的值为 a 本身，++a 的值为 a+1 后的值。

也可以按教科书那种记：

b = a++ 是先赋值后运算，即先 b=a，然后 a++。 b = ++a 是先运算后赋值，即先 ++a，然后 ++a。

自减运算

自减运算原理和辨析与上面自增运算相似，a-- 等于 a = a -1 ，表达式 a-- 的值为 a ，表达式 --a 的值为 a-1。

递归函数之阶乘的实现

Fri, 06 Apr 2018 00:00:00 +0000

定义

在编程中函数有一个神奇又难理解的功能，就是递归。递归就是在一个过程中要调用上一步或上几步的结果，使用递归过程的函数就叫递归函数。简单说就是函数自身调用自身（听着有点反自然，像自己举起自己）。

递归实例

除了数学的复杂运算中，生活中也有不少递归的实例：

德罗斯特效应

德罗斯特效应（Droste effect）是递归的一种视觉形式，即一张图片中的某部分与整张图片相同，如下：

别晕、别晕 -_-

或者在自己身前和身后都放一面镜子，深刻体会一会儿 ▄︻┻┳══━一

递归实现

接下来就用C语言递归函数来实现阶乘功能，源码如下：

#include <stdio.h>
int factorial(int n) /*外部定义阶乘函数*/
{
	int m;
	if (n < 0)  /*注意要给函数设置一个递归结束条件*/
	{
		printf("输入错误！"); 
		return 0;
	}
	else if (n == 1)
	{
		m = 1;
	}	
	else
	{
		m = n * factorial(n-1); /*调用函数factorial()自身*/
	}
	return m; 
}
int main()
{
	printf("%d", factorial(5)); 
	
} 

这是程序大概的运算过程：

这里要注意给函数设置一个递归结束条件，可以是 if 判断句，不然函数就无限调用自身下去了，你之前看着镜子中的镜子中的……自己都晕，程序自然是崩溃了

位运算符与位运算

Fri, 06 Apr 2018 00:00:00 +0000

一、概述

程序中的所有数在计算机内存中都是以二进制的形式储存的。除了常见的算术运算符：+ - * / %，还有位运算：& | ^ ~ >> <<，就是直接对整数在内存中的二进制位进行操作。接下来以C语言为例介绍，其它语言大同小异。

二、按位与（&）

又叫 and 运算，用符号 & 表示，计算方式如下：

1 & 1 = 1 , 0 & 1 = 0 , ` 0 & 0 = 0`

布尔类型中，1 表示真，0 表示假，所以可以用高中数学那句话来记：同真为真，一假为假。

举个例子：3 & 5 = 1 ，运算过程如下：

   0 1 1   ---> 3
 & 1 0 1   ---> 5
  --------
   0 0 1   ---> 1

三、按位或（|）

又叫 or 运算，用符号 | 表示，运算方式：

1 | 1 = 1 , 1 | 0 = 1 , 0 | 0 = 0

记为：一真为真，同假为假

举例：3 | 5 = 7 , 运算过程：

   0 1 1   ---> 3
 | 1 0 1   ---> 5
 --------
   1 1 1   ---> 7

四、按位异或（^）

又叫 xor 运算，用符号 ^ 表示，注意这里不是数学表达里面的次方的意思，运算方式：

1 ^ 1 = 0 , ` 1 ^ 0 = 1 , 0 ^ 0 = 0`

这种运算也较为特殊，记为：同为假，异为真 举例：3 ^ 5 = 6 , 运算过程：

   0 1 1    ---> 3
 ^ 1 0 1    ---> 5
 ---------
   1 1 0    ---> 6

简单应用

1、交换变量值

异或运算有如下特性：

a ^ b ^a = b , a ^ b ^ b =a

因此可以用于程序中的变量值交换，C语言中，我们可能经常这样交换变量值：

#include <stdio.h>
int main()
{
	int a = 3, b = 5;
	int temp; /*定义一个临时变量用于交换方便*/
	temp = a;
	a = b;
	b = temp;
	printf("a = %d, b = %d", a, b); /*输出结果为：a = 5, b = 3 实现了变量值的交换*/
}

但是以后我们可以这样实现：

#include <stdio.h>
int main()
{
	int a = 3, b = 5;
	a ^= b; /*等同于：a = a ^ b 之后会讲*/
	b = a ^ b; /*这时 a ^ b 等于 原来 a 的值*/
	a ^= b; /*a = a ^ b*/
	printf("a = %d, b = %d", a, b);
}

a, b 为负数时同样适用，但位运算只适用于整型，浮点数不可用

2、简单加密

例如，你想传输一条信息给Ta，信息为：5201314 ，密码为：1998 ，使用如下代码加密：

5201314 ^ 1998

结果为 5200492，想要查看原信息，使用密码查看：

5200492 ^ 1998 这样就生成了原数字：`5201314`.

五、按位取反（~）

又叫 not 运算，即将二进制位中 0 和 1 全部取反，运算方式为：

~ 1 = 0 , ~ 0 = 1

记为：0 变 1，1 变 0

举例：~5 = -6, 运算过程：

 ~ 00000000 00000000 00000000 00000101   ---> 5
 ---------------------------------------
   11111111 11111111 11111111 11111010   ---> -6

注意变量如果定义是无符号短整型 unsigned short ， ~5 将不再是 -6 ，而是 65530。 还有一个规律是正整数取反后结果是原数加一后取相反数，负数一样。 还要注意不要和逻辑运算符 ! 搞混，! 1 = 0 , ! 1234 = 0 , ! 0 = 1，即只有 真(1) 与假(0) 两种。

六、移位运算

顾名思义，移位即将数据的二进制数进行向左或向右平移一定的位数，然后得到新的数据，移位分为左移位和右移位。

1、左移位（«）

将数据的转换为二进制，所有位向左平移，高位（左端）舍弃，低位（右端）空位补 0，格式为：

需要移位的数据 << 需要移动的位数

举例：5 << 2 =20 ，运算过程：

  00000000 00000000 00000000 00000101   ---> 5
 -------------------------------------
  00000000 00000000 00000000 00010100   ---> 20

右移位的数学意义是，原数左移 n 位，相当于原数乘以 2 的 n 次方

2、右移位

将数据的二进制所有位向右移位，低位舍弃，高位补 0（负数补 1），格式：

需要移位的数据 >> 需要移动的位数

举例：5 >> 2 = 1，运算过程：

  00000000 00000000 00000000 00000101   ---> 5
 -------------------------------------
  00000000 00000000 00000000 00000001   --->  1

负数情况：-6 >> 2 = -2，运算过程：

  11111111 11111111 11111111 11111010    ---> -6
 -------------------------------------
  11111111 11111111 11111111 11111110    ---> -2

右移位的数学意义是，相当于原数除以 2 的 n 次方

七、复合赋值符

算术运算中有复合赋值符：+= -+ *= /= %=，位运算也有对应的复合赋值：&= |= ^= >>= <<= （注意没有 ~= ），运算一样：

a &= b 等价于 a = a & b

以此类推

返回顶部

十进制负数的二进制表示法

Wed, 04 Apr 2018 00:00:00 +0000

十进制转正整数转二进制应该都会，用C语言代码简单表示算法：

#include<stdio.h>
int main()
{
	int dec=65535; /*positive decimalism number to binary number*/
	int bin[32];
	int i=0, j;
	while (dec>1)
	{
		bin[i]=dec%2;
		dec/=2;
		i++;
	}
	bin[i]=dec;
	for (j=i; j>=0; j--) /*print binary number*/
	{
		printf("%d",bin[j]); 
	}
	printf("\n");
}

当然也有另外一种简单转换方法：

#include<stdio.h>
int main()
{
	int dec=65535;
	char bin[32];
	itoa(dec,bin,2); /*整型转换为字符串的函数，第一个参数是整型变量，
	第二个是字符数组，用于存放字符串，第三个是进制，“2” 表示输出的字符串的进制格式，
	可以这样记函数：“int to arr” */
	printf("%s\n", bin);
}

但是，十进制负整数转换为二进制稍微复杂一些，分为三步：

一、原码

例如一个十进制数 5，二进制原码表示为：

00000000 00000000 00000000 00000101

大小为 4 字节，每一个 0 或 1 表示一个比特位(bit)，所以八位为一字节，好像32位和64位系统都这样。一字节用十进制整数表示大小则是：2的8次方（256）。表示为十六进制是这样：ff ff ff ff（f=2^4-1）

二、反码

将二进制原码每一位取反，就是 0 变 1 ，1 变 0。上面 5 的反码表示为这样：

11111111 11111111 11111111 11111010

三、补码

将反码最低位加 1 叫做补码，那么 5 的补码表示为：

11111111 11111111 11111111 11111011

注意反码末位是 1 时记得进位。

所以十进制数 -5 的二进制表示为：

11111111 11111111 11111111 11111011

所以 -1 在计算机中表示为全 1，就是：

11111111 11111111 11111111 11111111

我64位计算机中是这样的：

搭建Github Pages个人博客网站

Sun, 01 Apr 2018 00:00:00 +0000

引言

关于博客

写博客对于程序猿来说，应该是个优秀的习惯，个人也觉得蛮高大上的 ^_^。网上的博客论坛网站也多种多样，个人觉得在长久以来的不断竞争淘汰中，各大网站的功能等可能都相差无几了，选择自己稍微偏好的就可以了。

我的个人情况就是结合CSDN博客和Github Pages的独立个人博客网页，因为听说拥有自己的Github主页也是一件蛮高大上的事 -_- 。

关于Github

然后简单介绍一下Github以及其Github Pages功能。

GitHub是一个面向开源及私有软件项目的托管平台，也是一个分布式版本控制系统，详情见百度百科。说到分布式，自然也有另外一种集中式版本控制系统：SVN，有兴趣小伙伴可以了解百度百科。GIt是SVN的发展版，而且现在主流也是GIt，但某些大公司依然在使用SVN，二者各有优劣，自行体会，此处不做详解，用一张图简单说明：

GIthub Pages则是github上的一项功能，可以放置网页文件到指定文件夹，然后给你一个专属域名用于展示一些项目，但现在大多用来开发制作个人博客网站。接下来就一步步按照我曾经的步骤来搭建个人博客，顺便讲讲沿途遇到过的坑，如没有的提及请自行百度。

创建Github账号

github pages 功能依赖于github账号，没有的话先去官网注册一个：然后好像要邮箱验证，就是填写的那个，点击那个验证链接就注册成功了。

创建仓库

有了自己的账号后，可以跟着官网的引导，创建自己的第一个仓库，就是 repository：

填好信息

创建完成

到这里就创建好了自己的仓库，可以上传文件到这个目录下，接下我们用这个仓库来使用github pages功能。

填充仓库

仓库建好了，接下来就是往里面装东西了，就是支撑博客首页的一些网页文件和配置文件，对于新手来说要自己编写这些文件就有点开玩笑了，所以可以选择使用已有的主题，你可以选择复制我的https://github.com/knightyun/knightyun.github.io，然后选择自己仓库，网页基础好的同学以后修改网页内容就行了。

嫌修改麻烦可以跳过这一步，到后面的步骤选择喜欢的主题

配置Github Pages功能

然后我们来配置github pages

重命名，注意格式

把上面的页面向下滑，现在就可以访问了

当然github也提供了一些主题供选择，点击上面的“choose a theme”按钮进行选择

这个网站有更多主题工选择：http://jekyllthemes.org/，如有选择困难症请绕路 -_-

博客的书写与上传

Git基础

前面说到向自己的github仓库上传文件，我们使用“git”这个工具，进行拉取、克隆、提交等一系列操作，Linux系统应该是自带，官网下载地址：https://git-scm.com/。并且需要掌握一些git基本操作，如 git commit , git push, git clone 等，这里有很完整的教程：Git语法说明.

git配置

安装好后cmd输入 git 有反应则安装成功：
进行如下配置：

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"

NAME指你的昵称，EMAIL ADDRESS是你的注册邮箱

然后生成相应的令牌，本地一份，Github 一份，这样 Github 可以在你使用仓库的时候，进行校验确定你的身份。

cd ~/.ssh
mkdir key_backup
ssh-keygen -t rsa -C "*your_email@youremail.com*"

注意这里不是在cmd里输入，是使用刚安装的 git bash 软件，可以在电脑菜单里面搜索

然后会生成如下两个文件：

id_rsa.pub 就是我们待会需要的公钥文件，使用命令 cat id_rsa.pub 再将内容复制到剪切板，然后进入github账号设置里面粘贴

选择添加SSH key：

把刚才复制的内容粘贴进去

然后输入 ssh -T git@github.com 测试连通状态

我的Windows版没有成功，不知道Linux是否成功，报错如下，应该是windows ssh配置问题

git Desktop版

如果你也出现以上状况，不必担心，git还能使用https协议连接，只不过要每次输入账号和密码，但是可以选择github官方提供的git desktop软件：

这里我是下载过的

界面如下，需要登录，以后提交文件就方便了，cmd也能使用git提交，不用每次输入密码

可以查看变化文件，甚至文件内变化的内容，commit 后点击 fetch 按钮提交

软件功能不算复杂，自己摸索一会就会了，图形界面的软件使得一些命令行的操作变得容易、友好。

创建本地仓库

选择一个本地文件夹，用作保存本地仓库文件，尽量是空文件夹，然后使用命令 git init 初始化文件夹，其实是在当前文件夹下生成一个叫 .git 的隐藏文件夹，里面是一些配置文件，不要随意更改。

使用 git clone https://github.com/name/repository.git 将远程仓库克隆到本地此文件夹下， name 是自己的昵称，repository 是自己的仓库名，不要忘记末尾的 .git 后缀。

然后此文件夹下会多一个和你仓储名一样的文件夹，内部文件与远程仓库一样。绑定远程仓库，方便提交：

git remote add origin git@github.com:username/username.github.io.git

介绍几个常用命令：

git add . //添加文件
git commit -m "commit-messages" //提交本地仓库
git push origin master //提交远程仓库
git pull //拉取远程文件，与以下命令类似
git branch temp //创建本地分支
git fetch origin master:temp
git merge master

安装Jekyll

关于Jekyll

Jekyll是一个简单免费的生成博客网页的工具，可以绑定github，详情参考官网：https://jekyllrb.com/, 也有一个中文版的：https://www.jekyll.com.cn/ 方便阅读。我的博客就是通过jekyll建立了，上面那个主题网站也是jekyll的，还有一个类似的工具叫“hexo”，自行了解。

上传修改后的文件到github仓库后需要一段时间才能看到网页的变化或修改效果，所以可以选择安装本地jekyll工具进行本地快速预览。

安装步骤

安装Ruby：jekyll依赖于Ruby，需要提前安装，官网下载链接：http://www.ruby-lang.org/en/downloads/，windows/Linux/Mac的版本都有。
安装gem：官网链接https://rubygems.org/pages/download，貌似安装ruby后自带gem。 cmd命令行输入 gem 检查是否安装成功：
安装jekyll：cmd命令行输入 gem install jekyll

开启jekyll

直接输入 jekyll s 开启jekyll服务，windows可能会遇到以下问题：

* 使用 bundle exec jekyll s 命令就可以运行了，如果提示没有安装 bundler ，就 gem install bundler 再 bundle install

* 可能还会提示没有安装其他组件，记下名称， gem install xxx 就可以了

然后就可以成功运行了，退出按 ctrl + c 键

* 运行时保持这个窗口不要关闭，浏览器输入 127.0.0.1:4000 或 localhost:4000 进行预览

* 不过我的windows预览效果不太好，加载不出图片，其他系统没试过

写博客与上传

Markdown基础

Jekyll使用Markdown语言书写博客，markdown是一种简单易读的标记性语言，不同于 html，大量的标签不易于阅读，写着也麻烦，用markdown写博客很合适。

首先你需要了解一些markdown语法，这里有完整版语法说明：Markdown语法说明，了解一些基础后就可以开始写博客了。

工具介绍

这篇文章：Markdown简明语法最后有介绍一些好用的markdown编辑器，自行选择。不过每次都用编辑器写好 .md 文件然后用 git 上传到 github 根目录下的 _post 文件夹好像很繁琐，Jekyll官方提供了一款方便的博客编辑器，方便书写、预览、上传，官网链接：http://jekyllwriter.com/，三种系统版本都有。接下来简单介绍一些使用：

安装后主界面：

添加账号

配置 token 保存后会生成一个 token ，返回软件粘贴进输入框就行了

写完后保存并上传

可以在这里查看和修改账户下的博客

软件其他功能还在完善，自行摸索

图床介绍

写博客就无法避免上传图片，图床就是这么一个地方，就是一个网站，你发自己的图片上传到它的网站，然后它给你一个这个图片的链接，插入博客中就能显示图片了。

推荐一个知名的，七牛云https://portal.qiniu.com/，注册完实名认证后有一些优惠。还有一个神奇的网站：https://sm.ms/，也能用

然后在 jekyll writer中配置一下：

当然我用的是CSDN在线编辑器写博客，图片能直接上传到CSDN上，直接生成链接，其工具也能用

关于图片尺寸

markdown的图片插入方式 ![title](http://xxx.com/xxx.png/) 是没办法修改图片尺寸的，可以使用html中的 <img>标签： <img src="http://xxx.com/xxx.png/" alt="title" width=XXpx height=XXpx> width 和 height 添加想要的尺寸。

域名配置

自己的博客网站就建好了，想要分享出去的小伙伴就要想办法让自己的网页能被百度等搜索引擎搜到，或者这样，百度搜索： site:name.github.io ，出现错误页面就表示搜不到。

很遗憾，百度是禁止抓取 github pages 的内容的，可以购买一个自己的专属域名，有很多选择，阿里云、腾讯、花生壳域名等，百度站长平台有个链接提交功能，但是它只是加速爬取，并未解决收录：

貌似它们的熊掌号服务可以解决这问题：

然后，就没有然后了 -_-

以花生壳域名为例，其它大同小异，配置一下：

再添加两条 github 的ip的 A记录值：192.30.252.153 192.30.252.154

最后搜索: "site:你的域名" 有结果就成功了

开始自己的博客生涯吧。

返回顶部

C语言统计素数

Fri, 30 Mar 2018 00:00:00 +0000

源码如下：

#include<stdio.h>
int main()
{
    // 1-1000的素数
    printf("1-1000的素数: \n\n"); 
    int i, j, co = 0; //设置co用于统计个数
    for (j = 1; j <= 1000; j++) //遍历1-1000
    {
        for (i = 2; i < j; i++) //素数条件：只能被1和自身整除
        {
            if (j % i == 0) //发现不是素数，则跳出本层循环
            {
                break;
            }
        }
        if (i == j) //遍历后，没有除1和自身以外的因数，i==j 表示遍历了 2--自身的所有数并且未发现因数
	{
            printf("%d ", j);
            co++;
	}
    }
    printf("\nTotal: %d\n\n", co);
}	   

运行结果：

1-1000的素数:

3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 101 
107 109 113 127 131 137 139 149 151 157 163 167 173 179 181 191 193 197 
211 223 227 229 233 239 241 251 257 263 269 271 277 281 283 293 307 311 
317 331 337 347 349 353 359 367 373 379 383 389 397 401 409 419 421 431 
439 443 449 457 461 463 467 479 487 491 499 503 509 521 523 541 547 557 
569 571 577 587 593 599 601 607 613 617 619 631 641 643 647 653 659 661 
677 683 691 701 709 719 727 733 739 743 751 757 761 769 773 787 797 809 
821 823 827 829 839 853 857 859 863 877 881 883 887 907 911 919 929 937 
947 953 967 971 977 983 991 997

total: 168

注意

素数，又称质数，即整数在一个大于1的自然数中，除了1和此整数自身外，没法被其他自然数整除的数。将1-1000中每个数都对“2–自身”进行整除，i==j 说明是对“2–自身”都遍历了一遍并且未发现符合条件的数，而不是前面发现有多余因数的break;

另一个优化的版本，供参考：

#include<stdio.h>
#include<math.h>
int main()
{
    // 1-1000的素数
    printf("1-1000的素数: \n\n"); 
    int i, j, co = 0;
    printf("2 ");
    for (j = 1; j <= 1000; j+=2) //不遍历偶数，除了2偶数都不是质数
    {
	for (i = 2; i <= sqrt(j); i++) //实际遍历到此数的平方根就够了，需要引入 <math.h> 头文件
	{
            if (j % i == 0)
	    {
		break;
	    }
	}
	if (i > sqrt(j)) //这里也要变一下
	{
	    printf("%d ", j);
	    co++;
	}
    }
    printf("\n\ntotal: %d\n\n", co+1); //注意这里要加上“2”这个数，2是质数也是偶数，之前没有遍历
}

这样就大大缩短了时间。

C语言打印九九乘法表

Fri, 30 Mar 2018 00:00:00 +0000

源码如下：

#include<stdio.h>
int main()
{
	//打印九九乘法表
	printf("九九乘法表：\n"); 
	int x, y; //初始化打印的两个方向
	for (y = 1; y < 10; y++) //两层循环嵌套打印输出
	{
		for (x = 1; x <= y; x++)
		{
			printf("%d*%d=%2d ", y, x, x * y); //%2d表示固定输出两位
		}
		printf("\n"); //打印到行尾，换行
	}
	printf("This is the end.\n");
}

输出结果：

九九乘法表：
1*1= 1
2*1= 2 2*2= 4
3*1= 3 3*2= 6 3*3= 9
4*1= 4 4*2= 8 4*3=12 4*4=16
5*1= 5 5*2=10 5*3=15 5*4=20 5*5=25
6*1= 6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
7*1= 7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
8*1= 8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
9*1= 9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81
This is the end.

注意：

代码注释处说明的%2d是为了美观，强行使相乘的结果占两个字符位，否则打印结果如下：

九九乘法表：
1*1=1
2*1=2 2*2=4
3*1=3 3*2=6 3*3=9
4*1=4 4*2=8 4*3=12 4*4=16
5*1=5 5*2=10 5*3=15 5*4=20 5*5=25
6*1=6 6*2=12 6*3=18 6*4=24 6*5=30 6*6=36
7*1=7 7*2=14 7*3=21 7*4=28 7*5=35 7*6=42 7*7=49
8*1=8 8*2=16 8*3=24 8*4=32 8*5=40 8*6=48 8*7=56 8*8=64
9*1=9 9*2=18 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81
This is the end.

没有上面美观吧-_-

C语言统计闰年

Fri, 30 Mar 2018 00:00:00 +0000

源码如下：

#include<stdio.h>
int main()
{
    // 统计1-2020的闰年
    printf("1-2020的闰年: \n\n"); 
    int ye, c = 0;
    for (ye = 1; ye <= 2020; ye++) //此处也可更改为指定年份区间
    {
        if (((ye % 4 == 0) && (ye % 100 != 0)) || (ye % 400 == 0)) //闰年的定义：能被4整除但不能被100整除，或能被400整除的年份
        {
            printf("%d ", ye);
            c++;
        }
    }
    printf("\n\nTotal: %d\n", c); //用定义的变量c统计
}

运行结果：

1-2020的闰年:

8 12 16 20 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 104 
112 116 120 124 128 132 136 140 144 148 152 156 160 164 168 172 176 
184 188 192 196 204 208 212 216 220 224 228 232 236 240 244 248 252 
260 264 268 272 276 280 284 288 292 296 304 308 312 316 320 324 328 
336 340 344 348 352 356 360 364 368 372 376 380 384 388 392 396 400 
408 412 416 420 424 428 432 436 440 444 448 452 456 460 464 468 472 
480 484 488 492 496 504 508 512 516 520 524 528 532 536 540 544 548 
556 560 564 568 572 576 580 584 588 592 596 604 608 612 616 620 624 
632 636 640 644 648 652 656 660 664 668 672 676 680 684 688 692 696 
708 712 716 720 724 728 732 736 740 744 748 752 756 760 764 768 772 
780 784 788 792 796 800 804 808 812 816 820 824 828 832 836 840 844 
852 856 860 864 868 872 876 880 884 888 892 896 904 908 912 916 920 
928 932 936 940 944 948 952 956 960 964 968 972 976 980 984 988 992 
1004 1008 1012 1016 1020 1024 1028 1032 1036 1040 1044 1048 1052 
1060 1064 1068 1072 1076 1080 1084 1088 1092 1096 1104 1108 1112 
1120 1124 1128 1132 1136 1140 1144 1148 1152 1156 1160 1164 1168 
1176 1180 1184 1188 1192 1196 1200 1204 1208 1212 1216 1220 1224 
1232 1236 1240 1244 1248 1252 1256 1260 1264 1268 1272 1276 1280 
1288 1292 1296 1304 1308 1312 1316 1320 1324 1328 1332 1336 1340 
1348 1352 1356 1360 1364 1368 1372 1376 1380 1384 1388 1392 1396 
1408 1412 1416 1420 1424 1428 1432 1436 1440 1444 1448 1452 1456 
1464 1468 1472 1476 1480 1484 1488 1492 1496 1504 1508 1512 1516 
1524 1528 1532 1536 1540 1544 1548 1552 1556 1560 1564 1568 1572 
1580 1584 1588 1592 1596 1600 1604 1608 1612 1616 1620 1624 1628 
1636 1640 1644 1648 1652 1656 1660 1664 1668 1672 1676 1680 1684 
1692 1696 1704 1708 1712 1716 1720 1724 1728 1732 1736 1740 1744 
1752 1756 1760 1764 1768 1772 1776 1780 1784 1788 1792 1796 1804 
1812 1816 1820 1824 1828 1832 1836 1840 1844 1848 1852 1856 1860 
1868 1872 1876 1880 1884 1888 1892 1896 1904 1908 1912 1916 1920 
1928 1932 1936 1940 1944 1948 1952 1956 1960 1964 1968 1972 1976 
1984 1988 1992 1996 2000 2004 2008 2012 2016 2020

Total: 490

Markdown完整语法说明

Wed, 28 Mar 2018 00:00:00 +0000

Markdown 完整语法说明

辛勤的搬运工，原文链接http://wowubuntu.com/markdown/index.html

概述

宗旨

Markdown 的目标是实现「易读易写」。

可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。

兼容 HTML

Markdown 语法的目标是：成为一种适用于网络的书写语言。

Markdown 不是想要取代 HTML，甚至也没有要和它相近，它的语法种类很少，只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来， HTML 已经很容易写了。Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。

要制约的只有一些 HTML 区块元素――比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能，不会在 HTML 区块标签外加上不必要的 <p> 标签。

例子如下，在 Markdown 文件里加上一段 HTML 表格：

这是一个普通段落。

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

这是另一个普通段落。 请注意，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如，你在 HTML 区块内使用 Markdown 样式的`*强调*`会没有效果。

HTML 的区段（行内）标签如 <span>、<cite>、<del> 可以在 Markdown 的段落、列表或是标题里随意使用。依照个人习惯，甚至可以不用 Markdown 格式，而直接采用 HTML 标签来格式化。举例说明：如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图像标签语法。

和处在 HTML 区块标签间不同，Markdown 语法在 HTML 区段标签间是有效的。

特殊字符自动转换

在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果你只是想要显示这些字符的原型，你必须要使用实体的形式，像是 < 和 &。

& 字符尤其让网络文档编写者受折磨，如果你要打「AT&T」，你必须要写成「AT&T」。而网址中的 & 字符也要转换。比如你要链接到：

http://images.google.com/images?num=30&q=larry+bird 你必须要把网址转换写为：

http://images.google.com/images?num=30&amp;q=larry+bird 才能放到链接标签的 `href` 属性里。不用说也知道这很容易忽略，这也可能是 HTML 标准检验所检查到的错误中，数量最多的。

Markdown 让你可以自然地书写字符，需要转换的由它来处理好了。如果你使用的 & 字符是 HTML 字符实体的一部分，它会保留原状，否则它会被转换成 &。

&copy; Markdown 会保留它不动。而若你写：

AT&T Markdown 就会将它转为：

AT&amp;T 类似的状况也会发生在 < 符号上，因为 Markdown 允许 兼容 HTML ，如果你是把 < 符号作为 HTML 标签的定界符使用，那 Markdown 也不会对它做任何转换，但是如果你写：

4 < 5 Markdown 将会把它转换为：

4 &lt; 5 不过需要注意的是，code 范围内，不论是行内还是区块， < 和 & 两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，你要把所有的 < 和 & 都转换为 HTML 实体，才能在 HTML 文件里面写出 HTML code。）

区块元素

段落和换行

一个 Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进。

「由一个或多个连续的文本行组成」这句话其实暗示了 Markdown 允许段落内的强迫换行（插入换行符），这个特性和其他大部分的 text-to-HTML 格式不一样（包括 Movable Type 的「Convert Line Breaks」选项），其它的格式会把每个换行符都转成 <br /> 标签。

如果你确实想要依赖 Markdown 来插入 <br /> 标签的话，在插入处先按入两个以上的空格然后回车。

的确，需要多费点事（多加空格）来产生 <br /> ，但是简单地「每个换行都转换为 <br />」的方法在 Markdown 中并不适合， Markdown 中 email 式的区块引用和多段落的列表在使用换行来排版的时候，不但更好用，还更方便阅读。

标题

Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。

类 Setext 形式是用底线的形式，利用 = （最高阶标题）和 - （第二阶标题），例如：

This is an H1
=============

This is an H2
------------- 任何数量的 `=` 和 `-` 都可以有效果。

类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：

# 这是 H1

## 这是 H2

###### 这是 H6

你可以选择性地「闭合」类 atx 样式的标题，这纯粹只是美观用的，若是觉得这样看起来比较舒适，你就可以在行尾加上 #，而行尾的 # 数量也不用和开头一样（行首的井字符数量决定标题的阶数）：

# 这是 H1 #

## 这是 H2 ##

### 这是 H3 ######

区块引用 Blockquotes

Markdown 标记区块引用是使用类似 email 中用 > 的引用方式。如果你还熟悉在 email 信件中的引言部分，你就知道怎么在 Markdown 文件中建立一个区块引用，那会看起来像是你自己先断好行，然后在每行的最前面加上 > ：

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> 
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > ：

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

> ## 这是一个标题。
> 
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
> 
> 给出一些例子代码：
> 
>     return shell_exec("echo $input | $markdown_script");

任何像样的文本编辑器都能轻松地建立 email 型的引用。例如在 BBEdit 中，你可以选取文字后然后从选单中选择增加引用阶层。

列表

Markdown 支持有序列表和无序列表。

无序列表使用星号、加号或是减号作为列表标记：

*   Red
*   Green
*   Blue 等同于：

+   Red
+   Green
+   Blue 也等同于：

-   Red
-   Green
-   Blue 有序列表则使用数字接着一个英文句点：

1.  Bird
2.  McHale
3.  Parish 很重要的一点是，你在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为：

<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol> 如果你的列表标记写成：

1.  Bird
1.  McHale
1.  Parish 或甚至是：

3. Bird
1. McHale
8. Parish 你都会得到完全相同的 HTML 输出。重点在于，你可以让 Markdown 文件的列表数字和输出的结果相同，或是你懒一点，你可以完全不用在意数字的正确性。

如果你使用懒惰的写法，建议第一个项目最好还是从 1. 开始，因为 Markdown 未来可能会支持有序列表的 start 属性。

列表项目标记通常是放在最左边，但是其实也可以缩进，最多 3 个空格，项目标记后面则一定要接着至少一个空格或制表符。

要让列表看起来更漂亮，你可以把内容用固定的缩进整理好：

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
    viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
    Suspendisse id sem consectetuer libero luctus adipiscing. 但是如果你懒，那也行：

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
*   Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing. 如果列表项目间用空行分开，在输出 HTML 时 Markdown 就会将项目内容用 <p> 标签包起来，举例来说：

*   Bird
*   Magic 会被转换为：

<ul>
<li>Bird</li>
<li>Magic</li>
</ul> 但是这个：

*   Bird

*   Magic 会被转换为：

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul> 列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：

1.  This is a list item with two paragraphs. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit. Aliquam hendrerit
    mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
    sit amet velit.

2.  Suspendisse id sem consectetuer libero luctus adipiscing. 如果你每行都有缩进，看起来会看好很多，当然，再次地，如果你很懒惰，Markdown 也允许：

*   This is a list item with two paragraphs.

    This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

*   Another item in the same list. 如果要在列表项目内放进引用，那 > 就需要缩进：

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item. 如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符：

*   一列表项包含一个列表区块：

        <代码写在这> 当然，项目列表很可能会不小心产生，像是下面这样的写法：

1986. What a great season. 换句话说，也就是在行首出现数字-句点-空白，要避免这样的状况，你可以在句点前面加上反斜杠。

1986\. What a great season. 代码区块

和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块，通常这些区块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 <pre> 和 <code> 标签来把代码区块包起来。

要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以，例如，下面的输入：

这是一个普通段落：

    这是一个代码区块。 Markdown 会转换成：

<p>这是一个普通段落：</p>

<pre><code>这是一个代码区块。
</code></pre> 这个每行一阶的缩进（4 个空格或是 1 个制表符），都会被移除，例如：

Here is an example of AppleScript:

    tell application "Foo"
        beep
    end tell 会被转换为：

<p>Here is an example of AppleScript:</p>

<pre><code>tell application "Foo"
    beep
end tell
</code></pre> 一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）。

在代码区块里面， & 、 < 和 > 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制贴上，再加上缩进就可以了，剩下的 Markdown 都会帮你处理，例如：

<div class="footer">
    &copy; 2004 Foo Corporation
</div> 会被转换为：

<pre><code>&lt;div class="footer"&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre> 代码区块中，一般的 Markdown 语法不会被转换，像是星号便只是星号，这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。

分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

* * *

***

*****

- - -

---------------------------------------

##区段元素

链接

Markdown 支持两种形式的链接语法： _行内式_和_参考式_两种形式。

不管是哪一种，链接文字都是用 [方括号] 来标记。

要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute. 会产生：

<p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>

<p><a href="http://example.net/">This link</a> has no
title attribute.</p> 如果你是要链接到同样主机的资源，你可以使用相对路径：

See my [About](/about/) page for details. 参考式的链接是在链接文字的括号后面再接上另一个方括号，而在第二个方括号里面要填入用以辨识链接的标记：

This is [an example][id] reference-style link. 你也可以选择性地在两个方括号中间加上一个空格：

This is [an example] [id] reference-style link. 接着，在文件的任意处，你可以把这个标记的链接内容定义出来：

[id]: http://example.com/  "Optional Title Here" 链接内容定义的形式为：

方括号（前面可以选择性地加上至多三个空格来缩进），里面输入链接文字接着一个冒号接着一个以上的空格或制表符接着链接的网址选择性地接着 title 内容，可以用单引号、双引号或是括弧包着下面这三种链接的定义都是相同：

[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here) 请注意：有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。

链接网址也可以用尖括号包起来：

[id]: <http://example.com/>  "Optional Title Here" 你也可以把 title 属性放到下一行，也可以加一些缩进，若网址太长的话，这样会比较好看：

[id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here" 网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。

链接辨别标签可以有字母、数字、空白和标点符号，但是并不区分大小写，因此下面两个链接是一样的：

[link text][a]
[link text][A] 隐式链接标记功能让你可以省略指定链接标记，这种情形下，链接标记会视为等同于链接文字，要用隐式链接标记只要在链接文字后面加上一个空的方括号，如果你要让 "Google" 链接到 google.com，你可以简化成：

[Google][] 然后定义链接内容：

[Google]: http://google.com/ 由于链接文字可能包含空白，所以这种简化型的标记内也许包含多个单词：

Visit [Daring Fireball][] for more information. 然后接着定义链接：

[Daring Fireball]: http://daringfireball.net/ 链接的定义可以放在文件中的任何一个地方，我比较偏好直接放在链接出现段落的后面，你也可以把它放在文件最后面，就像是注解一样。

下面是一个参考式链接的范例：

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search" 如果改成用链接名称的方式写：

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search" 上面两种写法都会产生下面的 HTML。

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p> 下面是用行内式写的同样一段内容的 Markdown 文件，提供作为比较之用：

I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search"). 参考式的链接其实重点不在于它比较好写，而是它比较好读，比较一下上面的范例，使用参考式的文章本身只有 81 个字符，但是用行内形式的却会增加到 176 个字元，如果是用纯 HTML 格式来写，会有 234 个字元，在 HTML 格式中，标签比文本还要多。

使用 Markdown 的参考式链接，可以让文件更像是浏览器最后产生的结果，让你可以把一些标记相关的元数据移到段落文字之外，你就可以增加链接而不让文章的阅读感觉被打断。

强调

Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 <em> 标签包围，用两个 * 或 _ 包起来的话，则会被转成 <strong>，例如：

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__ 会转成：

<em>single asterisks</em>

<em>single underscores</em>

<strong>double asterisks</strong>

<strong>double underscores</strong> 你可以随便用你喜欢的样式，唯一的限制是，你用什么符号开启标签，就要用什么符号结束。

强调也可以直接插在文字中间：

un*frigging*believable 但是如果你的 * 和 _ 两边都有空白的话，它们就只会被当成普通的符号。

如果要在文字前后直接插入普通的星号或底线，你可以用反斜线：

\*this text is surrounded by literal asterisks\*

代码

如果要标记一小段行内代码，你可以用反引号把它包起来（`），例如：

Use the `printf()` function. 会产生：

<p>Use the <code>printf()</code> function.</p> 如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段：

``There is a literal backtick (`) here.`` 这段语法会产生：

<p><code>There is a literal backtick (`) here.</code></p> 代码区段的起始和结束端都可以放入一个空白，起始端后面一个，结束端前面一个，这样你就可以在区段的一开始就插入反引号：

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` `` 会产生：

<p>A single backtick in a code span: <code>`</code></p>

<p>A backtick-delimited string in a code span: <code>`foo`</code></p> 在代码区段内，& 和尖括号都会被自动地转成 HTML 实体，这使得插入 HTML 原始码变得很容易，Markdown 会把下面这段：

Please don't use any `<blink>` tags. 转为：

<p>Please don't use any <code>&lt;blink&gt;</code> tags.</p> 你也可以这样写：

`&#8212;` is the decimal-encoded equivalent of `&mdash;`. 以产生：

<p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p> 图片

很明显地，要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。

Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。

行内式的图片语法看起来像是：

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title") 详细叙述如下：

一个惊叹号 !
接着一个方括号，里面放上图片的替代文字
接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 ‘title’ 文字。参考式的图片语法则长得像这样：

「id」是图片参考的名称，图片参考的定义方式则和连结参考一样：

到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 <img> 标签。

其它

自动链接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：

<http://example.com/> Markdown 会转为：

<a href="http://example.com/">http://example.com/</a> 邮址的自动链接也很类似，只是 Markdown 会先做一个编码转换的过程，把文字字符转成 16 进位码的 HTML 实体，这样的格式可以糊弄一些不好的邮址收集机器人，例如：

<address@example.com> Markdown 会转成：

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a> 在浏览器里面，这段字串（其实是 `<a href="mailto:address@example.com">address@example.com</a>`）会变成一个可以点击的「address@example.com」链接。

（这种作法虽然可以糊弄不少的机器人，但并不能全部挡下来，不过总比什么都不做好些。不管怎样，公开你的信箱终究会引来广告信件的。）

反斜杠

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号，例如：如果你想要用星号加在文字旁边的方式来做出强调效果（但不用 <em> 标签），你可以在星号的前面加上反斜杠：

\*literal asterisks\* Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

返回顶部

Markdown简明教程

Tue, 27 Mar 2018 00:00:00 +0000

Markdown简明语法

Markdown和扩展Markdown简洁的语法
代码块高亮
图片链接和图片上传
LaTex数学公式
离线写博客
导入导出Markdown文件

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

插入图片

格式一：

 ![picture-name](http://xxx.com/xxx.png)

格式二：(方便设置图片尺寸)

<img src="http://xxx.com/xxx.png" alt="download-failed" width="XXXpx"  height="XXXpx">

定义列表

Markdown　Extra　定义列表语法：
项目１
项目２: 定义 A; 定义 B
项目３: 定义 C; 定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

python:

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

c语言:

#include <stdio.h>
	int main()
	{
		printf("Hello world!");
	}

脚注

生成一个脚注[^footnote]. [^footnote]: 这里是脚注的内容.

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。
块级公式：

$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

更多LaTex语法请参考这儿.

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
IE９以下不支持
IE９，１０，１１存在以下问题
1. 不支持离线功能
2. IE9不支持文件导入导出
3. IE10不支持拖拽文件导入

常用Markdown编辑器推荐

Markdownpad：详情请点击官网。（貌似专业版需要收取一定dollars$，需要序列号自行baidu。）
Markpad：详情前往官网。（推荐使用，Microsoft Store也有，完全免费，支持及时效果浏览。）
CSDN博客编辑器：CSDN网站内置编辑器。（这篇文件就是这样写出来的-_-)
Harropad: 官网
Retext: 简单强大的文本编辑器，可控制输出格式：pdf, html等，仅支持Linux（推荐）.下载