[山地人翻译-零基础学前端] 第二篇 零基础搭建站点须要学习哪些东西？

在开始这趟旅程以前摆在你面前的很大一部分的障碍是在讨论编程和web开发话题时抛出的全部的专业术语。这些术语中的一部分是在咱们平常思考、学习和实践中是不可避免的，然而还有一些只是一些自我膨胀的家伙经过使用一些深奥的或者学术性的词汇来描述一些本能够用一些简单的词汇描述的内容。这些术语中有一些是你真的须要了解的（好比：HTML标签，functions函数，scope做用域）还有一些好比像（monads和functors）你大可忽略。咱们会尽可能帮你作区分。可是若是一个词汇在你学习的时候常常出现或者听到，那可能就是最佳的时机去了解和掌握它。

下面让咱们大体看看接下来的这套课程究竟都有些啥。

你会学习到关于如何建立你本身的站点的从前端到后端的全部你须要了解的内容。为了作到这些，你须要去学习几种"语言"。我在语言上加了引号由于不是全部的都是技术语言，但目前你能够先这么理解。从如今开始咱们把他们通通称做语言。你将要学习的三门语言分别是HTML，CSS和JavaScript。咱们也会使用一些其余的工具，像命令行和git咱们后面讲到这里再说。

建造房子的比喻

为啥你须要这三种语言？让咱们用造一座房子来打一个不太恰当的比喻。为了造这座房子你须要一些工具（好比你的文本编辑器，你的命令行。）当你拥有了这些工具后，你还须要建造材料：石头，沙子，水泥，窗户：你须要把全部这些东西组合起来搭建你的房屋。这咱们这他们就是 HTML（超文本标记语言）。然而这座房子目前还比较简陋。他尚未涂色和进过任何精心装修。目前看上去还比较平淡、呆板和无趣。固然你能够建立一个只使用HTML的站点，是有黑白文字不使用样式没有交互。

为了安排和装饰让这座房子更加有用，你须要一些蓝图。说的夸张一些，你能够把这些蓝图想象成一个规则的集合：2x4磁砖放在这里，顶盖放在这，墙壁是蓝色，窗户放在这里。你定义了一系列的规则，若是一些元素符合这个规则就把这些规则应用上去。若是是9x19的磁砖，就贴在房子的南边。这些就是你房子的CSS样式，或者咱们称之为层叠样式表。CSS是一系列规则，它定义了一系列的规则，当你的一个HTML元素符合其中的一条规则，让后就会把对应的样式应用到的元素上去。好比你是文章里的第一个段落，你的字体代销是25px像素，你的字体颜色是蓝色。

好了，到这里咱们有了一套看起来还挺漂亮的房子。如今，在这个现代化的时代，我但愿全部的工具，我想要一大堆智能家居设备。我但愿当我把智能汽车开到车库门口时，车库门自动打开了，房间里的电灯自动点亮，恒温系统自动调控到适宜的温度，电视也调整到了我喜欢的电视频道，智能厨具自动开始烹饪美味的晚餐。我要为个人房子添加这些行为。我须要在现有的基础上加上一层行为。你但愿在用户点击按钮的时候弹出一条消息吗？你但愿在页面上准确的更新你的时钟吗？你但愿每隔几秒改变你张氏的图片吗？你想要的这些都须要用JavaScript来作。就如全部的智能家居设备，也不是全部的站点都须要JavaScript。有些站点，好比只是作一些信息展现不须要太多的交互（好比HTML里的点击的link连接，你就不须要使用JavaScript来实现）。使用JavaScript可让这些更加容易实现，可是不使用JavaScript让你更容易去作。

如今，若是我想要定货送到我家，我须要呼叫某人，可是某人不在个人房间。我须要使用个人智能助理，让他去打披萨店的电话并让他们送披萨到我家。在这个例子中披萨店就比如是咱们的（backend server）后台服务。一个披萨店能够服务许多房子，它可能只作不多的事情（好比作披萨，沙拉，饮料等等）并把这些交给各式各样的client客户。这个地方的客户 就是用户的电脑，手机和智能助手，智能手表，智能烤箱，到底是啥谁知道呢！因此一个服务器能够服务不少客户端。在这个例子中咱们只须要关心装在用户电脑上或者手机上的浏览器（Chrome、Firefox、Edge、Safari等等）。前端代码（房子的智能化）一般是靠JavaScript。后台代码的种类很是之多：Python、Ruby、JavaScript、Java、Go、C#等。惊天咱们只需使用一种语言JavaScript就能够搞定前端和后端，可是你仍是须要知道对于后端你可使用不一样的语言。

小结

1.HTML是结构——它包含了所有的文字，文字中的各类图片，它一般都是组合在一块儿的。就像你房里里的石膏板，HTML作的不外乎是这些事。他依赖于其余部分来完成造房的事。

2.CSS是蓝图——它的所有所有规则就是定义用什么样的颜色，什么样的尺寸，字体是啥样，背景图是什么。和HTML不一样，CSS不作任何事情，它只是给出了元素应该怎么摆放，以及长啥样子的一系列的规则。

3.前端（client）客户端的JavaScript就比如是家里的智能。他是很酷的预先设定好程序的管家按照你交给他的任务执行。JavaScript能够改变HTML和CSS来对不一样的刺激作出响应。

4.后端代码（咱们任然使用JavaScript）是一个披萨店。他是一个你能够想他询问申请东西的地方。或者咱们也能够发送东西给它，好比你上传一张新的照片到你的社交媒体帐户上。一台服务器能够服务许多终端，就像一个披萨店服务器不少家庭。

原文: https://btholt.github.io/intro-to-web-dev-v2/overview

若是你也在自学前端，若是在前端学习的过程当中遇到了坎，不论是学习过程当中遇到什么问题，或者有什么好的意见和建议想和我交流，欢迎你在文章底部留言，或者添加个人微信。

固然我也为你准备了一个微信——前端自学交流群，欢迎你加入咱们自学交流小组。

注意：加个人小伙伴请告诉我你来自掘金，是否要加入到前端自学交流群

为保证白天学习的效率，加我好友和想进群的朋友，我会在中午12点和晚上7点两个时段统一处理你们的请求。因此若是发现没有当即回应，请耐心等待一下。

想学习山地人的更多专题请到 www.idev365.com

• 前往 www.idev365.com

若是你在学习或者工做过程当中遇到什么技术问题，或者有什么好的意见或者建议，欢迎和我交流

微信:colin3dmax（ 请备注：你来自掘金 | 是否要加入前端自学交流群 ）