Web 基础
当我们用电子设备（手机、电脑或其它什么小玩意儿）打开一个网页、使用一个微信小程序，甚至是使用某些 App 的时候，我们就是在使用 Web。如果你想要知道尽可能多的细节，可以上 Bing 搜索 浏览器原理 知乎，这些万字长文会带你领略复杂的底层。我们只会形象地梳理一下目前需要知道的信息。当然，如果你已经全都知道了，那就直接上手做项目吧！
浏览网页的时候，到底发生了啥
当你进入浏览器，输入 www.nottingham.edu.cn，按下回车，稍等片刻后，看到了一个图文并茂的页面。这中间发生了什么呢？
HTTP 请求
首先，你在浏览器输入地址，并按下回车，你的浏览器就会告诉你的电脑：请向 www.nottingham.edu.cn 对应的 IP 地址发送浏览器打包好的数据。
于是你的电脑通过网络，查到了这个网址的 IP 地址 118.178.243.203，并向它发送数据。这个数据包到底包含哪些数据？可以去搜一下 HTTP 报文。
在 118.178.243.203 这个地址，也住着一台电脑（可能和你的电脑没啥大区别）。出于礼貌，它会给你回信。这个回信的内容通过浏览器的解析，就是你看到的图文并茂的内容。
理论上，这个回信可以是任何东西（只要你事先声明好）。它可以是一个你做的 word 文档，一个 PPT，一堆图片，甚至是视频。只不过，大部分的网页都选择发回一系列文件（HTML，JavaScript以及 CSS 格式的文件)，你的浏览器也恰好擅长解析这些文件，并展示出来。
一个网页上，会有很多链接。当你点击一个链接的时候，你的浏览器可能会再次发送并接收数据，于是你就会收到另一系列文件。于是，你就开始冲起浪来。
你也可以自己写这样一系列文件，放在自己电脑上，让别人来访问自己。这个其实没啥难的，只要你把文件写好，剩下的事情，有一万种方式可以做到。
Web 三件套
HTML
HTML 文件定义了一个页面的排版。就好比你做一个 PPT，它会记住你所有的文本框、艺术字以及图片的位置，以及按钮要要去向哪里。
一个 HTML 的结构大概是下面这样。
<!DOCTYPE html>
<html>
<head>
...一些定义
...一些第三方库的引入
<link rel="stylesheet" type="text/css" href="tetris-in-js.css" media="screen">
<script type="text/javascript" src="./tetris-in-js.js"></script>
</head>
<body>
...主体
</body>
</html>
其实，每次笔者写 HTML 文件的时候都会很头痛，因为在正式开始写内容（<body></body>里面的内容）之前，还要先进行一整轮的“吟唱”：
诸神听我号令，吾将写作
<!DOCTYPE html>，其首为<head>，其灵为<meta>...
然后才是法术的咒语正文。
笔者想说的是，除非你十足地确信未来会深耕原生网页制作，否则这些内容，可以每次用的时候现场查。其它很多东西也是如此，这一点我们会在 GOP-面向谷歌编程 中展开。
JavaScript
和 C 啊 Java 啊 Python 啊这些相类似，JavaScript 也是用来书写逻辑的。它可以控制一个 HTML 页面，让它“活”起来。再次拿 PPT 做类比，你可以这样控制它：
如果今天下雨：
翻页的时候播放雨水的声音
不然：
翻页的时候播放鸟叫
然后，你可以把你的 PPT 发给别人，别人在不同天气打开，它翻页的时候会发出不同的声音。
当然，PPT 是不能这样控制的（或者控制起来相当麻烦）。但是网页可以，而且能做的事情更多！
要注意的是 JavaScript 就是一种普通的编程语言而已，只不过它跟浏览器的配合非常好。理论上，只要浏览器支持，你可以用任何一种语言编写逻辑。
CSS
CSS 定义了页面的样式。
依然是拿 PPT 当作例子。CSS 文件定义了文本框、图片等东西的属性（边框大小啊，旋转角度啊，字体等等;当然，它也可以用来调整位置）。
CSS 有很多属性，不常用的话，记不住是很正常的。要善用搜索引擎哦！
如果不想自己写的话，可以使用别人写的 CSS 文件。可以去尝试了解一下 Bootstrap，它提供了很多漂亮的样式！
后台
当然，一个网站不能把一堆文件发给你之后，就啥也不管了。有时候，它想让不同的用户看到不同的东西。比如，当你来到 B 站并且登录，它得判断你是谁，然后决定给你发送怎么样的页面。
这些判断，发生在他的服务器（后台）上。它可能就住在你访问的 IP 地址那里，也可能不知道在哪儿。总之，他们怎么处理，是他们的事情，我们以后再考虑。