Web 应用

也许你已经注意到，在前面的章节中，我使用了发送方和接收方这两个不太直观的术语，因为它们并不代表你可能知道的任何特定场景，而是以一种通用的方式代表所有场景。使用这种术语的主要原因是为了将 HTTP 与网络应用程序区分开来。在本书的最后，你会发现 HTTP 不仅用于网站。

如果你正在阅读本书，那么你已经知道什么是网络应用。或者，你可能还知道其他术语，如网站或网页。让我们试着给出一些定义。

网页是包含内容的单个文档。它包含可以打开其他不同内容网页的链接。

网站是网页的集合，通常存在于同一服务器中，并且相互关联。

网络应用程序只是一个运行在客户端（通常是浏览器）上并与服务器通信的软件。服务器是一台远程机器，负责接收客户端的请求、处理请求并生成响应。该响应将返回客户端，一般由浏览器呈现，以便显示给用户。

尽管这不在本书的讨论范围之内，但你可能有兴趣知道，不仅浏览器可以充当客户端，生成请求并将其发送给服务器；甚至服务器也可以主动向浏览器发送信息。

那么，网站和网络应用程序有什么区别呢？网络应用程序可以是具有特定功能的大型网站的一小部分。此外，并非所有网站都是网络应用程序，因为网络应用程序总是在做一些事情，而网站可能只是显示信息。

HTML、CSS 和 JavaScript

网络应用程序由浏览器渲染，以便用户可以看到其内容。为此，服务器需要发送页面或文档的内容。文档使用 HTML 来描述其元素及其组织方式。元素可以是链接、按钮、输入框等。一个简单的网页示例如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Your first app</title>
    </head>
    <body>
        <a id="special" class="link" href="http://yourpage.com">Your page</a>
        <a class="link" href="http://theirpage.com">Their page</a>
    </body>
</html>

让我们关注高亮的代码。正如你所看到的，我们正在描述两个带有一些属性的 <a> 链接。两个链接都有一个类、一个目标和一个文本。第一个还包含一个ID。将此代码保存为名为 index.html 的文件并执行它。你将看到你的默认浏览器打开了一个非常简单的页面，里面有两个链接。

如果我们想添加一些样式，或更改链接的颜色、大小和位置，我们需要添加 CSS。CSS 描述了 HTML 中的元素是如何显示的。有几种方法可以包含 CSS，但最好的方法是将其放在一个单独的文件中，然后从 HTML 中引用它。让我们更新我们的 <head> 部分，如下面的代码所示：

<head>
    <meta charset="UTF-8">
    <title>Your first app</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

现在，让我们在同一文件夹中创建一个新的 mystyle.css 文件，其中包含以下内容：

.link {
    color: green;
    font-weight: bold;
}
#special {
    font-size: 30px;
}

该 CSS 文件包含两个样式定义：一个是 link 类样式定义，另一个是 special ID 样式定义。类别样式将应用于两个链接，因为它们都定义了这个类别，并将它们设置为绿色和粗体。增加链接字体的 ID 样式只应用于第一个链接。

最后，为了给网页添加行为，我们需要添加 JS 或 JavaScript。JS 是一种编程语言，它本身就需要一整本书的篇幅来介绍，而事实上，它的内容相当丰富。如果你想试一试，我们向你推荐 Marijn Haverbeke 编写的免费在线书籍《Eloquent JavaScript》，你可以在 http://eloquentjavascript.net/ 上找到这本书。与 CSS 一样，最好的方法是添加一个单独的文件，然后从我们的 HTML 中引用它。用以下突出显示的代码更新 <body> 部分：

<body>
    <a id="special" class="link" href="http://yourpage.com">Your page</a>
    <a class="link" href="http://theirpage.com">Their page</a>
    <script src="myactions.js"></script>
</body>

现在，创建一个包含以下内容的 myactions.js 文件：

document.getElementById("special").onclick = function() {
    alert("You clicked me?");
}

JS 文件添加了一个函数，当点击特殊链接时将调用该函数。该函数只是弹出一个提示。您可以保存所有更改并刷新浏览器，查看现在的外观和链接的行为。

包含 JS 的不同方式

您可能会注意到，我们在 <head> 部分的末尾包含了 CSS 文件引用，而在 <body> 的末尾包含了 JS。实际上，你可以在 <head> 和 <body> 中都包含 JS；只要记住，脚本一旦被包含，就会立即执行。如果脚本引用了尚未定义的字段或稍后将包含的其他 JS 文件，JS 将无法执行。

恭喜您你刚刚写出了自己的第一个网页。还不满意？那你就读对书了！在本书中，你将有机会接触到更多的 HTML、CSS 和 JS，尽管本书尤其侧重于 PHP。