发表于

JavaScript中的数据类型有：

基本类型：Number，String，Boolean，Null，Undefined；

复杂类型：Object；

ES6中，新增了Symbol。

1、Number类型

根据ECMAScript标准，JS内部中是以64位浮点数形式存储数字，此外还有一些值：+Infinity；-Infinity；NaN。

由于浮点数不是精确的值，所以涉及到小数运算时要注意，例如：

1
2
0.1 + 0.2 === 0.3
// false，实际是等于0.30000000000000004

JS的数值有多种表示方法，可以直接用字面形式表示，例如0b11（二进制）；21（十进制）；011（八进制）；0x11（十六进制）。数值也可以采用科学计数方法表示，例如123e3 //表示123000；123e-3 //表示0.123。

NaN表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。需要注意的是NaN === NaN // false。

与数值相关的方法有：

  • parseInt()方法：用于将字符串转为整数。如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。
  • parseFloat()方法：用于将一个字符串转为浮点数。此方法会自动过滤字符串前导的空格，如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

2、String类型

由于历史原因，JavaScript引擎不能自动识别编号大于0xFFFF的Unicode字符，JS允许在程序中使用Unicode编号表示字符，写成\uxxxx的形式，例如’\u00A9’ 表示 “©”。

在一些情景中，常用到转义符\来表示特殊符号。在表示多行字符串时，建议这样使用：

1
2
3
4
5
6
7
var s1 = '1234'+
    '5678'
//s1 === '1234568'
ES6下：
var s2 = `1234
5678`
//"1234↵5678" 此处有一个回车符不能省略

3、Null类型和Undefined类型

两者都可以表示为“没有”，使用可区分于：有一个对象obj，但现在不想给值，用null；有一个非对象，不想给值，用undefined。

4、Boolean类型

布尔值代表“真”和“假”两个状态，真用ture表示，假用false表示。布尔值只有这两个值。

下列运算符会返回布尔值：

  • 前置逻辑运算符： ! (Not)
  • 相等运算符：===，!==，==，!=
  • 比较运算符：>，>=，<，<=

JS中只有以下六个值会被转为false：undefined;null;false;0;NaN;""或''(空字符串)。

5、Object类型

简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。对象是一个复杂类型，由简单类型组成。

创建一个对象的方法可以有

1
2
3
1.  var o1 = {}; 
2.  var o2 = new Object(); 
3.  var o3 = Object.create(Object.prototype);

如果想知道一个变量a是否已经声明过，可以用if('a' in window){...}检测。

对象的属性的删除方法delete，例如：

1
2
3
4
5
6
7
8
9
var p = { name : 'Jack'}

p.name === p['name']  //取value值

p['name'] = undefined 
'name' in p        // true，只是把name值变成了变成了undefined，但name这个key仍然存在

delete p['name']   //同时删除key-value；
'name' in p        // false

for...in循环是用来遍历对象，会跳过不可遍历的 key，不仅遍历对象自身的属性，还遍历继承的属性。

一般情况下，都是只想遍历对象自身的属性，所以使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。

1
2
3
4
for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }

参考文献：

1.阮一峰JavaScript教程

发表于

CSS：层叠样式表(Cascading Style Sheets)。
CSS由于属性和值的多样复杂，一般都是使用过程中边用边查询。
引入CSS的方式有：

  • style内联属性
  • 在HTMLhead使用<style>标签
  • 通过<link>引入
  • 通过@import url(./style.css)引入

文档流

一个元素的高度由其内容决定，块极元素由其文档流(normal flow) 的高度总和决定。
其中文档流的含义：文档内元素流动的方向，内联元素从左到右，块级元素从上到下，每一快独占一行。
浮动(float) 、绝对定位(absolute) 、固定定位(fixed) 三种方式定位会脱离文档流。
其中：
1、position: fixed固定定位是相对于窗口定位，用top`left`定位；
2、绝对定位是相对父元素定位

子元素： position: absolute
父元素： position: relative

3、浮动，子元素使用float: left/right父元素添加.clearfix::after{ content: ""; display: block; clear:both}，用来解决可能出现的bug。

box-sizing: border-box

border-box与content-box对比，border-box更接近物理世界中的 Box。比如仓库中摆放纸箱. margin 就是箱与箱间的距离，border 就是纸箱纸壳厚度。 padding 就是纸箱中用来减震的泡沫塑料厚度。
有人评论，box-sizing属性明显是给box model花式擦屁股，因为box model默认的是content-box，请在CSS开头声明：*, *::before, *::after { box-sizing: border-box; }

水平居中

CSS中，进行水平居中是相对比较容易的。
如果它是一个行内元素，就对它父元素应用： text-align: center;
如果它是一个块级元素，就对她自身应用margin: auto。

垂直居中

Flex布局居中

主流方式，广泛用于PC端和移动端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.父元素 {
        display: flex;
        aligin-items: center;
        justify-content: center 
        }
``` 

#### grid布局居中
非主流，未来可能取代flex的用法，兼容性待提高

```html
.父元素{
    display: grid;
    align-items: center;
    justify-content: center;
}

绝对定位居中

适用于使用绝对定位的场景，传统方法

1
2
3
4
5
6
7
8
9
.父元素{
    position: relative;
}
.子元素{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

内联元素居中

对块级父级使用，能让内部的匿名行盒(文字)、行内元素(span)、inline-block元素在父亲里水平居中

1
2
3
.container {
    text-align: center;
}

css使用个人小tips：
1、写样式时，由内到外，由小到大；
2、先写垂直间距，后写左右间距；
3、伪类:（一个冒号，虚，状态），伪元素::（两冒号，确实存在，伪装，可以display，不可被选中或复制；
4、使用display：inline-block与vertical-align: top同时存在使用。



Fighting!

发表于

这里介绍几个HTML常用的标签：<iframe> <a> <form> <input>/<button> <table>。

<iframe>标签

<iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。常用写法：<iframe src = "https://xxx.com" name= "xxx"> </iframe>
常用属性有：
nameiframe名称，可以用作<a>标签，<form>标签的target属性值，或<input>标签和 <button>标签的formtarget属性值；
height width 规定高度和宽度；
frameborder = 1/0 规定是否显示iframe周围边框；
sandbox该属性对呈现在iframe框架中的内容启用一些额外的限制条件；
目前iframe标签常用在邮箱，广告上。

<a> 标签

<a>可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
示例：

<a href="xxx" target = "yyy"> zzz </a>

<a>标签中属性href的值:

  1. 可以是网址，也可以是相对路径；
  2. 带#前面的值，指向锚点，页面不刷新；
  3. “?xxx=yyy”，发起请求
  4. 伪协议，href=”javascript: ;”，点击后，页面不做任何事情，用于一些特殊情景

<a>标签中属性target的值：_self默认值，在当前页面加载链接；_blank新窗口打开；_parent在父框架打开；_top在顶层框架打开；framename与iframe同时使用。
<a>标签中属性download定义了下载链接的地址。

<form>标签

表单提交标签，<form> 标签通常包含一个或多个如下的表单元素：
<input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label>。

示例: 

1
2
3
4
5
<form action ="users" method="post"> 
    <input type ="text" name="username">
        <input type ="password" name="password">
        <input type ="submit" value="提交">
</form>

常用属性和值的相对关系

属性 值 描述
mathod get
post		 规定用于发送表单数据的 HTTP 方法
action url 规定当提交表单时向何处发送表单数据
name text 规定表单的名称

<input>/<button>/<select>标签

input与button的不同在于：button默认为submit，提交；而input默认是输入框，需要将属性type=”submit”才能提交。
实际使用通常用<lable>标签包裹<input>使用，示例：
<label><input type='radio' name='fruit' value='banana'>香蕉</label>
<label><input type='radio' name='fruit' value='apple'>苹果</label>
其中input属性type=radio时为单选框，type=checkbox时为复选框。
<select>默认是单选，属性multiple为true时，为多选。示例：

1
2
3
4
5
6
<select name="group" > 
  <option value=" "> -</option >
  <option value="1">第一组 </option >
  <option value="2" disabled>第二组</option > ##disable表示不能被选中
  <option value="3" selected>第三组</option > ##selected表示默认选中 
</select >

<table>标签

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<table >
    <colgroup>
    <col width=70>
    <col bgcolor=gray width=100>
    <col width=50>
    <col bgcolor=red width=50>
  </colgroup>
    <thead>
      <tr>
        <th>项目</th>
        <th>姓名</th>
        <th>班级</th>
        <th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th>
        <td>小明</td>
        <td>一班</td>
        <td>90</td>
      </tr>
      <tr>
        <th></th>
        <td>小红</td>
        <td>二班</td>
        <td>95</td>
      </tr>
      <tr>
          <th>平均分</th>
          <td></td>
          <td></td>
          <td>92.5</td>
      </tr> 
    </tbody>
    <tfoot>
        <tr>
            <th>总分</th>
            <td></td>
            <td></td>
            <td>185</td>
        </tr>
    </tfoot>
  </table>


效果图片：

参考文献：

Fighting!

发表于

W3C，全称是万维网联盟 (World Wide Web Consortium,W3C) ，是万维网的主要国际标准组织。W3C推荐标准的目的在于使万维网技术标准化。HTML5是目前W3C制定的HTML最新修订版本。
MDN (旧称Mozilla Developer Network)，是一个汇集众多Mozilla基金会产品和网上技术开发文档的免费网站。在MDN可以帮助更好的学习HTML知识，相比于直接看HTML标准文档，MDN显得更友好一点。
例如，MDN可以直接查询HTML5中的所有有效的标签列表。
空标签，是指不可能存在字节点的元素,通常在一个空元素上使用一个闭合标签是无效的。在MDN上列出所有了空元素：

1
2
3
<area> <base> <br> <col> <colgroup> <command> <embed> 
<hr> <img> <input> <keygen> <link> <meta> <param>
<source> <track> <wbr>

可替换标签： 在CSS 里，可替换元素的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。
典型的可替换元素有 <img> <object> <video> 和 表单元素，如<textarea> <input>。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和<canvas> 。
例如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有自带宽高，但也可以通过属性覆盖自带宽高，也可以由CSS覆盖属性。

发表于

TCP/IP是互联网相关的各类协议族的总称。
TCP/IP协议族里面是按层次分为应用层、传输层、网络层和数据链路层。
应用层决定了向用户提供应用服务时通信的活动，例如FTP和DNS，以及HTTP协议处于应用层。
传输层有两个性质不同的协议：UDP和TCP。

TCP/IP通信传输流

94544374.jpg
发送端在层与层之间传输数据，每经过一层时必定会打上一个该层所属的首部信息。反之，接受端在层与层传输数据时，每经过一层会把相应的首部信息去掉。这种把数据信息包装起来的方法称为封装 (encapsulate)。

TCP的三次握手

TCP位于运输层，提供可靠的字节流服务。字节流服务是指，为了方便传输，把大块数据分割成以报文段（segment）为单位的数据包，采用三次握手策略，握手过程采用TCP的标志——SYN和ACK，确保数据能够到达目标。
29518100.jpg
三次握手过程。发送端首先发送一个带有SYN标志的数据包给对方，接受端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后，发送端再回传一个带有ACK标志的数据包，代表“握手”结束。

TCP的四次挥手

天无不散宴席，TCP连接也是同样。参与一条TCP连接的两个进程任何一方都能终止连接。
17191236.jpg
如图所示，客户应用进程发起一个关闭连接命令，客户TCP相服务器进程发送一个含有特殊的TCP报文段，即这个特殊报文段首部的一个标志位 FIN比特被设置为1。
服务器收到该报文段后，就向对方发送一个确认报文段。
然和，服务器发送自己的终止报文段，其FIN比特被设置为1。
最后，该客户对这个服务器的终止报文段进行确认，并发送一个确认报文段。至此两台主机资源都被释放。


Fighting!

发表于

HTTP_(HyperText Transfer Protocol)_ ，译为超文本传输协议，目前常用HTTP协议版本为HTTP/1.1和HTTP/1.2。
当用户在浏览器输入网址点击回车后，大致发生了以下流程：
20181128024212.png
网页地址URL格式是:

_协议_ :// 域名端口 / _路径_?查询参数/_锚点_

HTTP请求

HTTP请求报文分为三个部分，报文首部/空行/报文主体。

结构 举例
请求行 方法 路径 协议/版本号 GET /s?wd=123 HTTP/1.1
各种首部字段 key:value Connection: keep-alive
Cookie: xxx
空行 空行CR+LF 空行
报文主体 应被发送的数据 例如登录密码

（路径包含查询参数，但不包含锚点）
在Chrome开发者工具中，Network下可以查看请求报文首部和响应报文首部。
20181128024239.png
点击view source可以得到如下显示
20181128024146.png

HTTP请求方法

HTTP的请求动作方法有以下几种

方法 说明 方法 说明
GET 获取资源 POST 传输实体
PUT 传输文件 HEAD 获得报文首部
DELETE 删除文件 OPTIONS 询问支持的方法
TRACE 追踪路径 CONNECT 要求用隧道协议连接代理
LINK 建立和资源之间的联系 UNLINK 断开连接关系

HTTP响应

在上文可以知道，HTTP响应也可以在Chrome开发者工具获取，HTTP响应报文同样分为三个部分，报文首部/空行/报文主体。

结构 举例
状态行 协议/版本号 状态码 解释短语 HTTP/1.1 200 OK
各种首部字段 key:value Content-Type: text/html
Content-Length: 362
空行 空行CR+LF 空行
报文主体 要下载的内容 例如HTML

HTTP状态码

状态码的职责是当客户端向服务端发送请求时，描述返回的请求结果。借助状态码，用户可以知道服务器端是正常处理了需求，还是出现了错误。

类别 原因短语
1xx Information（信息性状态码） 接收的请求正在处理
2xx Success（成功状态码） 请求正常完成
3xx Redirection（重定向状态码） 需要进行附加操作以完成请求
4xx Client Error（客户端错误状态码） 服务器无法处理请求
5xx Server Error（服务器错误状态码） 服务器处理请求出错

例如：200表示成功；301永久重定向；302临时重定向；403客户端不允许访问；404服务器没有请求的资源；500服务器内部错误。

curl命令

在浏览器上我们可以直接输入网址，但在命令行中，同样可以通过curl命令来完成动作。在官方文档对curl的解释是：curl是一种使用其中一种支持的协议从服务器传输数据或向服务器传输数据的工具，curl提供了大量有用的技巧，如代理支持，用户身份验证，FTP上传，HTTP发布，SSL连接，cookie，文件传输恢复等，功能的数量将使你的头旋脑转！

curl语法
curl [options] [URL…]

curl -s -v -H “key: value” – “www.baidu.com"
-s:表示安静模式，不显示进度条；-v：表示显示请求报文和响应报文；-H “key：alue”：往首部字段添加key/alue

curl -X POST -d “xxxx” -s -v -H “key: value” – “www.baidu.com"
-X POST:表示改变请求方法为POST（或者其他）； -d “xxxx”：表示上传xxxx

在这篇文章中，还省略了同样重要复杂的首部字段，分别有通用首部、请求首部、响应首部、实体首部及其他首部字段。

参考文献：

发表于

命令行是每一个开发者都会频繁使用的，与Windows图形界面所不同的是，命令行操作都是靠命令来执行的。下面列举了一些常用的一些命令，例如增删改查。

命令 全写 缩写
创建目录 make directory mkdir
删除 remove rm
移动/重命名 move mv
复制 copy cp
罗列 list ls
改变目录 change directory cd

有些命令后面可以增加参数，达到不同目的。例如ls，表示列出目录下内容，常用参数有ls -a,ls -l,ls -la。ls -a表示列出目录下所有内容，包括以.开头的文件。ls -l表示以长列表列出目录下内容，包括内容权限，用户，修改时间等。如图所示。

在图片中，使用touch命令，touch为触摸意思，当touch的文件不存在时，会创建该文件。当文件存在时，touch会更新文件的修改时间，如上图红框时间不同。
mv这个命令有移动/重命名意思，当不同路径时为移动，相同路径为重命名。

#mv 1.txt ./1/2/操作为把1.txt从当前目录移动到./1/2/目录下；

#mv 1.txt 2.txt操作为把1.txt重命名为2.txt

cat这个命令操作为连接文件并在标准输出上打印。

命令何其多，如果忘了某个命令可以Google。当看到某一个命令不知道为何意时，我们可以用man +命令来获得这个命令的相关参考手册，或者tldr +命令，tldr翻译是太长不读，可以通过npm i -g tldr安装这个工具。当然也可以通过explainshell这个网站来查找命令解释。

特别当解释还有疑惑时，可以点击红框内的source manpages ，可以跳转到官方手册页。

命令行是常用常熟，不用惧怕一开始好像什么都不会，不会就用搜索引擎查找。
Fighting!

发表于

Git是一个分布式版本控制系统，最初是由林纳斯·托瓦兹创作。Github是一个基于Git的项目托管平台。

Git的安装

在Windows，Linux和Mac的安装方法各不相同。

  • Windows上需要安装Git Bash，可直接从官网下载或者各镜像网站下载安装
  • Linux只须运行 sudo apt-get install git 命令即可

  • Mac上需要通过 homebrew 或者 Xcode 安装

    Git的初使用

    在使用Git之前，我们需要先进行一些简单设置，目的是首先表明身份。

    git config –global user.name 你的英文名
    git config –global user.email 你的邮箱
    git config –global push.default matching
    git config –global core.quotepath false
    git config –global core.editor “vim”

    Git初始的几个命令

    git init

    这个命令是用初始化一个空的Git仓库。同时在当前目录下多了一个.git目录，是用于跟踪管理版本库。在初次使用时，请忽略这个目录，不要修改它，避免把Git仓库破坏。
    git add

    这个命令是告诉Git把变动添加到“暂存区”。但是请注意命令后面要有文件或者目录。当正确执行这个明令后，不会有任何显示。
    git commit -v

    这个命令是提交暂存区到仓库区。同时git commit可以接不同参数。

    -v表示提交时显示所有diff信息，即两个文本文件的差异
    -m [message]用来正式提交变动，提交至 .git 仓库
    -a 表示提交工作区自上次commit之后的变化，直接到仓库区，不建议采用这种提交，因为会导致以后的回溯出现混乱

当然了，Git还有很多很重要的内容需要学习，Fighting!

采摘|参考文献：

发表于

大多数计算机使用8位的块，或者字节 (byte) ，作为最小的可寻址的内存单位，而不是访问内存中单独的位。那么最基础的位模式的二进制与常见的十进制 (Decimal) ，十六进制 (Hexadecimal) 之间的转换总结如下。

二进制与十进制转换

二进制转换为十进制

例如将1001012转换为十进制形式如下：

1001012 = [ ( 1 ) × 25 ] + [ ( 0 ) × 24 ] + [ ( 0 ) × 23 ] + [ ( 1 ) × 22 ] + [ ( 0 ) × 2 1] + [ ( 1 ) × 20 ]
1001012 = [ 1 × 32 ] + [ 0 × 16 ] + [ 0 × 8 ] + [ 1 × 4 ] + [ 0 × 2 ] + [ 1 × 1 ]
1001012 = 3710

十进制转换为二进制

整数部分，把十进制转成二进制一直分解至商数为0。读余数从下读到上，即是二进制的整数部分数字。
例如将5910转换为二进制：

59 ÷ 2 = 29 … 1
29 ÷ 2 = 14 … 1
14 ÷ 2 = 7 … 0
7 ÷ 2 = 3 … 1
3 ÷ 2 = 1 … 1
1 ÷ 2 = 0 … 1

得到5910=1110112

十进制与十六进制转换

十六进制在数学中是一种逢16进1的进位制，一般用数字0到9和字母A到F表示，其中A~F表示10~15。
十进制转十六进制依然采余数定理分解，例如将487710转成十六进制：

4877÷16=304….13(D)
304÷16=19….0
19÷16=1….3
1÷16=0….1

这样就计到487710=130D16

负数和浮点数的表示方法

十进制的负数转换为二进制时，采用补码方法来表示。一个数字的补码就是将该数字作比特反码运算，再将结果加1。在补码系统中，一个负数就是用其对应正数的补码来表示。在8位的补码系统中，可以表示的最大正数为28-1-1 = 127，可以表示最小的负数为 -28-1 = -128。

例如用有符号位8位二进制表示的数字5：
0000 0101 (5)
其最高比特为0，因为此数字为正数。用补码系统表示 -5，首先将5的二进制进行反相运算[1变为0，0变为1]：
1111 1010
目前的数字是数字5的反码，因此需要再加1，才是补码：
1111 1011 (-5)

在计算机中，浮点数的存储格式，一般按照标准 IEEE 754。

采摘、参考文献：