【九层之台】Web开发教程：0. 准备

前言

为什么要开这么大一个坑出教程呢？列举一下，大致有如下几点原因：

• 这一切都要从一只蝙蝠说起…
• 笔者几年前实在找不到人写前端，只好亲自上阵。
• 我的师傅（丁巨）当年妄图用一堆教程和链接把我劝退。
• 这几年带了好几个同学做网页应用，自以为教的比我师傅好。

因为上述一些完全没有逻辑的原因，我决定根据我的技术栈出这样一份教程。

丑话说在前面，Web开发有一定的难度，各位遇到困难不要害怕，努力寻求解决方法，享受解决问题的乐趣吧！

请多多指教！如有错误，请及时指正！

相信对于生活在二十一世纪的你们，Web是什么应该不陌生了。从每天刷的QQ看点，到打开百度搜索，Web通过各种各样的渠道向我们传输着信息，收集我们的反馈。在接下来的教程之中，我们会进一步地了解网页应用究竟是什么，怎么样构建一个网页应用，但在此之前，让我们了解一下为什么要学习Web开发，Web开发和传统的电脑上的应用，手机上的Android/iOS应用相比，有什么优势呢？列举一下，大致有如下几点：

• 秀，巨秀，非常秀。做一个好看而又有趣的网页，比用VB写个复古风格小程序不知道秀多少倍。可以给女朋友做网页。
• 门槛低：Web开发对电脑配置要求很低，也不需要特殊的运行环境。
• 迅捷开发：面对需求上线快。在这个需求每时每刻都在变化的时代，效率就是竞争力。
• 跨平台：手机、平板、个人电脑，Android、iOS、Windows，不管是什么设备什么操作系统，一“站”解决。
• 茂盛的生态系统：无数前辈们开发的海量的资源和模块，可以让你像拼积木一样拼出各式各样的应用。
• 就业情况很好。Web前端领域相比于其他开发领域有更多的妹子。

其实说来说去，就第一点还不够吗？让我们赶快开始秀吧！

0. 准备

写教程的时候问了团队里面的大佬，他们说：

• 只需要一个脑子
• 还需要一双手

Just joking…
其实，最基本的准备大概是：

• 一台可以联网的电脑（操作系统随意，本篇教程均以Windows 10为例）
• 在电脑上合适地方建一个文件夹，作为我们的工作空间(workspace，又叫工作目录)。
• 在工作目录下新建文件index.html，不会改文件后缀名的请自行百度！
• 一些软件，以及一些资源网址。（就是下面这些）

软件

俗话说，工欲善其事，必先利其器。一些优秀的软件可以帮助我们更好地完成开发任务。

Google Chrome

世界上最好用的浏览器（不接受反驳）。具体来说，是HTML5标准测评站 https://html5test.com/ 给出的当前评分最高的浏览器，本文也将根据Google Chrome浏览器来定义浏览器支持情况。

什么？你说IE？不好意思不考虑支持IE。

安装方法：通过Microsoft Store、各大应用商店、甚至百度下载安装。

在Google Chrome里面打开网页的时候，可以通过按F12，或者右击 - 检查打开调试控制台，这在以后会经常用到。

Sublime Text 3

很好用的文本编辑器（不敢说最好用了，怕被喷）。如果喜欢用VSCode，请跳过本节。

安装方法：打开官网 https://www.sublimetext.com/ 下载安装。
Sublime Text 3可以无限期试用，过一阵子弹框让你购买，叉掉即可继续使用。当然，你也可以支持一下官方。

安装好Sublime Text 3（以下简称sublime）以后，打开sublime，然后惊喜地发现它只有英文版（好好学英语吧）… 点击菜单栏里面的Open Folder...，选择建好的工作目录，然后点击打开。整个软件左边就有帅气的文件目录树啦！

基础使用方法和一些快捷键如下：

• 标签上有白色小圆点的是没有保存的，标签页上面是白色小叉叉的是已经保存了的文件。
• 通过左侧的文件目录树可以新建、删除、重命名文件或文件夹
• 右下角可以设置缩进格式和当前文件类型，sublime会根据不同的文件类型渲染不同的代码颜色，方便我们开发。
• 按住Ctrl滚动鼠标滚轮可以调整字体大小
• Ctrl+S保存当前文件
• Ctrl+W关闭当前文档
• Ctrl+T新建文档
• Ctrl+Shift+P可以调出命令菜单，安装插件的时候会用。

一些配置：从菜单栏打开Preferences - Settings，在新打开的两个窗口中的右侧窗口（就是标签上写了User的那个）里面写如下内容并保存：

{
	"tab_size": 2,
	"translate_tabs_to_spaces": true,
	"word_wrap": true
}

这是设置缩进格式，Web开发几乎全部要求两个空格缩进（这是规范），请把所有的代码写的尽量符合规范，不然会在团队合作和后期维护的时候遇到极大的困难。

做完这些，你就一切就绪啦！

资源

一些资源请拿好！更多资源可以自行查找。

• W3School：著名的Web开发教程网站，东西很全很多，需要查询什么的时候可以去看看。
• 菜鸟教程：另一个著名的教程网站。
• Codepen：一个可以供你做些简单实践的地方。
• Github：世界最大同性交友网站 大佬最多的地方，有海量前辈们完成的优秀项目，具体的使用方法不在本教程的范围之内，请各位自行学习（有点复杂，可以以后慢慢学，不会也没事）。
• 百度：你没有看错，如果有不明白的地方，百度是最正确的解决方法，无数的错误前人都已经有了解决方案。