Web应用概述 | 小菜学网络

随着互联网的蓬勃发展，各式各样的网站如雨后春笋般迸发出来，Web 逐渐成为 TCP/IP 协议栈的杀手锏应用。

那么，Web 应用是如何登上武林盟主之位的？它都包含哪些要素？又是如何工作的？本文带领大家，好好捋一捋 Web 应用背后的故事。

万维网

网络技术的发展激起人们对信息的渴望，但早年间信息的获取手段还相对有限，而且很不方便。你得知道自己想要的信息（一般是文件）在什么服务器上，应该使用什么软件来下载，而且信息与信息间缺少关联。

为了解决诸多不便，英国科学家 蒂姆·伯纳斯-李 在 1980 年发明了 万维网（ world wide web ），简称 Web 。这是一个由许多互相链接的超文本网页组成的信息系统，可以通过 互联网 来访问。

虽然 Web 有时跟互联网有些混淆，但两者并不等同，Web 只是互联网提供的服务之一。尽管如此，Web 却是信息时代发展的核心，数十亿用户通过 Web 享受网络和信息服务。

Web 由成千上万的网站组成，每个网站又由许多网页组成。网页跟网页间则互相链接，形成一个有机整体。网页是 Web 的基石，它采用一种统一的结构化标记语言 HTML 来组织信息。

用户通过 浏览器 来访问网站，网页经过浏览器解释和渲染，最终呈现在用户眼前。由于标记语言 HTML 有统一的标准，只要有浏览器就能访问各种网站，享受各种服务，门槛大大降低。

这可能就是 Web 成为武林盟主的关键因素。

网站一般由 Web 服务器提供服务，而浏览器则向服务器请求网页资源。不同的浏览器或网站，必须对如何请求资源达成一致，于是有了统一的应用层协议 HTTP ，即 超文本传输协议（ hypertext transfer protocol ）。

HTTP 底层使用 TCP 作为传输层协议，浏览器进程需要先发起到服务器进程的 TCP 连接。TCP 为通信双方提供可靠的字节流传输服务，而 HTTP 则规定了请求资源应该发什么，响应资源又该发什么。

URL

Web 上的一个网页或者其他网络资源，都可以通过一个 统一资源定位符（ uniform resource locator ）唯一确定，简称 URL 。 URL 是 Web 的标准资源地址，就像门牌号一样，为访问资源指明方向。

以本文为例，它是我网站上的一个网页，URL 由三部分组成：

1

https://fasionchan.com/network/http/web/

https ，表明访问协议，是 http 的安全升级版，暂且认为它跟 http 一样；
fasionchan.com ，表明服务器；
/network/http/web/ ，表明资源路径，即网页在服务器上的路径；

用大白话讲就是用 https 协议，访问服务器 fasionchan.com 上的网页 /network/http/web/ 。

HTML

Web 网页包含结构化的信息，通常称为 超文本标记语言（ hypertext markup language ），简称：HTML 。HTML 定义网页的标题、段落、列表等语义结构，并在一定程度上描述网页的外观。

元素

HTML 语言表现为由尖括号包围起来的标签（有时也称为元素），<html> 就是一个元素。标签通常成对出现：

1

<title>关于小菜</title>

<title> 为 开始标签 ，表示元素 title 的开始；
</title> 为 结束标签 ，表示元素 title 的结束；
而两个标签之前的部分就是元素的内容（ content ）；

每个元素都表达自己独特的语义，<html> 表示整个文档，<body> 表示文档体（可视部分），而 <p> 表示一个段落。有些元素可以嵌套包含其他元素，例如 <body> 可以包含多个 <p> 表示文档体包含多个段落。

链接

通过链接跳转到其他网页，是 HTML 的一大杀手锏。网页一旦完成关联，形成关系化信息，便可极大方便访问。举个例子，通过小菜学编程这个链接可以跳转到小菜网站首页。

网页链接由 <a> 标签标记，结构如下：

1

<a href="https://fasionchan.com">小菜学编程</a>

href 为标签属性（ attribute ），指定目标网页的 URL ；
标签包围起来的部分文本为链接的可视文案；

例子

我们来看一个例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


<!DOCTYPE html>
<html>
  <head>
    <title>关于小菜</title>
  </head>
  <body>
    <section>
      <h1>关于小菜</h1>
      <img src="https://fasionchan.com/images/profile.png" />
      <p>fasionchan</p>

      <p>
        书单：<a href="https://fasionchan.com/books/">经典技术书</a>
      </p>
      <p>
        网站：<a href="https://fasionchan.com/">fasionchan.com</a>
      </p>
      <p>
        微信公众号：小菜学编程
      </p>

      <div>
        <img src="https://cdn.fasionchan.com/coding-fan-wechat-qrcode.jpg" />
      </div>
    </section>

    <section>
      <h1>我的作品</h1>
      <ul>
        <li>
          <a href="https://fasionchan.com/python-source/">Python源码剖析</a>
        </li>
        <li>
          <a href="https://fasionchan.com/network/">小菜学网络</a>
        </li>
        <li>
          <a href="https://fasionchan.com/python/">小菜学Python</a>
        </li>
        <li>
          <a href="https://fasionchan.com/algorithm/">小菜学算法</a>
        </li>
      </ul>
    </section>
  </body>
</html>

没错，正是小菜制作的个人名片！点击这个链接即可查看网页效果。

不过您可能会发现，虽然网页把小菜的主要信息都展示出来了，但视觉效果并不好看。

因为 HTML 作为承载网页的主体，主要负责信息的语义结构定义。至于网页好不好看，不是 HTML 关注的重点。我们待会再来看看，如何给网页加上样式，让它变得更好看。

我们回过头来考察这个 HTML 网页，

第一行 <!DOCTYPE html> 是文档的标记，它表明这是一个 HTML5 文档。浏览器拿到网页文档后，正是根据标记类型对文档进行解析、渲染。

往下是 <html> 标签，它包含两个子标签。其中，<head> 表示文档的头部，一般保存 元数据 ；<body 表示文档的主体，也就是文档的可视内容。<head> 包含 <title> 标签，保存文档标题，浏览器一般会在标题栏中展示。

<body> 主体包含两个 <section> 标签，表示网页划分为两个部分。而 <section> 下又包含 <p> 段落、<h1> 一级标题、<h2> 二级标签、<img> 图片、<a>链接等元素，共同呈现网页的结构化信息。

现在网页虽然还不好看，但基本的骨架已经有了，信息已然能够顺利呈现！

CSS

为了让网页更好看，我们需要给 HTML 元素加上样式。

行内样式

首先，头像和二维码这两张图片尺寸有点大，将它们调小会好一些。我们可以给 <img> 标签加上 style 属性，来控制元素的宽度。

先将头像宽度设为 50 像素（高度没指定，浏览器将根据原图比例自动计算）：

1

<img src="https://fasionchan.com/images/profile.png" style="width: 50px;" />

再将二维码宽度设为 150 像素：

1

<img src="https://cdn.fasionchan.com/coding-fan-wechat-qrcode.jpg" style="width: 150px;" />

现在看起来好多了，点击这个链接可以查看效果：小菜名片（行内样式）。

像这样通过 HTML 元素 style 属性指定的样式，通常叫做 行内样式（ inline style ）。

当然了，HTML 也可以通过属性直接设置图片的宽度：

1

<img src="https://fasionchan.com/images/profile.png" width="50" />

但这不是 HTML 的主业，一般更推荐通过样式来控制。

层叠样式表

行内样式很简单，但元素一多写起来就不方便。比如想要调节所有 <p> 段落的字体大小，逐个写 style 属性得写到猴年马月呢！

这时，样式标签 <style> 应运而生！<style> 标签保存网页的样式表，一般位于 <head> 头部下。

请看这个例子，将所有 <p> 段落元素的字体大小设置为 16 像素：

1
2
3
4
5


<style>
  p {
    font-size: 16px;
  }
</style>

这种样式表语言，用来描述 HTML 文档的呈现外观，被称为 层叠样式表（ cascading style sheets ），简称 CSS 。

样式表通常是写在独立的 css 文件中，然后通过 <link> 标签来引用：

1

<link href="./about-style.css" rel="stylesheet" />

<link> 通常位于 <head> 头部下，href 属性指定样式表资源的 URL ，这里写的是相对路径；rel 属性则表明资源是样式表。

小菜名片页加上 CSS 后已经好看多了，不信点击小菜名片（CSS）看看！可以按右键 查看网页源代码 ，看看 HTML 是如何通过 <link> 标签引用 CSS 样式表的。

CSS 正是网页的化妆师，让原本平淡的骨架，拥有一个迷人的容颜！

JavaScript

最新版的小菜名片默认把二维码隐藏起来，因为这安利显得太生硬了。小菜在公众号旁边放了个关注按钮，想着点击才将二维码展示出来，但还没实现。

想要实现这种动态的交互动作，需要借助浏览器内置的脚本语言—— JavaScript 。HTML 可以通过 <script> 标签内嵌一些 JavaScript 代码，然后由浏览器解释并执行。

先要实现点击按钮显示二维码，需要通过 JavaScript 给按钮加上点击处理逻辑：

1
2
3
4
5
6
7


<script>
  let $follow = document.querySelector('.follow');
  let $qrcode = document.querySelector('.qrcode-zone');
  $follow.addEventListener('click', function() {
    $qrcode.style.display = 'block';
  });
</script>

第一行代码，通过类选择器找到关注按钮；第二行代码，用同样的方式找到二维码图片元素；再往下的代码为按钮注册 click 回调函数，当按钮被点击时自动执行；而回调函数将二维码设置为显示。

关于元素的类，还有 类选择器 等前端知识超出本文范围，不再赘述。

同样，JavaScript 代码也可以写在独立的 js 文件中，在从 HTML 中引用：

1

<script src="./about-script.js"></script>

注意到，引用外部 js 代码还是使用 <script> 标签，src 属性指定代码资源的 URL ，这里写的是相对路径。

现在小菜的名片已经像模像样了，点击小菜名片（终极版）围观吧！从中体会 CSS 和 JavaScript 的作用，以及在 HTML 中引用它们的方式。

有了 JavaScript 的加持，HTML 网页可以实现很动态的交互方式，更有人情味了！

小结

Web 是互联网最流行的应用，没有之一；
互联网上有成千上万的 Web 网站，一个网站可以包含很多网页；
网页的结构信息由 HTML 描述，通过 <a> 标签互相链接；
网页的呈现外观由 CSS 定义；
网页的交互控制由 JavaScript 脚本编程语言实现；
HTML 、CSS 、JavaScript 以及图片等 Web 资源，通过 URL 唯一确定；
应用层协议 HTTP 负责传输 Web 资源，它规定了请求和响应的细节；
HTTPS 是 HTTP 协议的升级版，但比 HTTP 协议更安全；

【小菜学网络】系列文章首发于公众号【小菜学编程】，敬请关注：