HTML

Posted on 2018-07-13

HTML

W3C

历史

万维网联盟（W3C）由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心（CERN）后成立。
该组织试图通过W3C制定的新标准来促进业界成员间的兼容性和协议。不兼容的HTML版本由不同的供应商提供，导致网页显示方式不一致。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

标准

为解决网络应用中不同平台、技术和开发者带来的不兼容问题，保障网络信息的顺利和完整流通，万维网联盟制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。

但是，W3C制定的网络标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

-  -W3C推荐标准
CSS：层叠样式表
DOM：文档对象模型
HTML：超文本标记语言
RDF：资源描述框架
SMIL：同步多媒体集成语言
SVG：可缩放向量图形
WAI
Widgets
XHTML：可扩展超文本标记语言
XML：可扩展标记语言

MDN

MDN Web Docs 是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站
该项目始于2005年，最初由Mozilla公司员工Deb Richardson领导。自2006年以来，文档工作由Eric Shepherd领导
- 关于前端的一些技术都可以先从MDN中搜索了解，比如一些HTML标签的使用，CSS属性的使用等

HTML

MDN链接

HTML All Tags ,MDN

空标签

什么是空标签？

1
2

HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 <audio> 元素嵌套在一个 <hr> 元素里。
在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的 HTML。

理解：一个没有闭标签(或者说闭标签加了无效) 或者 HTML、SVG、MathML规范中没有定义标签能包含哪些内容的标签就是空标签。

HTML中的空标签

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

可替换标签？

什么是可替换标签？

可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

常见的几个可替换标签

1	<img>、<input>、<textarea>、<select>、<object>

node.js Server

Posted on 2018-07-10

node.js Server

脚本建Server

用什么脚本建服务器

用脚本就可以提供 HTTP 服务，不管是 Bash 脚本还是 Node.js 脚本都可以。
由于 Bash 脚本的语法实在是反人类，而且我们今后要学习 JavaScript，所以我们先用 Node.js 脚本试试水吧。
建成的服务器就是我们的电脑，没钱买服务器，穷逼的我们就用电脑做服务器实验吧，哈哈哈

创建node.js Server脚本

用bush命令操作，进个自己认为安全好用的目录
创建文件 touch server.js ,将以下内容加入：


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 == '/style.css'){
    response.setHeader('Content-Type', 'text/css; charset=utf-8')
    response.write('body{background-color: #ddd;}h1{color: red;}p{color: green;}')
    response.end()
  }else if(path == '/main.js'){
    response.setHeader('Content-Type', 'text/javascript; charset=utf-8')
    response.write('alert("这是JS执行的")')
    response.end()
  }else if(path == '/'){
    response.setHeader('Content-Type', 'text/html; charset=utf-8')
    response.write('<!DOCTYPE>\n<html>'  + 
      '<head><link rel="stylesheet" href="/style.css">' +
      '</head><body>'  +
      '<h1>你好</h1>' +
      '<p>这里是你访问到的内容，字体的颜色为你访问到的css添加</p>'+
      '<script src="/main.js"></script>' +
      '</body></html>')
    response.end()
  }else{
    response.statusCode = 404
    response.end()
  }

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

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

运行 node server.js ,如果开始创建文件没有加后缀就运行 node server ,会看到报错

没有监听端口那我们就 node server 8888
成功之后，这个 server 会保持运行(相当于服务器开始运行了，可以接受请求了)，无法退出
- 如果你想「中断」这个 server，按 Ctrl + C 即可（C 就是 Cancel 的意思）
- 中断后你才能输入其他命令
- 我建议你把这个 server 放在那里别动，新开一个 Bash 窗口，完成下面的教程

服务器当前的功能

这个服务器目前只有一个功能，那就是打印出路径
发出响应，返回一个页面

发送请求

使用bush 或者浏览器向我们这个服务器发起请求，那么服务器的地址是什么？

服务器的地址当然就是我们的本地地址啦，http://127.0.0.1 或者 http://localhost 发起访问：报错

我们还是忘记了，http 访问必须 IP + 端口号，所以，我们重新访问 http://127.0.0.1:8888

服务器响应

可以看到服务器响应给我们了一个页面，有HTML内容的显示，css样式的加持，JS动态的弹窗

同时服务器打印出请求的路径

我们需要知道的

response.setHeader('Content-Type', 'text/css; charset=utf-8')  //设置响应内容的类型，以及响应内容的编码方式，返回                                                                  //css文件 
response.setHeader('Content-Type', 'text/javascript; charset=utf-8') //返回js文件
response.setHeader('Content-Type', 'text/html; charset=utf-8')     //返回html文件
 response.statusCode = 404                   //返回状态码
response.write('Hi')          //响应内容
response.end()             //响应结束

HTTP访问要素:IP与端口

Posted on 2018-07-08

HTTP访问要素:IP与端口

HTTP

HTTP 协议的底层其实是由 TCP 协议和 IP 协议（简称 TCP/IP）构建的。

TCP

TCP : 传输控制协议（Transmission Control Protocol）
本文重点不讲TCP，可以了解下面两条概念：

TCP 和 UDP 的区别是什么?
简答：
TCP ：可靠、面向连接、相对UDP较慢。
UDP ：不可靠、不面向连接、相对TCP较快。

TCP 的三次握手指的是什么？

1. 客户端：我要连接你了，可以吗
2. 服务端：嗯，我准备好了，连接我吧
3. 客户端：那我连接你咯。
4. 开始后面步骤

IP

IP ：网络协议（英语：Internet Protocol）

内网IP ：

假如家里有一台路由器，手机电脑IPAD等都连接路由器，而路由器给这些设备分配的IP地址就是内网IP地址。
一般内网IP格式为192.168.xxx.xxx 。
而通常路由器分给自己的内网IP是192.168.1.1 。如果不是就说明这个路由器的设置不是大众化的这种！
所以路由分给手机的内网IP可能为192.168.1.2 ，分给电脑的内网IP可能为192.168.1.3

外网IP ：

如果路由器连上电信的服务器，那么路由器就会有一个外网IP 。
外网IP格式：暂时理解为只要不是192.168开头的就都是外网IP ，可能理解有误。
如果路由器重启，则很有可能被重新分配一个外网IP ，也就是说路由器没有固定的外网IP。

内外网的访问

内网可以直接访问外网么？
答案是不能，内网IP访问外网必须要通过路由器来中转，路由器只有连上了电信服务器，分配有外网IP才能访问外网。
路由器的作用是什么，什么是路由？
比如说我们手机要访问baidu.com ，必须先经过路由中转然后路由外网IP对baidu.com 发送请求，百度收到后对路由响应一个网页或者数据之类的东东。
路由器接收到 baidu.com 的页面后，把页面发送给你的电脑或手机。路由器知道如何给这些信息指路，路由器就是一个指路人，这就是「路由」两个字的来历。
路，就是「必由之路」中的路。由，就是「必由之路」中的由（由是经过、缘由的意思）。所有的信息都要经过路由器，然后被指向一条它该去的路。
也就是说内网和外网就像两个隔绝的空间，无法互通，唯一的联通点就是路由器（因为路由器既有外网 IP 也有内网 IP），所以路由器有时候也被叫做「网关」，这个「关」是「一夫当关，万夫莫开」的「关」。如果路由器到电信的连接中断了，那么内网中所有的设备也就无法上网了。（这很好理解，相当于唯一一条出去的路断了）
内网能访问内网么？
内网中的设备可以互相访问（比如你可以用电脑或手机进入 http://192.168.1.1 来查看你的路由器），但是不能直接访问外网，内网设备想要访问外网，就必须经过路由器中转。
外网能访问外网么？
外网中的设备可以互相访问（比如 qq.com 可以把首页发送给你的路由器，你的路由器有外网 IP），但是外网中的设备无法访问你的内网设备（这很好理解，内网是一个封闭的网络，外人进不来，所以实际上 qq.com 无法直接把首页放送给你的电脑和手机

本地IP

这是一个特殊的IP ，代表着设备自己的IP。
默认情况下，hosts 文件里会有一行127.0.0.1 localhost，意思就是 localhost 指向 127.0.0.1，所以 localhost 也表示设备自己。不信你 ping localhost 试试，会发现实际上是在 ping 127.0.0.1

特殊IP

IP：0.0.0.0，它不表示任何设备。这个 IP 不同的地方含义不同。

端口（Port）

你想要访问一个设备（前提是你使用的是 TCP 或 UDP 协议。还记得吗，HTTP 就使用了 TCP），只指定 IP 是不够的，必须指定端口。
端口其实就是一个编号，并不是一种硬件。
一个服务器（硬件）不一定只提供一种服务，比如一个服务器既提供 HTTP 服务，又提供 FTP 服务，还提供 SMTP 服务（邮件服务），那么只用一个 IP 是无法告诉服务器你想要使用哪种服务。
所以这里有一个重要的原则：一个端口对应一个服务。
比如

要提供 HTTP 服务你最好使用 80 端口（能不能使用别的端口？可以，不过不建议你违反约定）
要提供 HTTPS 服务你最好使用 443 端口（能不能使用别的端口？可以，不过不建议你违反约定）
要提供 FTP 服务你最好使用 21 端口（能不能使用别的端口？可以，不过不建议你违反约定）

我怎么知道应该使用什么端口？

维基百科把 0 到 1023 号端口对应的服务都告诉你了，点进去看看吧。

一共有多少端口？

每个机器一共有 65535（2的16次方减1）个端口（这是协议规定的）。不过这些端口的使用由一些规定：

0 到 1023（2的10次方减1）号端口是留给系统使用的，你只有拥有了管理员权限后，才能使用这 1024 个端口。
其他端口可以给普通用户使用
如果一个端口正在提供服务，也就是被占用了，那么就不能再使用这个端口。除非你先停掉正在占用这个端口的服务。以后你们会经常遇到这个问题。

TCP/IP总结

上面都是 TCP/IP 相关的知识，如果你记不住，就记住下面这句话：

使用 HTTP 协议访问另一个 IP 时，比如同时提供 IP 和端口号，缺一不可。

那么问题来了

我访问 http://qq.com 时并没有提供端口号，为什么我依然可以访问

答：因为浏览器帮你加了默认端口号 80。

HTTP

Posted on 2018-07-07

HTTP

URL

URL 俗称网址，也就是统一资源定位符/定位地址

URL 的组成

https://www.baidu.com/s?wd=hello&rsv_spt=1#1

https 为超文本传输协议，两个电脑之间传输内容的协议。也就是说前面的http 或者 https指的是协议

www.baidu.com 域名

/s 路径，这个路径非计算机中文件路径。 https://www.baidu.com 这个网址默认会有一个 /的路径

wd=hello&rsv_spt=1 查询参数，可以点击 https://www.baidu.com/s?wd=hi&rsv_spt=1#1 会发现变成了在百度hi的内容

#1 锚点，将网站#1 变为 #3 ，点击 https://www.baidu.com/s?wd=hello&rsv_spt=1#3 会发现直接显示在第一行的是该搜索项网页的第三个链接，多次修改#后面的数字就会明白了

:80 其实这个网址还有一个端口号，http协议的服务端口号就是对应的80。https://www.baidu.com/s?wd=hello&rsv_spt=1#1:80 这个网址的效果和 https://www.baidu.com/s?wd=hello&rsv_spt=1#1是一样的。

DNS

网域名称系统（DNS，Domain Name System，有时也简称为域名）是因特网的一项核心服务，它作为可以将域名和IP
地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP地址数串。

例如，www.wikipedia.org是一个域名，和IP地址208.80.152.2相对应。DNS就像是一个自动的电话号码簿，我们可以
直接拨打wikipedia的名字来代替电话号码（IP地址）。我们直接调用网站的名字以后，DNS就会将便于人类使用的名字
（如www.wikipedia.org）转化成便于机器识别的IP地址（如208.80.152.2）。[1]

简单理解就是，DNS 可以把域名转换为IP地址

两种查看域名对应IP地址的方法

1 2	nslookup baidu.com ping baidu.com

请求

请求的格式是：

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 要上传的数据

###分析请求

GET / HTTP/1.1                        动词 路径 协议/版本
Host: www.baidu.com               key1
Connection: keep-alive             key2
Cache-Control: max-age=0      key3
...

请求最多包含四部分，最少包含三部分。（也就是说第四部分可以为空）
第三部分永远都是一个回车（\n）
动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
i. GET就是获取的意思
ii. POST 就是上传的意思，上传信息会有一个content-length ：上传的数据长度，然后第四部分会有上传信息的内容
iii.
这里的路径包括「查询参数」，但不包括「锚点」
如果你没有写路径，那么路径默认为 /
第 2 部分中的 Content-Type 标注了第 4 部分的格式
如果有请求的第四部分，那么在 FormData 或 Payload 里面可以看到

响应

有请求就有响应

GET 请求和 POST 请求对应的响应可以一样，也可以不一样
响应的第四部分可以很长很长很长

HTTP/1.1 200 OK
Bdpagetype: 2
Bdqid: 0x8f2fe8e100013131
Bduserid: 941701595
Cache-Control: private
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Mon, 12 Mar 2018 14:49:48 GMT
...

响应的格式：

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

状态码要背，是服务器对浏览器说的话 ,每个记到6就好了，想多记可以搜HTTP状态码，看维基百科
- 1xx 不常用
  
  这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送1xx响应。[4] 这些状态码代表的响应都是信息性的，标示客户应该采取的其他行动。
- 2xx 表示成功
  
  200 OK
  请求已成功，请求所希望的响应头或数据体将随此响应返回。
  201 Created
  请求已经被实现，而且有一个新的资源已经依据请求的需要而创建，且其URI已经随Location头信息返回。
  202 Accepted
  服务器已接受请求，但尚未处理。
  203 Non-Authoritative Information（自HTTP / 1.1起
  服务器是一个转换代理服务器（transforming proxy，例如网络加速器），以200 OK状态码为起源，但回应了原始响应的修改版本。
  204 No Content
  服务器成功处理了请求，没有返回任何内容
  205 Reset Content
  服务器成功处理了请求，但没有返回任何内容。与204响应不同，此响应要求请求者重置文档视图。
  206 Partial Content
  服务器已经成功处理了部分GET请求。
- 3xx 表示滚吧
  
  300 Multiple Choices
  被请求的资源有一系列可供选择的回馈信息，每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。
  301 Moved Permanently:
  被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。
  302 Found
  要求客户端执行临时重定向 ,服务器临时换了个地址
  303 See Other
  对应当前请求的响应可以在另一个 URI上被找到，当响应于POST（或PUT / DELETE）接收到响应时，客户端应该假定服务器已经收到数据，并且应该使用单独的GET消息发出重定向。
  304 Not Modified
  表示资源未被修改，因为请求头指定的版本If-Modified-Since或If-None-Match。在这种情况下，由于客户端仍然具有以前下载的副本，因此不需要重新传输资源。
  305 Use Proxy
  被请求的资源必须通过指定的代理才能被访问。
  306 Switch Proxy
  在最新版的规范中，306状态码已经不再被使用。
- 4xx 表示你丫错了
  
  400 Bad Request
  由于明显的客户端错误（例如，格式错误的请求语法，太大的大小，无效的请求消息或欺骗性路由请求），服务器不能或不会处理该请求。
  401 Unauthorized
  类似于403 Forbidden，401语义即“未认证”，即用户没有必要的凭据。[32]该状态码表示当前请求需要用户验证。
  402 Payment Required
  该状态码是为了将来可能的需求而预留的。
  403 Forbidden
  服务器已经理解请求，但是拒绝执行它。
  404 Not Found
  请求失败，请求所希望得到的资源未被在服务器上发现，但允许用户的后续请求。
  405 Method Not Allowed
  请求行中指定的请求方法不能被用于请求相应的资源。
  406 Not Acceptable
  请求的资源的内容特性无法满足请求头中的条件，因而无法生成响应实体，该请求不可接受。
- 5xx 表示好吧，我错了
  
  500 Internal Server Error
  通用错误消息，服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。没有给出具体错误信息。
  501 Not Implemented
  服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。
  502 Bad Gateway
  作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
  503 Service Unavailable
  由于临时的服务器维护或者过载，服务器当前无法处理请求。
  504 Gateway Timeout
  作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。
  505 HTTP Version Not Supported
  服务器不支持，或者拒绝支持在请求中使用的HTTP版本。
  506 Variant Also Negotiates（RFC 2295）
  由《透明内容协商协议》（RFC 2295）扩展，代表服务器存在内部配置错误，[64]被请求的协商变元资源被配置为在透明内容协商中使用自己，因此在一个协商处理中不是一个合适的重点。
状态解释没什么用
第 2 部分中的 Content-Type 标注了第 4 部分的格式
第 2 部分中的 Content-Type 遵循 MIME 规范
- 查看 Response 或者 Preview，你会看到响应的第 4 部分

脚本

Posted on 2018-07-05

脚本

脚本是什么

1
2
3

公馆一室内
王妈：（小心翼翼地）小姐，您还是得注意身子，就吃点东西吧。
鸡小姐：（把碗砸在地上）不吃，我就是不吃。

脚本主要由人物对话和舞台提示组成。演员和道具组只需要按照脚本说的做即可。

这里看明白了，也就明白脚本是什么了：

脚本就是运行时按照已经写好，写在里面的内容既定运行。而这些内容会有一些动作上的指令完成，下面我们来学习一下bash脚本，与node脚本。

bash脚本

普通bash脚本

1
2
3

mkdir ~/local
cd ~/local
touch demo.sh

编辑demo.sh内容如下：

mkdir demo
cd demo
mkdir css js
touch index.html css/style.css js/main.js
exit

运行demo.sh: 输入sh ~/local/demo.sh会执行以下操作

… 依次执行

bash脚本语言

参数

编辑demo.sh内容如下：

mkdir $1
cd $1
mkdir css js
touch index.html css/style.css js/main.js
exit

$1 表示你传的第一个参数。
此处不懂可以谷歌或百度： bash+first+param or bash 第一个参数
运行demo.sh: 输入sh ~/local/demo.sh xxx会执行以下操作

… 依次执行

判断

判断目录是否存在：编辑demo.sh内容如下：

if [ -d $1 ]; then
  echo 'error: dir exists'
  exit 0
else
  mkdir $1
  cd $1
  mkdir css js
  touch index.html css/style.css js/main.js
  echo 'success'
  exit 1
fi

运行demo.sh: 输入sh ~/local/demo.sh xxx会执行以下操作

判断xxx目录是否存在
如果存在就exit退出
如果不存在创建xxx目录
进入xxx目录
… 依次执行

bash语言语法很奇怪，很严格 -d $1判断目录是否存在，谷歌搜索，代码最好复制粘贴，否则会容易出现问题

可以有返回值 exit 0 ， exit 1
sh ~/local/demo && echo '创建成功' 当返回1时则打印创建成功

PATH

cd ~/local; pwd 得到 local 的绝对路径
创建 ~/.bashrc：touch ~/.bashrc
编辑 ~/.bashrc：start ~/.bashrc，在最后一行添加 export PATH="local的绝对路径:$PATH" ~/ 计算机不认识，需要pwd得到的local绝对路径填进去，注意路径符为 /
文件后缀的作用：毫无作用
你以为一个文件以 .exe 结尾就一定可以双击吗？你以为一个文件以 .png 结尾就一定是图片吗？图样图森破！文件的后缀只是确定运行平台的
所以我们去掉文件后缀
mv ~/local/demo.sh ~/local/demo
PATH 的作用
你每次在 Bash 里面输入一个命令时（比如 ls、cp、demo），Bash 都会去 PATH 列表里面寻找对应的文件，如果找到了就执行。所以我们把脚本都放在~/local目录中，而local绝对路径又放在PATH环境变量中，每次运行demo xxx就会自动去path中寻找命令
使用 type demo 可以看到寻找过程
使用 which demo 可以看到寻找结果

最后我们可以直接使用demo xxx去执行脚本了

Node 脚本

上面我们写的脚本叫做 Bash Script（Bash脚本）。
JS 的全称叫做 JavaScript（Java脚本），虽然 JS 和 Java 没什么关系，但是 JS 依然是一种脚本。
我们在 Bash 命令行里输入 Bash 命令，也可以在 Node.js 命令行里输入 JS 命令（Ctrl + D 退出）
Bash 脚本能做的事情，JS 脚本也能做。(sh demo.sh 对应 node demo.js）

用 JS 切换目录

console.log(process.cwd()) // 打印当前目录
// process.chdir('~/Desktop'); // 这句话不行的，因为 JS 不认识 ~ 目录
process.chdir("/Users/frank/Desktop")
console.log(process.cwd()) // 打印当前目录

console.log 就相当于 echo

用 JS 脚本创建目录

Google nodejs create dir

文档：https://nodejs.org/api/fs.html#fs_fs_mkdirsync_path_mode

1 2	let fs = require("fs") fs.mkdirSync("demo")

用 JS 脚本创建文件

Google nodejs create file

文档： https://nodejs.org/api/fs.html#fs_fs_writefilesync_file_data_options

1 2	let fs = require('fs') fs.writeFileSync("./index.html", "")

用 JS 脚本来重写 demo.sh

创建 ~/local/jsdemo.js，内容如下

var fs = require('fs')

var dirName = process.argv[2] // 你传的参数是从第 2 个开始的

fs.mkdirSync("./" + dirName) // mkdir $1
process.chdir("./" + dirName) // cd $1
fs.mkdirSync('css') // mkdir css
fs.mkdirSync('js') // mkdir js

fs.writeFileSync("./index.html", "")
fs.writeFileSync("css/style.css", "")
fs.writeFileSync("./js/main.js", "")

process.exit(0)

cd ~/Desktop
node ~/local/jsdemo.js zzz，就可以看到 zzz 目录创建成功了

shebang

我们每次执行 ~/local/jsdemo.js 都要用 node 来执行，能不能做到不加 node 也能执行呢（也就是指定执行环境），可以，在 jsdemo.js 第一行加上这一句即可：

1	#!/usr/bin/env node

（以下操作在 Windows 上可能失败，失败了就算了）

然后你就可以直接用 ~/local/jsdemo.js zzz 了（省得输入 node 了）。
如果你已经把 ~/local 加入了 PATH，那么甚至可以直接输入 jsdemo.js zzz 来执行。
如果你再把 jsdemo.js 的后缀 .js 去掉，就可以直接 jsdemo zzz 了。

注意，你每次执行前最好删掉 zzz 目录，以免发生冲突。

总结

脚本就是给机器一行一行执行的文本
Bash 脚本有 Bash 脚本的语法，Node.js 脚本有 JS 语法
不管是那种脚本，能实现的功能都差不多，只是语法不同
Bash 脚本的语法挺奇葩的，比如 $1 $# 等符号
不用特别去学 Bash 脚本的用法，遇到不会的就 Google
不用特别去学 Node.js 脚本的用法，遇到不会的就 Google
写代码最大的问题就是「抄错了」

多写了一个空格
少写了一个空格
单词拼错了
没有加分号
多加了分号

命令行学习与github学习总结

Posted on 2018-07-03

命令行学习与github学习总结

命令行的总结

哪些系统提供了命令行？

windows 命令提示符和 git bush
Linux （ubuntu）终端
unix （macos）终端

目前前端技术使用命令行的框架及工具

- Gulp
- webpack
- SASS
- node.js
- vue
- react
- angular
- 这就是我们不得不学习命令行的原因

基本概念

文件夹就是目录
~ ：用户目录
/ : 代表整个硬盘的意思，后面出现就是分界线的意思
. : 表示当前目录
.. ：表示父目录
$ : 提示可以输入命令

常用命令使用方法

cd 进入一个目录 cd ../ 回上一个目录
pwd 显示当前目录
mkdir 创建目录 mkdir demo-1
mkdir -p 目录路径 mkdir -p demo-1/demo-2/demo-3 如果有特殊字符需要加引号 “demo-1/demo-2/demo-3”
whoami 用户名，我是谁

ls xxx 查看路径
ls 查看当前目录的所有没有隐藏的文件
ls -a 查看所有文件
ls -l 查看更多信息
ls -al 查看所有文件更多信息

echo "hello" > 1.txt 重定向至1.txt hello 会创建文件
echo "0.0" >> 1.txt 追加内容至 hello 0.0
echo "123" >! 1.txt 强制重定向至（windows不支持会创建一个！文件） 123

touch 也可以创建文件但是不能指定内容会更新文件创建的时间

cp 复制文件
cp -r 复制目录

mv 重命名或移动文件

rm 删除文件
rm -rf 强制删除目录

tree 查看目录结构（windows不支持）

ln-s 建立软链接（windows 不支持）

curl-l https://code.jquery.com/jquery-3.3.1.min.js > jq.html 下载文件

wget -p -H -e robots=off https://www.baidu.com/ 拷贝一个网页（windows不支持）

df -kh 查看磁盘占用
du -sh 当前目录大小
du -h 各文件大小

cat 查看文件内容

ginhub学习总结

本地仓库操作命令

git init，初始化本地仓库 .git
git status -sb，显示当前所有文件的状态
git add 文件路径，用来将变动加到暂存区
git commit -m “信息”，用来正式提交变动，提交至 .git 仓库
如果有新的变动，我们只需要依次执行 git add xxx 和 git commit -m 'xxx' 两个命令即可。别看本教程废话那么多，其实就这一句有用！先 add 再 commit，行了，你学会 git 了。
git log 查看变更历史

本地库上传GitHub

当你在GitHub上创建一个空仓库时，就会出现上传命令项

echo "# lll" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:HongTao-Huang/lll.git
git push -u origin master

推荐使用ssh 方式的git仓库链接

仓库变更

git add.
git commit -m ""
git pull    //   先执行，比较安全
git push

下载仓库

git clone git@github.com:xxxx，下载仓库

其他一些有用的命令

git remote add origin git@github.com:xxxxxxx.git 将本地仓库与远程仓库关联
git remote set-url origin git@github.com:xxxxx.git 上一步手抖了，可以用这个命令来挽回
git branch 新建分支
git merge 合并分支
git stash 通灵术
git stash pop 反转通灵术
git revert 后悔了
git reset 另一种后悔了
git diff 查看详细变化

最后最重要的我觉得最棒的就是可以把GitHub命令缩写的一个功能

~/.bashrc 功能很强大的一个功能

首先 touch ~/.bashrc 创建一下这个文件
start ~/.bashrc 选用编辑器编辑这个文件，内容为 echo 'Hi'
你也可以用命令行编辑文件 echo "echo 'hi'" >> ~/.bashrc
关闭退出 Git Bash，然后打开 Git Bash，是不是看到了 Hi，这说明每次进入 Git Bash，就会优先运行 ~/.bashrc 里面的命令
重新编辑 ~/.bashrc，内容改为 cd ~/Desktop，重启 Git Bash，有没有发现默认就进入桌面目录了？
你可以用 ~/.bashrc 在进入 Git Bash 前执行任何命令，十分方便。

alias

在 ~/.bashrc 里新增一行 alias f="echo 'frank is awesome'"，等于号两边不能有空格，你最好一个字都不要错。
运行 source ~/.bashrc，作用是执行 ~/.bashrc
运行 f，就会看到 frank is awesome
也就是说，现在 f 就是 echo ‘frank is awesome’ 的缩写了，利用这个技巧，我们可以把很多常见的命令缩写一下，比如

cd d/ttman/Desktop
alias la='ls -a'
alias ll='ls -l'
alias gss='git status -sb'
alias ga='git add'
alias ga.='git add .'
alias gc='git commit'
alias gcm='git commit -m'
alias hg='hexo generate'
alias hd='hexo deploy'
alias hs='hexo server'
alias hn='hexo new'

export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"

HTML

W3C

历史

标准

MDN

HTML

MDN链接

空标签

什么是空标签？

HTML中的空标签

可替换标签？

什么是可替换标签？

常见的几个可替换标签

node.js Server

脚本建Server

用什么脚本建服务器

创建node.js Server脚本

服务器当前的功能

发送请求

服务器响应

我们需要知道的

HTTP访问要素:IP与端口

HTTP

TCP

IP

内网IP ：

外网IP ：

内外网的访问

本地IP

特殊IP

端口（Port）

我怎么知道应该使用什么端口？

一共有多少端口？

TCP/IP总结

HTTP

URL

URL 的组成

DNS

两种查看域名对应IP地址的方法

请求

响应

有请求就有响应

脚本

脚本是什么

bash脚本

普通bash脚本

bash脚本语言

参数

判断

PATH

Node 脚本

用 JS 切换目录

用 JS 脚本创建目录

用 JS 脚本创建文件

用 JS 脚本来重写 demo.sh

shebang

总结

命令行学习与github学习总结

命令行的总结

哪些系统提供了命令行？

目前前端技术使用命令行的框架及工具

基本概念

常用命令使用方法

ginhub学习总结

推荐一个详细讲解配置GitHub的网站

本地仓库操作命令

本地库上传GitHub

当你在GitHub上创建一个空仓库时， 就会出现上传命令项

仓库变更

下载仓库

其他一些有用的命令

最后最重要的我觉得最棒的就是可以把GitHub命令缩写的一个功能

~/.bashrc 功能很强大的一个功能

alias

当你在GitHub上创建一个空仓库时，就会出现上传命令项