【讲晚安故事的代码书】持续更新中,当前进度 0007

一份前端教程。

算了,你就当晚安故事读算了。每次一说教程,就是收获点赞收藏,然后没人阅读。

我慢慢的讲,就像小时候那些坐在大树下讲故事的老人一样。

你们慢慢听,听懂了就学了点新技能,听不懂就拥有了甜美的梦。

就这样吧,这一层是目录,我会把所有内容的链接都放在这里。

教程合辑https://dmnydn.com/

目录


小老鼠的咖啡请安排一下哦~

AliPay-240 WePay-240 QQPay-240

1 个赞

好!
先占个楼学前端

1 个赞

点此返回目录

0000 初见

点此进入对应视频

什么事情总要先给他一个开始,然后才会有往下的进行。

于是我写下了这些内容,接下来就交给你们,去阅读它。

我不喜欢一板一眼的教程,我知道你也不喜欢。那么这一次,让我们忘掉教程,忘掉学习,忘掉那些不愉快的事情,坐在壁炉前,平静而温暖的聊一聊天。

天色暗了,世界安静了。

刷手机虽然开心,但时间久了也会让人空虚。就不如听小老鼠讲个故事,然后带着笑意结束这一天。早睡早起还是很美好的,想想自己多久没有看到过日出了呢?

好啦,我是在骗你的。

故事确实是故事,但知识总是要有一些的。不过这样也好,或者你学到了知识,或者觉得厌倦,然后捕获了困意。怎么想都是赚到,所以为什么不试试呢?

点此返回目录

0001 何以

点此进入对应视频

我们为什么要学习?这简直就是一个哲学问题,可是总有人喜欢拿这么深奥的问题来拷问小老鼠。

学习这件事情不是与生俱来的吗?学会了睁开眼睛打量世界,学会了翻身,学会了爬行,又学会了直立行走……每一件事情都是我们成长的见证,我们依旧在成长,当然依旧要学习。不要停下来感慨啊,因为一旦停下来最容易感慨的事情,就是发现自己变老了。

好不好学和学会了有什么用?你问我,我又怎么知道呢。

好不好学这是一个很主观的事情,它因人而异,所以对于你是不是一件容易的事,总要亲自尝试一下才会知道。

学会了有什么用?就看运气喽,有多少人毕业之后干的就是自己专业所对好的工作呢?家里的创可贴用不上,不也是一件很值得开心的事情嘛。但是创可贴还是要准备一点的,万一需要就有备无患哦。

而且啊,也不一定非得是有伤口的时候才需要创可贴,鞋子硌脚了也能用它哦。那你现在问我创可贴买了以后会用在哪里?笨笨的小老鼠又怎么能够猜得出呢?

不去讲那些大道理,因为好多人讲过,也因为很枯燥,我不喜欢。其实怎么讲对于没有接触过的人都是模糊的。而且还有许多主观的方面,许多自己独特的情况,又怎么能够凭借别人的三言两语去进行判断呢?就不如自己去尝试一下,鞋子合不合脚,只有真正穿过才知道。

点此返回目录

0002 直面

点此进入对应视频

我们要讲的是关于什么的内容呢?前端,这个词范围太广了,很多行业里都会用到。这一次是针对网站的,那么网站里的前端就是网页,我们作为读者看到的那些部分。

你是不是觉得无趣了呀?这也挺正常的,以前的前端就是一个比较无趣的工作嘛。

从前呢,有一个饭店。小老鼠是里面跑堂的,负责接待每一位顾客,问问他们想吃什么?想喝什么?有什么需求,然后屁颠儿屁颠儿的跑回后厨,去告诉大师傅该做怎样的菜,等菜做好了,再端出来,送到顾客的桌上,然后说一句:您慢用~

这样直面顾客的就是前端,那个直面灶台的大师傅就是后端。

这是一份枯燥乏味的工作,后来小老鼠就跑出去单飞了。说人话就是……人家不要我,我就去街口摆煎饼果子摊儿了。这个技术要求就非常的低,虽然老鼠的煎饼做的很一般,但是小老鼠接待顾客的能力很强啊,摊子搞得也很漂亮,煎饼做出来也很漂亮,然后我笑脸迎人,跟谁都多聊两句,大家觉得开心,我的生意就也不错。

你看我还是在直面顾客,所以还是前端,但是多了一些技能,于是一个人把这个买卖给挑起来了。这就是现在的前端,不是特别复杂的事情,他自己就能做。所以现在的前端一副风生水起,到处抢人饭碗的样子。所以你永远也猜不透,这些小摊里能做出怎样有趣的东西。

前端能做的多了,后端是不是就完蛋了?也没有啊,那个大厨现在专心做饭,然后并不接待顾客,但他可以做外卖啊。于是又是一个风生水起的故事。

当然了,上面这些都是小打小闹的。真正五星级的大饭店,前端后端必须齐备,要不然肯定是乱套的。

哎呀,不小心在晚安故事里聊了这些东西,要不我们一起爬起来去做一份泡面吧~(听我的故事还能长肉肉,是不是觉得赚了?((吐舌头

点此返回目录

0003 三分

点此进入对应视频

前端学点啥呢,就是写网页了啦~

这样说也没什么错,不过很不完全。怎么会只写网页呢,像我这么懒惰的小老鼠,最常干的事情是把别人的网页改得符合自己的使用习惯。这就好像会讲很有趣的故事,并不一定都要说相声,在自己无聊的时候,讲给自己开心也是蛮不错的。

还能做点什么呢?前面都说了,前端在抢许多行业的饭碗。确实都不如那些专业的工具做的那么好,但并不等于他不能做。想想我们自己,日常总会有许多小小的想法和小小的需求,但并不是总能够得到满足,如果我们有了一个相对通用的工具,可以根据自己的需求进行相应的开发,应该就可以搞出许多有趣的玩意儿,也给自己带来许多便利。

JavaScript 大概就是这么一种入门比较简单,然后又在许多地方都可以去应用的语言。做的不够好,但是都能做一做。用来当一个救火队员什么的,还是蛮不错。

谈到的语言,那么我们前端要学习的语言主要有三种。HTML、CSS 和 JavaScript 。

一下学三种是不是很复杂呀?其实并没有哦,因为第 1 种实在太简单了,这个问题我很快就会证明给大家看。第 2 种难度适中,但学会之后,你就已经可以制作漂亮的网页了。第 3 种,你看我都已经说他入门比较简单了,如果这都没有记住,那说明小老鼠的催眠效果还是很优秀的。

HTML 在网页中相当于一份骨架,搭建出网页的结构来;CSS 则是网页的血肉,让原本单薄的内容变得丰满,网页也就楚楚动人起来了;JavaScript 则是页面的灵魂。前面的再漂亮也只是一幅画,最多就是可以动的 gif 表情。但是有了 JavaScript,页面就可以响应我们,与我们交互。

现在了解了要学习的东西,也知道学会之后,可以有一个活生生会动的网页在前面等着,不知不觉便流下了口水……

点此返回目录

0004 出门

点此进入对应视频

天气晴好,出门去玩儿。

只是美中不足,孤零零的一个人。

等宝宝成功了,一定要改变这种状态,不能一个人出门,怎么也得带上保镖。而且,要带就带两个保镖,一个在前面,举着大旗子,上面写着:“帅气可爱的稻米鼠过来了”;一个在后面举着大旗子,上面写着:“帅气可爱的稻米鼠过去了”。我就走在他俩当中,这状态,简直完美。这样走在大街上,只要认字的人,就都知道,我是那个帅气可爱的稻米鼠。你看这多好~

你说什么?我的梦该醒了。

才不会呢,小老鼠擦擦口水,翻了个身,继续做梦。

带着家人一起出去玩,为了保证安全,这两个保镖依然是前面一个后面一个,当然旗子上的文字要改一改,“帅气可爱的稻米鼠带着家人过来了”。后面保镖旗子上的字,该怎么修改,聪明的你们应该都知道吧?

但是出去玩儿嘛,免不了需要随身带着一些证件、票据、现金……出入各种地方都要出示这些东西,大家都有生活经验,我就不仔细的描述了。那像我这么大牌,自然不能自己去拿着这些东西。不过这里不是有两个保镖嘛,交给他们就好了呀。那你猜我是把这些东西交给前面那个保镖,还是交给后面那个保镖呢?

显然,应该让前面的保镖拿着这些票据,去进行出示,然后我们在后面尾随,就一路畅通了。如果前面那个保镖什么都不拿,见到公交车噌的一下窜上去,然后说后面的人买票……那我就应该脱下来脚上的老北京布鞋,去追着抽他了。

这么想想后边的保镖好轻松啊,除了打一个旗子,也没有什么其他的事情要做。要是有这么轻松的工作,小老鼠也想要。

我知道你在吐槽啦,你说这两个保镖一点都不像保镖,倒好像是导游。我跟你说,那天我真的跟团出去旅游了呢,他们就是这个配置,前面一个导游拿着各种票据,然后带领着大家,最后面一个导游,避免有人掉队。可见我的设计方案是多么合理啊!我带着自己的两个保镖,走在旅游的队伍中,不禁这样想着。

显然我们三个都属于这个旅游团,作为守规矩的好孩子,我们也都乖乖的走在这两个导游之间。我感觉我受到了双重的保护。这时候我要约束好自己的保镖,前面那个不能够超过最前面的导游,否则旅游景点儿跟咱们要门票,那就亏了;后面那个保镖不能超过最后边的导游,掉队了会被漂亮的导游小姐凶的。

第 2 天早晨,我打算睡个懒觉,不过楼下煎饼果子的香味十分诱人,于是我打发保镖过去购买。这种小事情去两个保镖就没必要了,所以我让走在前面的那个保镖自己过去。你问我为什么是他过去?前面说了啊,我们的现金放在他身上呢,所以他过去最方便了。

故事都听明白了吧,听明白了就睡觉吧,明天再给大家解释,这些东西和我们的代码有什么关系哦。

点此返回目录

0005 如此

点此进入对应视频

昨天的故事大家都记住了吗?没有记住的可以再去看一遍(然后就又被我哄睡着了呢~

如果你觉得云里雾里,那么没关系,因为现在我就要给你们解释一下了。

这里有一个内容,就比如是我。但是你们怎么能知道这个人就是稻米鼠呢?所以前面一个保镖,后面一个保镖,举着旗子来标记一下,中间这个货,就是稻米鼠。这一下就清晰了,事情就简单明了了。

这个方法很简单吧,HTML 就是这个样子的。你看你只要读懂了昨天的小故事,就已经掌握了其中的核心理论了呢~

【从这里开始加粗呦】这些文字将会被加粗【到这里加粗结束哦】

像上面这样对内容进行标记,多简单的一件事情啊。只是有一个小问题,就是这样写太复杂了,所以把事情稍微简化一下:

<strong>这些文字将会被加粗</strong>

这里和上面表达的是相同的意思,稍加对照你也就可以很好的理解了。于是,你学会了书写第 1 句代码。

那么问题来了,道理我们都懂,但是我们怎么去使用呢?

只需要打开一个记事本,把上面的内容粘贴进去,然后另存为 index.html ,再将文件拖到浏览器里,就可以查看我们的成果了。那么快享受我们第 1 次的成就感吧~

今天顺着小书签读了,要不zl先写份大纲,我做你的pre-release?

大纲木有,因为写了几遍都熟悉了,现在就是重新梳理

点此返回目录

0006 工具

点此进入对应视频

写代码这件事情,说起来总有那么点儿极客。如果用记事本去写,就丢掉了这种范儿,所以我们来装一个工具吧。

VSCode( https://code.visualstudio.com/ ),下载软件一定要到他的官网去哦。虽然是英文的,但其实只要点击那个大大的蓝色按钮就可以了,一般下载下来的就是自己对应系统的安装文件。

这是微软出品的一个编辑器,用来编辑文字的。对,就是在里面打字写东西,然后界面又看起来酷酷的,用起来其实还蛮简单。

安装的时候如果看不懂,就去点下一步(next)好了,像这种大厂出品的软件,一点都不流氓,也不会有捆绑,放心去安装,没有任何问题的。

安装以后就可以直接使用了,虽然界面是英文的,但其实也没有多大影响。

如果想要安装中文语言包,也不麻烦,只是描述起来可能显得稍微复杂。

  • 首先我们当然要打开编辑器,就是刚刚安装的 VSCode;
  • 然后按一下 F1 或者 Ctrl+Shift+P ,这时候注意观察,在编辑器的上面,中间的位置,会显示出一条输入框,用来输入命令,操作编辑器;
  • 输入 lang ,应该就可以看到这样一个选项 Configure Display Language ,那么选中他,回车
    image-20200430090922445
  • 这时候就会有相应的语言可供我们选择, en 表示英文, zh-cn 表示中文简体,选择我们需要的那种语言就可以了;
  • 如果选单中没有我们所需要的那种语言,那么看最后一项那串长长的文字 Install additional languages ,选择它,就可以进入扩展管理安装更多的语言包;
    image-20200430091009661
  • 在扩展管理上方的搜索框中,它会自动输入一些文字进行过滤,使这里所显示的内容只有语音包。我们在这串文字的末尾,加上 zh 就可以找到中文语言包了。
  • 一般来说我们所需要的语言包就是第 1 个, Chinese (Simplified) Language Pack for Visual Studio Code ,点击它后面那个绿色的按钮( Install ),就可以安装这个语言包.
  • 安装以后,我们可能还需要按照最前面几步去选择一下显示的语言;
  • 如果这样操作之后,还没有成功的变为中文,就将编辑器关掉,重新打开一下。

image-20200430091126220

你说什么?这操作太复杂了。是啊,确实有一点。这是因为日常我们不会用这样的方式去操作软件,所以第 1 次接触觉得不太习惯。等你发现这个编辑器的一切操作,都可以通过这个小小的命令输入框去实现,你会逐渐感觉到他的美好和简单。当我们想做一个操作,却不知道应该到哪里去进行的时候,那么在命令框里搜索一下,基本都可以立刻将问题解决掉。

点此返回目录

0007 新建

点此进入对应视频

新建

现在拥有了像小老鼠一样帅气的编辑器,让我们开始吧。

和几乎一切软件一样,我们可以按 Ctrl+N 来新建一个空白文件。如果你打开软件的时候,就已经有了一个空白文件,那么这一步也省了。

如果你打开软件的时候看到的是这样的界面,

你会发现他给出了一些常用快捷键的提示,虽然除了第 1 个,其他的我们还用不上。别管他们,只要在空白的位置双击鼠标,也可以很方便的新建一个文档。

作为可爱的萌新,不需要关注太多,先注意两个关键的细节就好。在文件新建之后,注意看编辑器的右下角,会有一系列的提示。

image-20200430092101662

UTF-8 是说我们当前文档的编码,现在先不用理解它是什么,只要保证这里确实是 UTF-8,并且后面的操作都按照我说的去进行,你就不会遇到奇奇怪怪的乱码问题。不过一般情况下,我们新建的文件,自然就是这个编码,所以现在只是介绍你们相互认识一下,实际到后面几乎并不需要为它而费心。

还有就是后面那个纯文本,这个位置说的是当前文档是怎样的一种格式。因为我们刚刚新建的是一个空白的文档,所以他认为我们的内容就是纯粹的文本内容。我们可以通过点击这里,来指定其他的格式,这样编辑器就知道应该如何给我们打辅助了。

image-20200430092514904

编辑器对文件格式的识别有两种方式,第 1 种就是像刚才这样,手动为当前文档指定它所属的格式。第 2 种则是通过文件的扩展名,就是文件名字最后一个点( . )后面的内容。比如: index.html 就是一个 HTML 格式的网页文件。所以我们还可以通过,在保存文件时指定对应的扩展名,来设定文件的具体格式。而编辑器在打开一个文件的时候,也会通过它的扩展名来识别这个文件的格式。