JS里的数据类型

发表于 2018-07-14

七种数据类型：number、string、boolean、symbol、undefined、null、object

前面6种，叫基本类型，或简单类型；除了前面6种，其他都是对象；object 为复杂类型，复杂类型由简单类型组成。

1、数字（number）

整数和小数：1 1.1 .1
科学记数法：1.23e2
二进制：0b11
八进制：011（后来 ES5 添加了 0o11 语法）
十六进制：0x11

2、字符串（string）

空字符串：''（长度0）
空格字符串：' '(长度1)

多行字符串：

var s = '12345' +
	'67890' // 无回车符号，长度10，s = '1234567890'
或
var s = '12345
67890' //含回车符号，长度11，1234 和 67890 之间有一个回车

转义符：\

1
2
var s = '12345\
67890' // 长度10，s = '1234567890'

3、布尔（boolean）

只有两个值 true，false
与运算：&&，全真则真。
或运算：||，一真则真。

4、symbol

方应杭：JS 中的 Symbol 是什么？

5、null

6、undefined

注：null 和 undefined 区别：

变量没有被赋值，则返回 undefined
有一个对象 object ，但是没有给值，则返回 null，有一个非对象，没有给值，则返回 undefined

7、对象（object）

object 就是上面几种基本类型（无序地）组合在一起

object 里面可以有 object

var person = {
    name: 'xxx',
    'child': {
        name: 'Jack'
    }, // 最后这个逗号可有可无
}

object 的 key 一律是字符串，不存在其他类型的 key
object[''] 是合法的
object['key'] 可以写作 object.key
注意 object.key 与 object[key] 不同
delete object['key']
'key' in object

css 关于布局

发表于 2018-06-29

一般来说，css布局有好几种，我们来看下比较常见的左右布局和左中右布局。

左右布局

例如相对固定的，给出了百分比，用 `float：left` 。（注意用了`float`，需要在其父元素加上 `clear：both`）。

固定布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style type="text/css">
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            border: 10px solid red;
            width: 800px;
            height: 500px;
        }
        .left,
        .right{
            float: left;
        }
        .left{
            width: 30%;
            height: 100%;
            background: #ddd;
        }
        .right{
            width: 70%;
            height: 100%;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="left">左边div 30%</div>
        <div class="right">右边div 70%</div>
    </div>
</body>
</html>

左边固定宽度，右边自适应宽度，那么右侧的宽度由其内部的文档流决定。

左侧 DIV 设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度
左边固定，右边自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style type="text/css">
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            border: 10px solid red;
            width: 800px;
            height: 500px;
        }
        .left{
            float: left;
            width: 300px;
            height: 100%;
            background: #ddd;
        }
        .right{
            border: 1px solid blue;
            margin-left: 310px;
            height: 100%;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="left">左边div 300px</div>
        <div class="right">右边div 自适应</div>
    </div>
</body>
</html>

左中右布局(中间均为自适应)

一般如下图（`float + margin`）

左中右布局（float + margin）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style type="text/css">
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
        .box{
            border: 10px solid #000;
            width: 1000px;
            height: 500px;
        }
        .header{
            width:100%;
            height: 100px;
            background: yellow;
        }
        .main{
            width: 100%;
            height: 300px;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background: #ddd;
        }
        .right{
            float: right;
            width: 200px;
            height: 100%;
            background: pink;
        }
        .center{
            margin: 0 200px;
            height: 100%;
            background: red;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">header</div>
        <div class="main clearfix">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="center">center</div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

注意：center是放在最后一个div

还有（`float + position`）

左中右布局（float + position）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style type="text/css">
        .box{
            border: 10px solid #000;
            width: 1000px;
            height: 500px;
        }
        .header{
            width:100%;
            height: 100px;
            background: yellow;
        }
        .main{
            position: relative;
            width: 100%;
            height: 300px;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            background: #ddd;
        }
        .center{
            position: absolute;
            left: 200px;
            right: 200px;
            height: 100%;
            background: red;
        }
        .right{
            float: right;
            width: 200px;
            height: 100%;
            background: pink;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">header</div>
        <div class="main">
            <div class="left">left
                <p>float:left</p>
            </div>
            <div class="center">center
                position:absolute;
                left:200px;
                right:200px;
            </div>
            <div class="right">right
                <p>float:right</p>
            </div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

水平居中和垂直居中

水平居中

情况如下

1、行内元素

将行内元素，包裹在一个块级元素的父级，再在设置父级 text-algin：center。

1
2
3

.parent{
	text-algin：center;
}

2、块级元素

1
2
3

div{
	margin: 0 auto;
}

3、多个块级元素

将该元素设置为 display: inline-block,并且将其父级设置text-algin：center。

div{
	display: inline-block;
    vertical-aligin: top;    /*删除底部空隙*/
}
.parent{
	text-algin：center;
    margin: 0 auto;         /*左右居中*/
}

4、一行行内元素

将该元素的高度与其父级的高度设置一样。

.parent{
    height: 100px;
}
a{
    height: 100px;
    line-height: 100px;
}

5、多行行内元素

将其父级设置display: table-cell,vertical-aligin: middle。

.parent {
    width: 100px;
    height: 100px;
    display: table-cell;
    vertical-align:middle;
}

垂直居中

1、有高度和宽度(`width:100px;height:100pxl;`)。

div{
    position: absolute;
    margin: aut0;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

2、有高度和宽度(`width:100px;height:100pxl;`)。

div{
    position: absolute;
    margin: aut0;
    top: 50%;
    left: 50%;
    margin-top: -50px; /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -50px;
}

3、未知高度和宽度。

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

原文

空元素（empty element）和可替换元素（Replaced element）

发表于 2018-05-16

空元素（empty element）

一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。

HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 <audio> 元素嵌套在一个 <hr> 元素里。

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input>的闭标签是无效的 HTML。

在 HTML 中有以下这些空元素：

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

可替换元素（Replaced element）

概述

CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的外部对象。典型的可替换元素有 <img>、 <object>、 <video> 和表单元素，如<textarea>、 <input> 。某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。通过 CSS content 属性来插入的对象被称作匿名可替换元素（anonymous replaced elements）。

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

原文：空元素
 可替换元素

如何安装emmet-vim

发表于 2018-05-15

首先我们将 emmet-vim 下载下来

1	git clone http://github.com/mattn/emmet-vim.git

在安装 emmet-vim 之前，我们先安装 Vundle.vim 插件，详细教程

先把vundle.vim下载下来

1	git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

打开 .vimrc 文件，将下面一段话复制到 .vimrc 文件的最顶端（其中 Plugin ‘mattn/emmet-vim’ ，我们要将加入 emmet-vim 插件）

set nocompatible              " be iMproved, required
filetype off                  " required

" set the runtime path to include Vundle and initialize
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
" alternatively, pass a path where Vundle should install plugins
"call vundle#begin('~/some/path/here')

" let Vundle manage Vundle, required
Plugin 'VundleVim/Vundle.vim'
Plugin 'mattn/emmet-vim'
" The following are examples of different formats supported.
" Keep Plugin commands between vundle#begin/end.
" plugin on GitHub repo
Plugin 'tpope/vim-fugitive'

" plugin from http://vim-scripts.org/vim/scripts.html
" Plugin 'L9'
" Git plugin not hosted on GitHub
Plugin 'git://git.wincent.com/command-t.git'
" git repos on your local machine (i.e. when working on your own plugin)
Plugin 'file:///home/gmarik/path/to/plugin'
" The sparkup vim script is in a subdirectory of this repo called vim.
" Pass the path to set the runtimepath properly.
Plugin 'rstacruz/sparkup', {'rtp': 'vim/'}
" Install L9 and avoid a Naming conflict if you've already installed a
" different version somewhere else.
" Plugin 'ascenator/L9', {'name': 'newL9'}

" All of your Plugins must be added before the following line
call vundle#end()            " required
filetype plugin indent on    " required
" To ignore plugin indent changes, instead use:
"filetype plugin on
"
" Brief help
" :PluginList       - lists configured plugins
" :PluginInstall    - installs plugins; append `!` to update or just :PluginUpdate
" :PluginSearch foo - searches for foo; append `!` to refresh local cache
" :PluginClean      - confirms removal of unused plugins; append `!` to auto-approve removal
"
" see :h vundle for more details or wiki for FAQ
" Put your non-Plugin stuff after this line

Plugin 'mattn/emmet-vim'

输入命令行运行
1
vim +PluginInstall +qall

显示正在运行emmet-vim
vim +PluginInstall +qall

最后我们用 vim 打开一个文件测试一下
先进入 INSERT 模式，输入 html:5 ,按键ctrl+y，加,

结果如下图，则成功安装

几种常见的排序方法

发表于 2018-05-12

排序方法

阅读全文 »

一个简易的 Server

发表于 2018-05-11

自己写一个 Web 服务器

Node.js 服务器

接收请求（只需要一个文件）。

1.新建一个安全的目录cd ~/Desktop; mkdir && cd node-demo
2.新建一个 server.jstouch server.js

点击查看 server.js 代码

  
     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
var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号！\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var path = request.url
  var query = ''
  if(path.indexOf('?') >= 0){ query = path.substring(path.indexOf('?')) }
  var pathNoQuery = parsedUrl.pathname
  var queryObject = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/


  console.log('得到 HTTP 路径\n' + path)
  console.log('查询字符串为\n' + query)
  console.log('不含查询字符串的路径为\n' + pathNoQuery)


  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

3.运行node server.js看到报错，根据报错添加 端口号。
4.成功之后，这个 server 会保持运行。如果你想中断这个 server，按Ctrl c即可。
5.新开一个 Bash 窗口，发出 HTTP 响应，curl http://localhost:你指定的端口/xxx马上可以看到 server 打印出了路径。

6.这说明 server 收到了 curl 发出的请求。

现在让 server 发出响应

1.编辑 server.js，添加如下代码

console.log('得到 HTTP 路径\n' + path)
console.log('查询字符串为\n' + query)
console.log('不含查询字符串的路径为\n' + pathNoQuery)
response.write('Hi')
response.end()

2.中断之前的 server，重新运行 node server 8888。
3.curl http://localhost:8888/xxx，结果如下：
Hi%
4.好了，响应添加成功。
5.使用 curl -s -v -- "http://localhost:8888/xxx"，可以查看完整的请求和响应。

6.或者不操作第5步，用网页打开curl http://localhost:8888/xxx

点击查看 server.js 代码

  
     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
var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if(!port){
  console.log('请指定端口号！\nnode server.js 8888 这样不会吗？')
  process.exit(1)
}

var server = http.createServer(function(request, response){
  var parsedUrl = url.parse(request.url, true)
  var path = request.url
  var query = ''
  if(path.indexOf('?') >= 0){ query = path.substring(path.indexOf('?')) }
  var pathNoQuery = parsedUrl.pathname
  var queryObject = parsedUrl.query
  var method = request.method

  /******** 从这里开始看，上面不要看 ************/


  console.log('得到 HTTP 路径\n' + path)
  if(path == '/'){
    response.write('Hi\n')
    response.end()
  }else if(path == '/index'){
    response.setHeader('Content-Type','text/html; charset=utf8') //设置网页的编码格式 html，utf8
    response.write('<!DOCTYPE>\n<html><head></head><body><h1>你好</h1><h1>Hello Node.js</h1></body></html>')
    response.end()
  }else{
    response.statusCode = 404
    response.end()
  }
  console.log('查询字符串为\n' + query)
  console.log('不含查询字符串的路径为\n' + pathNoQuery)


  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

初学HTTP

发表于 2018-05-10

HTTP 的作用就是指导浏览器和服务器如何进行沟通。

那么服务器与浏览器是怎么交互的

浏览器先发起请求
服务器在 80 端口接收请求
服务器就会响应浏览器，返回内容给浏览器
浏览器就将服务器返回的内容下载下来

请求示例

1	curl -s -v -H "zzz: xxx" -- "https://www.baidu.com"

请求的内容如下：

GET

1	curl -X POST -s -v -H "zzz: xxx" -- "https://www.baidu.com"

请求的内容如下：

POST

1	curl -X POST -d "1234567890" -s -v -H "zzz: xxx" -- "https://www.baidu.com"

请求的内容如下：

POST

现在总结一下以上的格式：

1 动词路径协议/版本
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3
4 要上传的数据

请求最多包含四部分，最少包含三部分。（也就是说第四部分可以为空）
第三部分永远都是一个回车（\n）
动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
这里的路径包括「查询参数」，但不包括「锚点」
如果你没有写路径，那么路径默认为 /
第 2 部分中的 Content-Type 标注了第 4 部分的格式

用 chrome 发请求

打开 Network
地址栏输入网址
在 Network 点击，查看 request，点击「view source」
终于点了？可以看到请求的前三部分了
如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到

如上图，可以看出响应的格式：

1 协议/版本号状态码状态解释
2 Key1: value1
2 Key2: value2
2 Content-Length: 17931
2 Content-Type: text/html
3
4 要下载的内容

其中状态码，指的是服务器对浏览器要说的话：

1xx 不常用
2xx 表示成功
3xx 表示滚吧
4xx 表示你丫错了
5xx 表示好吧，我错了

状态解释没什么用

第 2 部分中的 Content-Type 标注了第 4 部分的格式

第 2 部分中的 Content-Type 遵循 MIME 规范

用 chrome 查看响应

打开 Network
地址栏输入网址
选中第一个响应，查看 Response Headers，点击「view source」
你会看到响应的前两部分
查看 Response 或者 Preview，你会看到响应的第 4 部分

git入门教程

发表于 2018-05-06

作为新手，学习git，稍稍总结了一点

比如，我们需要把一个本地的目录放入git里面，我们将需要在该目录中创造出一个git的环境。

首先，就是进入该目录，可以通过 pwd 看到当前的位置，

第二步，通过 git init 命令把这个目录变成git管理的仓库(可以创建一个空的git存储库或重新初始化现有的存储库)。：

1	$ git init

git init

这时候你 ls -ah 命令就能看见一个 .git 的隐藏目录，这样git的仓库就建好了

接着，你在此目录中又编写了一个 file1.html 文件，这时候你想要将该文件放入git仓库，

这时候就 git add ，把文件添加到仓库，放入暂存区：

1	$ git add file1.html

git add

这时候将没有任何提示，添加成功。

紧接着，用 git commit -m “第一次提交”，把文件正式提交到仓库：

1	$ git commit -m "第一次提交"

git commit -m "第一次提交"

于是就将文件成功提交到了仓库。

下面我们修改一次 file1.html 文件里面的内容，然后保存：

hello

每次修改，我们都需要 git add 一下，这次 git commit -v ，把文件正式提交到仓库，并且提交时显示所有diff信息：

git commit -v

我们在虚线分割线上，写我们需要备注的信息：修改file1.html，保存退出后，可以看到：

最后，git push推上git仓库！（如果多人合作，git push 之前，一般需要先git pull）

ok！

git 常见问题

Git push的时候卡住解决方法

用git push到远程repository的时候一直卡着

类似下图

解决方法

百度到的解决方法是：

添加sendpack.sideband属性并置为false

全局的：git config –global sendpack.sideband false

仓库的：git config –local sendpack.sideband false

通过git config –local -l 查看仓库级配置，可以看到有sendpack.sideband这一项并且是置为false的。
git config --local -l

如果并没有什么用。。

最后解决的是：

先git pull 虽然当前明明已经是up-to-date

再git push 就没问题了

modified: xxx(modified content, untracked content)

提交代码到服务器后发现git clone下来的有些目录是空的。

查看服务器的目录果然是空的。看本季git add . 后查看git status
git config --local -l

modified: xxx(modified content, untracked content)
大概意思是xxx目录没有被跟踪。那自然push上去的时候是空的了

解决办法：

后来发现这主要是 xxx 目录下有一个.git目录，可能是被人给你这个目录的时候里面有了.git目录。删除.git目录。重新git add .就可以了。

ls,cat,mv,touch一些常用的命令

发表于 2018-05-05

ls

命令用来显示目标列表，在Linux中是使用率较高的命令。ls命令的输出信息可以进行彩色加亮显示，以分区不同类型文件。

每行列出一个文件:

$ ls -1

列出所有文件，包括隐藏文件:

ls -a

所有文件的长格式列表(权限、所有权、大小和修改日期):

ls -la

使用人类可读单元显示尺寸的长格式列表(KB, MB, GB):

ls -lh

长格式列表按大小排序(降序):

ls -lS

所有文件的长格式列表，按修改日期排序:

ls -ltr

cat

一般用于文件内容的读取打印，以及文件的合并连接显示。

将文件的内容输出:

cat file

将文件所有的行号和内容输出:

1	cat -n file

创建一个文件，但不能编辑已有文件：

1	cat > file

将多个文件合并为一个文件:

1	cat file1 file2 > file

将多个文件附加到目标文件:

1	cat file1 file2 >> target_file

把 file1 的内容和行号输入到 file2 中

1	cat -n file1 > file2

将file1 file2两个文件加上行号输入添加到 target_file 文档中（空行是不加编号的）

1	cat -b file1 file2 > target_file

mv

移动或重命名文件和目录。

文件改名，将 file1 文件名改为 file2 文件名：

1	mv file1 file2

移动文件，将 file1 移动到 file2 目录中：

1	mv file1 file2

将 file1 文件内容覆盖在 file2 文件内容中，并且不要提示确认（file1文件没有了）:

1	mv -f file1 file2

将 file1 文件移到指定 file2 目录中，如果 file2 目录中已有同名文件，则先询问是否覆盖旧文件:

1	mv -i file1 file2

touch

命令可更改文档或目录的日期时间，包括存取时间和更改时间

创建不存在的文件

1	touch test.txt

更新testa.txt的时间和test.txt时间戳相同

1	touch -r test.txt testa.txt

设定文件的时间戳

1	touch -t 201709160906.50 testc.txt

第二篇博客

发表于 2018-05-05

第二篇博客内容

七种数据类型：number、string、boolean、symbol、undefined、null、object

前面6种，叫 基本类型 ，或简单类型；除了前面6种，其他都是对象；object 为 复杂类型，复杂类型 由 简单类型组成。

1、数字（number）

2、字符串（string）

3、布尔（boolean）

4、symbol

5、null

6、undefined

7、对象（object）

左右布局

例如相对固定的，给出了百分比，用 float：left 。（注意用了float，需要在其父元素加上 clear：both）。

左边固定宽度，右边自适应宽度，那么右侧的宽度由其内部的文档流决定。

左中右布局(中间均为自适应)

一般如下图（float + margin）

还有（float + position）

水平居中和垂直居中

水平居中

1、行内元素

2、块级元素

3、多个块级元素

4、一行行内元素

5、多行行内元素

垂直居中

1、有 高度 和 宽度(width:100px;height:100pxl;)。

2、有 高度 和 宽度(width:100px;height:100pxl;)。

3、未知 高度 和 宽度。

空元素（empty element）

可替换元素（Replaced element）

概述

Node.js 服务器

接收请求（只需要一个文件）。

现在让 server 发出响应

HTTP 的作用就是指导浏览器和服务器如何进行沟通。

那么服务器与浏览器是怎么交互的

请求示例

现在总结一下以上的格式：

用 chrome 发请求

如上图，可以看出响应的格式：

其中状态码，指的是服务器对浏览器要说的话：

状态解释没什么用

第 2 部分中的 Content-Type 标注了第 4 部分的格式

第 2 部分中的 Content-Type 遵循 MIME 规范

用 chrome 查看响应

ok！

git 常见问题

Git push的时候卡住解决方法

解决方法

最后解决的是：

modified: xxx(modified content, untracked content)

解决办法：

ls

命令用来显示目标列表，在Linux中是使用率较高的命令。ls命令的输出信息可以进行彩色加亮显示，以分区不同类型 文件。

每行列出一个文件:

列出所有文件，包括隐藏文件:

所有文件的长格式列表(权限、所有权、大小和修改日期):

使用人类可读单元显示尺寸的长格式列表(KB, MB, GB):

长格式列表按大小排序(降序):

所有文件的长格式列表，按修改日期排序:

cat

一般用于文件内容的读取打印，以及文件的合并连接显示。

将文件的内容输出:

将文件所有的行号和内容输出:

创建一个文件，但不能编辑已有文件：

将多个文件合并为一个文件:

将多个文件附加到目标文件:

把 file1 的内容和行号输入到 file2 中

将file1 file2两个文件加上行号输入添加到 target_file 文档中（空行是不加编号的）

mv

移动或重命名文件和目录。

文件改名，将 file1 文件名改为 file2 文件名：

移动文件，将 file1 移动到 file2 目录中：

将 file1 文件内容覆盖在 file2 文件内容中，并且不要提示确认（file1文件没有了）:

将 file1 文件移到指定 file2 目录中，如果 file2 目录中已有同名文件，则先询问是否覆盖旧文件:

touch

命令可更改文档或目录的日期时间，包括存取时间和更改时间

创建不存在的文件

更新testa.txt的时间和test.txt时间戳相同

设定文件的时间戳

前面6种，叫基本类型，或简单类型；除了前面6种，其他都是对象；object 为复杂类型，复杂类型由简单类型组成。

例如相对固定的，给出了百分比，用 `float：left` 。（注意用了`float`，需要在其父元素加上 `clear：both`）。

一般如下图（`float + margin`）

还有（`float + position`）

1、有高度和宽度(`width:100px;height:100pxl;`)。

2、有高度和宽度(`width:100px;height:100pxl;`)。

3、未知高度和宽度。

命令用来显示目标列表，在Linux中是使用率较高的命令。ls命令的输出信息可以进行彩色加亮显示，以分区不同类型文件。