前端基础入门——个人笔记 - 好文

/* Created by DyanByta on 18/7/7 21:00 */

这是一篇个人笔记，学习时间尚短，仅供参考有错的地方就当没看到吧

目录

① WEB

② 前端

③ 实践

【WEB】

前端入门，首先要知道前端到底是个什么玩意儿，先来看以下名词

HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services

在解释这一大堆不知道什么鬼的名词的同时，讲一讲Web访问的机制，以下参考这篇知乎
<https://www.zhihu.com/question/22689579/answer/27366799>
（看原文更好，这里只是简略地说一下，想更专业点的话请看相同问题的这篇回答
<https://www.zhihu.com/question/22689579/answer/22318058>）

先来一波名词对照：

1. 服务器运算（后端）→服务器脚本（PHP, ASP.NET）

2. 浏览器运算（前端）→浏览器脚本（HTML, CSS, JavaScript）

3. 数据库（MySQL, SQLSever）

其中，脚本就是我们写出来的那些代码。

当你访问一个网站，顺序是2→1→3→1→2，如下图（就那篇知乎里的图）

好了，现在剩下的名词有三个：

HTML5和XHTML，这俩看成HTML也没关系，反正一个家族的，就用HTML当代言人吧；

Web Services让PHP和ASP.NET两种语言、让(PHP + MySQL)和(ASP.NET +
SQLServer)两种架构之间有了统一的接口标准，有了互通的可能。

以上，名词解释到此为止，简略版看不太懂的话就去看看原文那人语文比我好。

So，前端在整个网络交互过程中的任务也就比较明显了：售货员！直接面对客户，先听听你要买啥（需求），然后把活儿（请求）甩给跑腿的（后台），跑腿的到仓库（数据库）取货，然后咱把货（网页）拿到客户面前，DONE！

【前端】

有个大概了解之后，咱们正式说说前端那点事儿

HTML——骨架

HTML就是最直观的网络页面，静态的死的，不会动的。正式点的说法可以看看这里
<http://www.w3school.com.cn/html/html_jianjie.asp>的简介。

在其语言规范中，HTML是靠一个个标签来实现各种功能的，比如最简单的
<p>这是一段话</p>
而HTML有茫茫多的标签供我们实现各种各样的静态页面。但这么多记不住怎么办？来看看这个参考手册
<http://www.w3school.com.cn/tags/index.asp>，另外一个参考手册
<http://www.runoob.com/tags/html-reference.html>
也可以。不过这东西不用背，因为不知道的或记不清的标签在实际写代码的过程中多来查几次就能记得很牢了。

CSS——血肉

既然HTML的标签属性中有style这种东西，那为何还要用CSS？

规范，以及逼格。

首先，在style中写的东西想在另一个标签中用到要怎么办？复制+粘贴，多快，还不用多想。然而，这样做代码就臃肿了。——CSS专做各种批量刷格式。

其次，改动页面布局的时候，难道要一个个style地找过去？眼都要瞅瞎了。——CSS专搞各种格式聚集地。

最后，想用别人的格式怎么办，全用style的话要报警了好吧。——CSS专营各种格式借鉴抄袭。

然而，这一切的一切，都阻挡不了某些时候style更好用的事实反向营销？。这一点暂且按下不表，让我们先分析分析CSS的神奇功能。

CSS的常客两大类：id与class。

每个标签都可以有这两种属性（没错html这个标签貌似也能）。顾名思义，id就是标签唯一认证的东西，就是说你这一套样式只能给一个标签用；class依旧沿用类的概念，由于可以有多个标签同属一个class属性，它就成了给一批标签同时刷格式的存在了。

CSS有个很吊的特征：优先级。

!important > 内联样式 > ID选择器 > 类选择器 > 继承 > 浏览器默认属性

左侧覆盖右侧，记住上面这行就可以满足日常需要了。这东西说着没做着好玩，推荐实际写写玩玩，可以搞很多花样出来。（内联样式就是style这种了）

于是，在有了优先级的情况下我们可以批量刷格式，单刷格式，动态刷格式（这时简单格式用style更顺手，也不会出现异步无数据的问题），而各个css文件的调用也可以让我们自己制作格式模板。当然，千万不要擅改class的格式就是了。

JavaScript——灵魂

JS的功能一句话说来就是页面反应，是让页面“动”起来的根本所在。

前端三大件，HTML和CSS只是结构标签与样式配置，只有JS才算得上是一门编程语言。这门编程语言使用逻辑语句实现预设的功能，也就有了各种炫酷的动态，使页面活了起来。

Wait，编程语言？C？

我当初第一反应就是这个。然后我现在终于发现这玩意儿不是C，它在某种意义上比C更简单……由于原生JS和JQ都是围绕元素进行操作的，在用这俩写.js的时候基本都会有很清晰的思路。目前高级特效我还没涉及到，暂不讨论。

另外，既然刚才提到了JQ，顺手介绍一波主流框架：Vue，Angular，React。这仨选一个学好就行，学的多不如精一个。

JS就不多说了，因为还是编程的那一套流程：写着写着就会了。（当然还是需要看书的，直接上手会有一段时间不适应，而且不利于成长）

【实践】

瞎扯结束，上干货作业

先顺手来一发编辑器推荐：JetBrain家的WebStorm，工程项目用起来很顺手，毕竟功能太强大了没有WebStorm我就不会写代码了。风格设置可以参考这里
<https://blog.csdn.net/angel_g/article/details/53157381>。

当然像Sublime Text 3这类的也很好虽然我没用过就是了。嗯，其实记事本也是能拿来写的。

————————————我就是吐槽的分割线————————————

实践之前先说一句，代码规范是个很重要的东西，如果你之前没有正式系统地学习过一门编程语言，就需要在规范上多下点功夫，让自己的代码风格更趋近于正统思想：简洁、工整、有效。规范可以参考以下三个：

HTML编码规范 <https://github.com/ecomfe/spec/blob/master/html-style-guide.md>

CSS编码规范 <https://github.com/ecomfe/spec/blob/master/css-style-guide.md>

JavaScript编码规范
<https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md>

另外，这篇前端开发学习指南 <http://www.runoob.com/w3cnote/front-end-learning-guide.html>
推荐看一下。里面有各种tips，专治开发过程中的小困惑，可能会对实际开发有所帮助。

————————————我还是吐槽的分割线————————————

然后就是喜闻乐见的真枪实弹环节，可以参考这位知乎答主的做法：Web 前端怎样入门
<https://www.zhihu.com/question/32314049/answer/100898227>。
①HTML+CSS基础课程 <http://www.imooc.com/learn/9>迅速过一遍，只要对这俩有个大概的了解就好。
②啃书。下边会列出书单，共8本。

③通关百度前端技术学院的零基础学院。

以上三项的难度分别是，1，24，975。

好了不扯了，这是上边那位答主的书单：
《CSS权威指南（第3版）》——权威指南了解一下……没错，真的只是了解就好。
《CSS3 专业网页开发指南》——进阶。不看也没什么大问题，把CSS搞懂就能满足大部分需求了。

《JavaScript高级程序设计（第3版）》——前七章，DOM，事件，表单脚本，JSON，Ajax与最后几章，这些需要看。百度网盘----链接：https://pan.baidu.com/s/1hsZUXzm
密码：nlul
《JavaScript语言精粹》——这本书干的事儿就是，考前划重点。
《你不知道的JS》——各种非主流疑难杂症。
《ES6 标准入门》——ECMAScript 6 <http://es6.ruanyifeng.com/>
，下一代JavaScript语言标准，目前已经全书开源。留个印象就好。
《JavaScript设计模式与开发实践》——进阶。设计模式看个人需求。

《高性能JavaScript》——进阶。优化是永远的话题。

这些东西看完了大概就能跟大牛们谈笑风生了，不考虑一波？
最后的最后，记住两点：看书比看视频更难但更快，模仿代码比自己写更基础但更利于学习。

热门工具换一换