前端入门——day1(简介及推荐书籍和网站)

温浪

图片描述

写给谁

这篇文章写给想要入门前端或者刚入门前端的小白~
如果是已经工作好几年的小伙伴们可以直接跳过这一系列文章啦。

为啥写这篇文章

终于决定给自己挖这个坑了,之前一直没打算写这样的系列文章。回想起自己的前端历程,走了不少弯路,希望这个系列的文章可以帮小白们少走弯路,快速入门。

不同的地方

  • 不会一天一更,因为白天要上班,晚上回去还要忙着准备一些其他的事情,会尽量做到两到三天一更,大家见谅啦~
  • 不会有很多很复杂的概念,我会用自己的语言表达出来,尽量精简,容易理解。
  • 会结合自己实际开发中用到的一切,讲自己踩过的坑,要注意的点,尽量做到把我会的都教给大家。
  • 不讲太旧的东西,像IE6兼容的问题之类的,需求已经很少很少了。
  • 会推荐合适的书,合适的网站给大家学习

开始咯

什么是前端,前端要做什么

嘿嘿嘿,简单来说,你正在浏览的这个网页,上面的按钮,文字,图片之类的,都是前端工程师展现给你看的。这样的页面又叫H5页面,通常来说,前端负责页面的展示和页面逻辑,后端负责提供数据,比如数据库的增删改查等等。

前端要学哪些东西

说实话,很多,目前实际开发中,一个前端要学以下东西(甚至更多):

  • 基础: HTML + CSS + Javascript
  • 框架: Vue或者React或者Angular (一般学一个即可,建议可学Vue, 后面的文章也只会讲Vue)
  • 打包工具: webpack或者gulp或者grunt (主流是Webpack)
  • npm: 包管理(会用就行,不必深究)
  • git: 版本控制工具(多人协作开发时)

是不是有点慌,哈哈哈不着急,一个一个来。

事实上当你学会了基础,那么就可以进行网页开发了,而且也能在很短的时间内学会框架,而一旦掌握了基础和框架,那么正式开发中所需要的技能就基本上都具备了,其他的东西都是一些工具。

所以,基础最重要。今天就讲讲基础,该怎么学,有哪些好的学习资源以及要看哪些书。

准备工作

下载并安装Vscode,Vscode是一款超赞的IDE,所谓IDE就是用来写代码的工具,提供代码高亮补全之类的功能,反正就是前端开发必备啦!

关于HTML,Javascript,CSS的关系

这三个代表三种不同的语言,也对应着三种不同的文件,分别以.html, .js, .css结尾。这三种文件组合起来就形成了我们所看到的网页。相辅相成,负责不同的功能。
拿盖房子来类比:

  • HTML就是搭建好的毛坯房,搭好了架子,样子丑丑的,里边也住不了人,因为里边啥也没有,电器啥的都没有。
  • CSS就是搞装修,把网页整的漂漂亮亮的。
  • Javascript就是控制房子里的逻辑,比如说打开门,打开空调,打开电视机等等等等。

所以:

  • HTML负责网页的基本架构,你想要在页面上有个按钮,就需要在HTML文件里写一个<button>点我</button> 标签
  • css负责网页的美化,比如设置按钮的背景色,background-color: red;
  • Javascrip负责控制点击按钮发生的事情,比如点击时出现一个警告窗。

把三种文件连接起来

  • 新建一个文件夹,用vscode打开这个文件夹,然后在该文件夹下分别新建day1.html, day1.css, day1.js三个文件。
  • day1.html里输入一个感叹号!然后按下tab键(注意该感叹号是英文的感叹号,而不是中文的),会自动生成下面的HTML代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • 然后在<body></body>之间添加一个button标签<button class="my-button">点我</button>,这样就可以显示出一个按钮。
  • 在title的下面添加<link rel="stylesheet" href="./day1.css">,这样就引入了CSS文件。
  • </body>的上面一行添加<script src="./day1.js"></script>,这样就引入了Js文件。得到的最终代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./day1.css">
</head>
<body>
    <button class="my-button">点我</button>
    <script src="./day1.js"></script>
</body>
</html>

这样我们便把这三种不同的文件连接起来了,虽然目前CSS和JS里什么都没有,后面再具体往里边加东西。现在你可以用浏览器打开day1.html看下样子了

ps: script标签和link标签里的./代表当前目录下,如果想表示上一层目录则要用../

HTML

HTML入门真的花不了多少时间,要明白以下几点就好了。

  • HTML是一门标签语言,即由一个个标签组成,通常是一对组成一个元素,比如<button>点我</button>,注意后面的button前有个斜杠,代表是闭合。
  • 也有不需要闭合的标签,比如<link rel="stylesheet" href="./day1.css">
  • 标签是可以嵌套的,比如link标签就是嵌套在head标签里的。
  • 你如果想增加页面的内容,那就在body标签里新增标签,head里内嵌的标签是不会显示在页面上的,因此我们通常只需要在body标签里写东西。

推荐入门网站:
HTML-如果你英文还可以,能翻墙,点这里
HTML-如果你喜欢看中文,点这里

学习方法很简单,照着教程,一个一个敲,然后看效果,大概一天能看完。

推荐书籍:
不推荐,这么简单的东西看看文档就可以搞定了。

CSS

先在day1.css中写下以下代码:

.my-button {
    background-color: #add8e6;
}

然后在浏览器中打开day1.html,会发现我们按钮背景色变成了浅蓝色。解释一下:

  • 在HTML的button上添加的class叫,类的名字叫my-button
  • css中的.my-button中的“.”表示类选择器,意思是选中类名为my-button的元素。
  • #add8e6是16进制表示颜色的方法,也可以使用rgb的表示法,还可以使用一些内置的颜色,比如red。

推荐入门网站:
CSS-英文教程
CSS-中文教程

一些需要着重注意的点:

  • 要搞懂盒子模型,即下面这张图:

clipboard.png

  • 要搞懂选择器有很多种,但是最常用的是类选择器和id选择器,还有nth-child选择器很实用,你可以都了解一下。
  • 要搞懂display属性,尤其注意inline, inline-block, block之间的区别
  • 要搞懂定位的影响,即position属性,搞懂相对于谁定位。
  • 初期少用浮动(float),因为很多人用错地方,也不懂怎么清除浮动。
  • 教程里的的内容,可以先跳过一些,看完CSS TutorialCSS Advanced就可以了,节约时间,剩下的有空再看。另外弹性布局(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-英文教程
Javascipt-中文教程

推荐书籍:

  1. 《JavaScript DOM编程艺术 (第2版)》 这本书很薄,很容易读完,入门书最佳。
  2. 《JavaScript高级程序设计(第3版)》 传说中的红宝书,比较厚,耐心阅读。

ps: 推荐新人《Javascript权威指南》这本书的人通通乱棍打死,这本书绝对绝对不适合作为入门书籍,以上两本书就足够入门到较合格的前端开发了

ps: 请先跳过闭包!!难度较大,而且初级开发中用到的地方很少,需要的时候再去深入。适当的退步是为了更快的前进

最后

安利一个在线编程学习网站,也是英文的,很适合入门。Codecademy
总结下学习方法:

  • 对于基础的东西,去我推荐的网站,一个一个看,一个一个敲,不需要强记,留个印象,后面会越用越熟练。
  • 不同的阶段看不同的书,入门前端只需要过完我推荐的网站,同时看推荐的两本书 ,就够了,越专注入门越快。
  • 进步最快的方式永远是跟着敲,不要满足于看了。
  • 遇到问题先谷歌,实在不懂了可以来提问,有时间会帮大家解答。

所有的文章和代码都会同步到github上方便大家浏览。

https://github.com/JJJustCodi...

阅读 6.5k

前端入门那些事儿
关于前端的那些事,JS,HTML,CSS,Vue,Webpack等等等等

我回来啦!

931 声望
62 粉丝
0 条评论

我回来啦!

931 声望
62 粉丝
文章目录
宣传栏