前端入门—day1（介绍和推荐的书籍和网站）

这篇文章是为谁写的？本系列文章。我为什么要写这篇文章，最后决定给自己挖这个坑。我以前从来没有打算写这样的系列文章。回想自己的前端之路，走了很多弯路。希望本系列文章能够帮助新手少走弯路，快速上手。不同的地方不会每天都变，因为白天要上班，晚上回去还要忙着准备其他事情。我会尽力每两到三天进行一次更改。请见谅~不会有很多复杂的概念。我会用自己的话来表达，尽量简洁易懂。我会结合我在实际开发中用到的一切，说说我踩过的坑，以及需要注意的点，尽量把我知道的教给大家。不谈太老的东西，比如IE6兼容问题，需求很少。我会推荐适合的书籍和适合的网站给大家开始学习什么是前端，前端要做什么。工程师给你看了。此类页面也称为H5页面。一般来说，前端负责页面展示和页面逻辑，后端负责提供数据，如数据库的增删改查等。说实话，前端需要学习的东西很多。在实际开发中，一个前端需要学习以下东西（甚至更多）：基础：HTML+CSS+Javascript框架：VueorReactorAngular（一般一个就够了，推荐学习Vue，下面文章只会讲Vue）打包工具：webpackorgulporgrunt（主流是Webpack）npm：包管理（可以用，不用深究）git：版本控制工具（多人时协同开发）是的一点都不慌，哈哈哈别着急，一一来。其实学好基础就可以开始web开发了，短时间内也可以学会框架。一旦掌握了基础知识和框架，就基本具备了正式开发所需的所有技能。其他一切都是工具。所以基础是最重要的。今天就说说基础，怎么学，有什么好的学习资源，看哪些书。准备工作下载并安装Vscode。Vscode是一个很棒的IDE。所谓IDE，就是编写代码的工具。它提供了代码高亮和补全等功能。反正是前端开发必备！关于HTML、Javascript、CSS的关系，这三者代表三种不同的语言，也分别对应三种不同的文件，分别以.html、.js、.css结尾。这三个文件组合起来就构成了我们看到的网页。相互补充，分别负责不同的功能。打个盖房子的比方：HTML是一个预建好的毛坯房，搭了架子，样子很难看，而且住不进去，因为里面什么都没有，也没有电器。CSS是用来装饰和使网页美观的。Javascript是控制房子里的逻辑，比如开门，开空调，开电视等等。所以：HTML负责网页的基本结构。如果你想在页面上有一个按钮，你需要在HTML文件中写一个clickme标签。CSS负责网页的美化，比如设置按钮的背景色，background-color:red；Javascrip负责控制单击按钮时发生的情况，例如单击时出现警告窗口。将三个文件连接起来新建一个文件夹，用vscode打开文件夹，然后在文件夹下创建day1.html、day1.css、day1.js三个文件。在day1.html中输入感叹号！然后按tab键（注意感叹号是英文感叹号，不是中文），会自动生成如下HTML代码。然后在clickme，这样就可以显示一个按钮。在标题下方添加以导入CSS文件。在上面一行添加，从而引入Js文件。生成的最终代码如下：点我这样我们就把这三个不同的文件连接起来了，虽然目前CSS和JS里面什么都没有，以后再补上。现在可以用浏览器打开day1.html看看是什么样子的ps：script标签和link标签中的./代表当前目录。如果要表示上层目录，需要使用../HTML，了解以下几点就够了。HTML是一种标签语言，即是由标签组成的，通常是一对元素，比如clickme，注意下面的按钮前面有个斜线，表示是关闭。还有一些不需要关闭的标签。例如，标签可以嵌套。例如，link标签嵌套在head标签中。如果你想增加页面的内容，在body标签中添加新的标签。head中的内嵌标签是不会显示在页面上的，所以我们通常只需要在body标签中写一些东西即可。推荐入口网站：HTML-如果你英文流利，能翻墙，点这里HTML-如果你喜欢看中文，点这里学习方法很简单，跟着教程，一一敲，然后看效果，一天左右就可以完成。推荐书籍：不推荐，这么简单的事情看文档就能搞定。CSS先在day1.css中写入如下代码：.my-button{background-color:#add8e6;}然后在浏览器中打开day1.html，你会发现我们按钮的背景色已经变成了淡蓝色。说明：添加到HTML按钮中的类称为类，类的名称为my-button。这”。”css中的inmy-button表示类选择器，即选择类名为my-button的元素。#add8e6是用16进制表示颜色的方法，也可以用rgb表示法，也可以用一些内置的颜色，比如红色。推荐入门网站：CSS-EnglishTutorialCSS-ChineseTutorial需要强调的几点：理解盒子模型，也就是下图：理解的选择器有很多种，但是最常用的是classselectors和ids选择器，以及nth-child选择器非常有用，你可以学习一下。理解display属性，要特别注意inline、inline-block、block的区别。要理解定位的影响，也就是position属性，理解相对于谁定位。早期float很少用到，因为很多人用错了地方，不知道怎么清除float。教程中的部分内容可以跳过，只看CSSTutorial和CSSAdvanced，节省时间，剩下的有时间再看。另外，弹性布局（flex）也可以先跳过，虽然非常非常好用！！！以后单独看一章。当你通过教程阅读相关内容时，你应该带着上面的问题来看一看。Javascript打开day1.js并添加如下代码：document.querySelector('.my-button').addEventListener('click',function(){alert('Hello,World!!')})解释：document.querySelector('.my-button')表示在HTML中找到类名为my-button的元素addEventListener，表示为该元素添加一个事件监听器，事件名称为click，即点击事件。单击此元素时，将调用以下匿名函数，并弹出一个警告窗口。与HTML和CSS相比，Javascript更像是一门真正的语言，就像C语言一样。对于前端来说，最核心的核心就是Javascript，因为它控制着整个页面的逻辑来与用户进行交互。推荐网站：Javascript-EnglishTutorialJavascipt-ChineseTutorial推荐书籍：《JavaScript DOM编程艺术 （第2版）》这本书很薄，通俗易懂，最好的入门书。《JavaScript高级程序设计（第3版）》传说中的小红书，比较厚，耐心看完。ps：给新人推荐这本书的人《Javascript权威指南》都被打死了。这本书绝对不适合作为入门书。以上两本书足以让你进入更优质的前端开发。ps：请先跳过关闭Bag！！比较难，初级开发用到的地方很少，需要的时候再深入。适当的退步，是为了更快的进步。最后安利一个在线编程学习网站，也是英文的，非常适合入门。Codecademy总结学习方法：基础的东西，去我推荐的网站，一个一个看，一个一个敲。不用强记，留下印象，以后会越来越熟练。不同阶段读不同的书。前端只需要通过我推荐的网站，同时阅读推荐的两本书即可。你越专注，你开始的速度就越快。提高最快的方法永远是跟着走，不要满足于看着。遇到问题先谷歌。实在不懂的可以提问，有空我会帮你解答。所有文章和代码都会同步到github，方便浏览。https://github.com/JJJustCodi…