一份前端教程。
算了，你就当晚安故事读算了。每次一说教程，就是收获点赞收藏，然后没人阅读。
我慢慢的讲，就像小时候那些坐在大树下讲故事的老人一样。
你们慢慢听，听懂了就学了点新技能，听不懂就拥有了甜美的梦。
就这样吧，这一层是目录，我会把所有内容的链接都放在这里。
教程合辑：https://dmnydn.com/
目录
小老鼠的咖啡请安排一下哦~
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，那么选中他，回车
- 这时候就会有相应的语言可供我们选择，
en表示英文，zh-cn表示中文简体，选择我们需要的那种语言就可以了； - 如果选单中没有我们所需要的那种语言，那么看最后一项那串长长的文字
Install additional languages，选择它，就可以进入扩展管理安装更多的语言包；
- 在扩展管理上方的搜索框中，它会自动输入一些文字进行过滤，使这里所显示的内容只有语音包。我们在这串文字的末尾，加上 zh 就可以找到中文语言包了。
- 一般来说我们所需要的语言包就是第 1 个，
Chinese (Simplified) Language Pack for Visual Studio Code，点击它后面那个绿色的按钮（Install），就可以安装这个语言包.
- 安装以后，我们可能还需要按照最前面几步去选择一下显示的语言；
- 如果这样操作之后，还没有成功的变为中文，就将编辑器关掉，重新打开一下。
你说什么？这操作太复杂了。是啊，确实有一点。这是因为日常我们不会用这样的方式去操作软件，所以第 1 次接触觉得不太习惯。等你发现这个编辑器的一切操作，都可以通过这个小小的命令输入框去实现，你会逐渐感觉到他的美好和简单。当我们想做一个操作，却不知道应该到哪里去进行的时候，那么在命令框里搜索一下，基本都可以立刻将问题解决掉。
【点此返回目录】
0007 新建
新建
现在拥有了像小老鼠一样帅气的编辑器，让我们开始吧。
和几乎一切软件一样，我们可以按 Ctrl+N 来新建一个空白文件。如果你打开软件的时候，就已经有了一个空白文件，那么这一步也省了。
如果你打开软件的时候看到的是这样的界面，
你会发现他给出了一些常用快捷键的提示，虽然除了第 1 个，其他的我们还用不上。别管他们，只要在空白的位置双击鼠标，也可以很方便的新建一个文档。
作为可爱的萌新，不需要关注太多，先注意两个关键的细节就好。在文件新建之后，注意看编辑器的右下角，会有一系列的提示。
UTF-8 是说我们当前文档的编码，现在先不用理解它是什么，只要保证这里确实是 UTF-8，并且后面的操作都按照我说的去进行，你就不会遇到奇奇怪怪的乱码问题。不过一般情况下，我们新建的文件，自然就是这个编码，所以现在只是介绍你们相互认识一下，实际到后面几乎并不需要为它而费心。
还有就是后面那个纯文本，这个位置说的是当前文档是怎样的一种格式。因为我们刚刚新建的是一个空白的文档，所以他认为我们的内容就是纯粹的文本内容。我们可以通过点击这里，来指定其他的格式，这样编辑器就知道应该如何给我们打辅助了。
编辑器对文件格式的识别有两种方式，第 1 种就是像刚才这样，手动为当前文档指定它所属的格式。第 2 种则是通过文件的扩展名，就是文件名字最后一个点（ . ）后面的内容。比如： index.html 就是一个 HTML 格式的网页文件。所以我们还可以通过，在保存文件时指定对应的扩展名，来设定文件的具体格式。而编辑器在打开一个文件的时候，也会通过它的扩展名来识别这个文件的格式。