【九层之台】Web开发教程：1. 基础

1. 基础

在这一章里，我们将对网页应用的开发和原理有一个大体上的了解。

本章可能是最无聊的章节，因为本章不包含实践内容，而且概念略微复杂比较劝退。了解的不是很透彻也不会影响网页制作，各位初学者了解一下就好！

网页的制作方法

很遗憾地告诉大家，得写代码。

网页的内容、形式和交互，完全是由HTML、CSS和JS三组代码指定和控制的。因此，完成一个网页应用的主要任务，就是用代码将这个应用的所有内容和逻辑表达出来。

有人就会问了，难道没有可视化的工具帮助我们像绘图一样绘制网页吗？当然有，但是效果不好。当下流行的网页制作软件还是Adobe公司的Dreamweaver，它确实可以快速有效地捏一个网页，但是我认为用可视化工具画图做出来的网页，有如下几点问题：

• 很难很好地兼容各种移动端平台
• 很难实现灵活的交互逻辑
• 很难使用各种组件库
• 不能深入地理解网页，阻止你进一步地设计出更好的网页

其实我也没好好研究过这些做网页的软件，当年我师傅也没怎么跟我提。总的来说，代码还是要写的。就好像传说中的 $L_AT^EX$一样，网页不是一种所见即所得的东西，我们需要用抽象的代码去表述形象化的界面和交互模式。

简单的网页加载过程

本节是原理性的阐述，对初学者来说相对复杂，建议暂时先快速浏览一下并继续学习后面的实践章节。

假设你在电脑上的Google Chrome浏览器中访问了某个公司的网页，让我们了解一下，你输入网址按下回车的那一瞬间发生了什么。

1. DNS 寻址：浏览器根据你输入的URL中的域名部分查询DNS服务器，找到域名对应的主机IP地址。

是不是有超多不懂的？没关系，这里就是解释概念的地方！

• IP地址：就像你家地址一样，IP地址就是某一台主机在互联网上的地址，通常是一系列数字。
• 域名：域名同样相当于互联网上的地址。如果IP地址类似经纬度，那么域名就类似于街道地址了。相对于IP地址来说，域名更加方便人类识读。
• DNS：Domain Name System，专门负责提供域名和IP的对应查询。
• URL：Uniform Resource Locator，统一资源定位符，说白了就是网址。简单来说，如果你想要找到互联网上的某个特定的资源（文件），光有目标主机的地址可不行，你还需要知道目标主机的访问协议、目标文件的位置（路由）和参数等等。URL的固定格式像这样：协议://域名或IP地址:端口号/路由?查询参数字符串。举个例子：https://baike.baidu.com/item/统一资源定位系统 这就是一个典型的URL，不过它省略了端口，并且没有查询字符串。

现在再看一眼第一步，是不是感觉更清晰一点？如果不懂的话也没有关系，本章内容不怎么影响后面的网页制作部分！

2. 请求：浏览器向目标地址发起http或者https协议的网络请求（一个数据包），包含URL等信息，等待服务器回复。

• http：HyperText Transfer Protocol，超文本传输协议。所谓协议，就是把数据打包成一种传输双方都能够看懂的形式。
• https：Hyper Text Transfer Protocol over SecureSocket Layer，简单理解就是加了一层加密算法的http协议，在这里不做详细论述。
• 服务器：其实就是一台主机（电脑），只不过它是目标资源（比如某个网页）的存储位置。

3. 服务器响应：服务器上运行的Web服务软件根据http协议返回URL中指定的资源（或者错误码），在正常访问网页的时候通常是一个HTML格式的内容。对于静态网页来说，就是一个.html文件的内容（没错，你在上一章里面新建的index.html就是一个.html文件）。

• Web服务软件：一种服务端软件，在服务器上长期保持运行，负责响应和处理http或者https请求。
• HTML：（这是下一章的内容）一种描述网页内容的代码语言。
• 静态网页：指页面的所有内容是由一个文件指定的，访问网页的时候等效于访问目标文件（通常是.html文件）。相对应的：
• 动态网页：指页面的内容是动态生成的。通常是服务端程序在处理访问请求的时候，根据请求中包含的信息（例如用户身份信息）生成的HTML代码。
  P.S. 关于动态网页的更多细节，会在7. 网络章节讨论。

4. 浏览器加载其它资源：服务器响应的HTML代码中可能有调用别的资源（例如JS代码，CSS代码或者各种图片等等），浏览器会根据HTML中的设定自动加载对应的资源，步骤与1-4步相同。

5. 浏览器渲染：浏览器根据HTML代码指定的网页内容和CSS代码指定的网页样式，以及JS代码指定的网页交互逻辑进行页面渲染，把代码转化为UI界面，于是我们就看到了一个网页。

• 浏览器：浏览器是一个本地应用程序，它根据一定的标准引导页面加载和渲染页面，其中的技术和细节极其复杂。
• CSS：Cascading Style Sheets，层叠样式表。用于设定HTML中各个元素的显示样式。我们会在第三章中详细学习。
• JS：Javascript，属于Web的编程语言，在Web应用中用于实现用户和网页应用的交互逻辑。我们会在第四章中详细学习。
• UI：User Interface，也就是我们看到的用户界面。

一个简单的网页加载过程到这里就结束了，更多的相关内容会在7. 网络和9. 发布章节中讨论。

引用路径

在网页中引用别的资源（例如图片或CSS文件等），都涉及到引用路径的问题。基本规则如下：

• /表示从根目录开始
• ./表示当前路径下
• ../表示上一级目录下

例如，在protocol://domain/web/index.html中引用protocal://domain/logo.png这张图片，可以使用的引用方式有：

• /logo.png 根目录下
• ../logo.png 上一级目录下