前端学习小记
文章目录
1.html css javascript 前端三剑客
c/s架构中，前端front end和后端back end分别对应客户端client和服务端server，发布者在后端提供资源，浏览者在前端浏览内容。
前端常见的就是浏览器上我们浏览的页面。而html css和javascript就是构成前端的基石。
html ： HyperText Markup Language 超文本标记语言
CSS ：Cascading Style Sheets 层叠样式表
JavaScript : 是由java和script这两个单词组成的，是一种轻量级的编程语言，直译就是java脚本语言。javascript是受java启发而设计出来的，但其本身和java没有任何关系。
三者分工关系是 html搭建框架（定义内容），css润色美化（定义外观表现），javascript让页面动起来（响应事件，修改网页等）。
一个网页，如果只使用html，就只有光秃秃的内容，而有了css，就可以有更多样化的外观，表现等，而再加入javascript，网页更加的“动态”，能够响应用户事件，能够实现自己的功能。
2.框架
框架就像用基础元素组合而成的工具包，就像标准库之于c/c++语言，能够达到简化开发难度的作用。常见框架有Bootstrap，Foundation等等。
3.Node.Js
与VueJS、ReactJS、AngularJS 及jquery不同，具体这四者的介绍看这里，这里再次引用：
JavaScript是一门脚本语言，它需要一个运行环境。就好像PHP需要Apache，JSP需要Tomcat等等（例子不全面，仅供理解）…… 而NodeJS之前，JavaScript运行环境是浏览器，也就是JavaScript在网页中才能跑起来。NodeJS之后JavaScript又多了一个运行环境，就是NodeJS。
链接：https://www.zhihu.com/question/279322623/answer/406073443
NodeJs可以直接运行js脚本，他还是javascript的解释器，Node 的交互式解释器可以很好的调试 Javascript 代码。Node的交互解释器也叫 Repl Read-Eval-Print-Loop,表明了它的运行就是读取 求值 打印 循环(上述三个步骤)；
说完node，另一个不得不说的就是npm，应该是node包管理器的缩写吧。你可以使用它来下载别人编写的第三方包，并安装。也可以将自己编写的包或命令行传到npm服务器供他人使用。我在Linux直接用apt-get install安装node和npm，npm安装失败。后来去官网下载好包，直接解压就可以用了。
如果官网的镜像网站太慢可以使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
关于执行命令时出现的undefine，参见这篇文章。
4.CDN
css和js脚本是为网页添加外观和功能的两步，网页内容一般自己组织，而css和js脚本可以复用别人写好的，这就是上面说的那些库，而如果大家都要使用框架，世界各地的人都访问一组服务器，服务器的压力可想而知。cdn就是为了解决这个问题出现的，cdn即内容分发网络（Content Delivery Network，简称CDN），我感觉它更像一个分布在各个地方的服务器，你只需要使用一个链接，就能就近获取资源，使用实例如下：
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
4.jekyll
我为啥突然想起来学前端相关的东西呢？起因是我发现我的github page空荡荡的，于是就想美化一下，顺便再添加一点内容。github page内置jekyll，这是一个静态网站生成器，具体文档看这里。jekyll通过一个转换器（如 Markdown）和 Liquid 渲染器转化成一个完整的可发布的静态网站，关于liqiud看这里。这里还有一篇文章指导github page创建。
这里面有非常多的实例，参考实例会很有帮助，特别是当你在某些领域并不熟悉时。
#安装环境
sudo apt-get install ruby-full
sudo apt-get install nodejs
sudo apt-get install npm
#检查环境
ruby --version
gem --version
node -v
python2 --version
#安装jekyll
sudo gem install jekyll
#安装gem
bundle install
#启动服务器
sudo bundle exec jekyll serve
5.Vercel
得益于前端语言的特性，Vervel实现了自动化部署。以往建一个网站需要,嗯，以我有限的知识，应该需要一个域名，假如你想别人可以在公网访问，你需要一台一直运行的主机，后端框架搭建，前端页面编写，还有这一套测试下来。。。。
而现在，你只需要在github编写好前端代码（好像他们也有自己的模板直接用），直接就能部署了，是不是很省力？而且他们还能自定义域名，，，嗯，真的良心。
vercel的官方文档是这么介绍他们自己的：
Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host websites and web services that deploy instantly, scale automatically,and requires no supervision, all with no configuration.
至于我为啥发现了它，是因为我想用那个Serverless Functions，好像就是可以提供一个api给你，然后我就可以在github readme status里面调用了，233333。目前是想把别人项目部署在Vercel，然后实现我的github界面实时显示网易云音乐在听的歌。。。
6.相关链接
html参考手册
css参考手册
yaml格式持续集成构建
集成测试覆盖率工具
图标素材
静态托管平台
初学有疏漏之处，望路过的道友指正，感谢~
