网络和网络标准

我们只简要介绍，因为有很多（更详细的）关于 Web 历史的资料，我们将在稍后提供链接（如果你想了解更多详细信息，也可以尝试在你喜欢的搜索引擎中搜索“Web 历史”，看看你能找到什么）。

在 1960 年代后期，美国军方开发了一个名为 ARPANET 的通信网络。这可以看作是 Web 的前身，因为它运行在 分组交换 上，并首次实现了 TCP/IP 协议套件。这两种技术构成了互联网基础设施的基础。

1980 年，蒂姆·伯纳斯-李（通常称为 TimBL）编写了一个名为 ENQUIRE 的笔记本程序，该程序的特点是不同节点之间的链接概念。听起来熟悉吗？

快进到 1989 年，TimBL 撰写了 信息管理：一项提案 和 CERN 的超文本；这两份出版物共同提供了 Web 工作方式的背景。它们引起了相当大的兴趣，足以说服 TimBL 的上司让他继续创建全球超文本系统。

到 1990 年底，TimBL 已创建了运行 Web 的第一个版本所需的一切——HTTP，HTML，第一个 Web 浏览器，称为 WorldWideWeb，一个 HTTP 服务器，以及一些网页可供查看。

在随后的几年里，Web 迅速发展，发布了多个浏览器，建立了数千个 Web 服务器，并创建了数百万个网页。好吧，这是一个关于发生的事情的非常简单的总结，但我们确实承诺你一个简短的总结。

最后一个要分享的重要数据点是，1994 年，TimBL 成立了 万维网联盟 (W3C)，这是一个组织，它汇集了来自许多不同科技公司的代表，共同制定 Web 技术规范。在那之后，其他技术相继出现，例如 CSS 和 JavaScript，Web 开始变得越来越像我们今天所知道的 Web。

**Web 标准** 是我们用来构建网站的技术。这些标准存在于称为规范的长篇技术文档中，这些文档详细描述了技术的具体工作方式。这些文档对于学习如何使用它们描述的技术不是很有用（这就是我们拥有像 MDN Web Docs 这样的网站的原因），而是旨在供软件工程师使用这些技术（通常在 Web 浏览器中）。

例如，HTML Living Standard 精确描述了 HTML（所有 HTML 元素、以及它们相关的 API 和其他周边技术）应该如何实现。

Web 标准由标准机构创建——这些机构邀请来自不同科技公司的群体聚在一起，就技术的最佳工作方式达成一致，以满足所有用例。W3C 是最知名的 Web 标准机构，但还有其他机构，例如 WHATWG（维护 HTML 语言的活动标准），ECMA（发布 ECMAScript 的标准，JavaScript 基于此），Khronos（发布 3D 图形的技术，例如 WebGL），以及其他机构。

Web 标准的一个关键方面是，TimBL 和 W3C 从一开始就同意 Web（和 Web 技术）应该对贡献和使用都是免费的，并且不受专利/许可的约束。因此，任何人都可以免费编写代码来构建网站，任何人都可以参与标准创建过程，在该过程中编写规范。

由于 Web 技术是在许多不同公司的合作下公开创建的，这意味着没有一家公司可以控制它们，这是一件非常好的事情。你不会希望一家公司突然决定将整个 Web 置于付费墙之后，或者发布一个每个人都必须购买才能继续制作网站的 HTML 新版本，或者更糟的是，只是决定他们不再感兴趣，然后关闭它。

这使得 Web 能够保持一个免费提供的公共资源。

你还会听到关于开放 Web 标准的另一个短语是“不要破坏 Web”——这个理念是，任何引入的新 Web 技术都应该向后兼容之前的版本（即旧网站将继续正常工作），并且向前兼容（未来的技术反过来将与我们目前拥有的技术兼容）。当你学习这里提供的学习材料时，你将开始了解如何通过一些非常巧妙的设计和实施工作来实现这一点。

如果你正在寻找工作，Web 行业是一个非常有吸引力的市场。最近公布的数字显示，目前全球大约有 1900 万名 Web 开发人员，而且这个数字将在未来十年翻一番以上。同时，该行业存在技能短缺——那么还有什么比现在学习 Web 开发更好的时机呢？

然而，并非所有都是轻松愉快的——构建网站比以前复杂得多，你必须花一些时间学习你需要使用的所有不同技术，你需要了解的所有技术和最佳实践，以及你需要实现的所有典型模式。你需要几个月的时间才能真正开始上手，然后你需要不断学习，以便你的知识能够跟上 Web 平台上出现的所有新工具和功能，并不断练习和完善你的技艺。

唯一不变的是变化。

这听起来很难吗？别担心——我们的目标是为你提供入门所需的一切，而且事情会变得更容易。一旦你接受了 Web 的不断变化和不确定性，你就会开始享受其中。作为 Web 社区的一部分，你将拥有一个完整的联系人网络和有用的资料来帮助你，你将开始享受它带来的创造性可能性。

你现在是一位数字创意人。享受这种体验，以及谋生的潜力。

如果你想成为一名前端 Web 开发人员，需要学习一些技术。在本节中，我们将简要介绍它们。有关它们如何协同工作的更详细说明，请阅读我们的文章 Web 如何工作。

你可能现在正使用 Web 浏览器阅读这些文字（除非你打印出来，或者使用辅助技术，例如屏幕阅读器来朗读给你听）。Web 浏览器是人们用来浏览 Web 的软件程序，包括 Firefox，Chrome，Opera，Safari 和 Edge。

超文本传输协议，或 HTTP，是一种消息协议，允许 Web 浏览器与 Web 服务器（存储网站的位置）通信。典型的对话类似于

"Hello web server. Can you give me the files I need to render bbc.co.uk"?

"Sure thing web browser — here you go"

[Downloads files and renders web page]

HTTP 消息（称为请求和响应）的实际语法不是那么人性化，但这让你了解了基本思路。

HTML，CSS 和 JavaScript 是构建网站的主要三种技术

• 超文本标记语言，或 **HTML**，是一种标记语言，由不同的元素组成，你可以将内容包装（标记）在其中，以赋予它意义（语义）和结构。简单的 HTML 如下所示
  html

  <h1>This is a top-level heading</h1>
  
  <p>This is a paragraph of text.</p>
  
  <img src="cat.jpg" alt="A picture of my cat" />
  

  如果我们采用房屋建造的类比，HTML 就相当于房屋的地基和墙壁，它们赋予房屋结构并将其固定在一起。
• 层叠样式表 (**CSS**) 是一种基于规则的语言，用于将样式应用于你的 HTML——例如，设置文本和背景颜色，添加边框，动画化事物，或者以某种方式布局页面。例如，以下代码将使我们的 HTML 段落变为红色
  css

  p {
    color: red;
  }
  

  在房屋类比中，CSS 就相当于油漆、壁纸、地毯和绘画，你用它们来使房屋看起来漂亮。
• **JavaScript** 是我们用来为网站添加交互性的编程语言，从动态样式切换，到从服务器获取更新，一直到复杂的 3D 图形。以下简单的 JavaScript 代码将在内存中存储对我们段落的引用，并更改其内部的文本
  js

  let pElem = document.querySelector("p");
  pElem.textContent = "We changed the text!";
  

  在房屋类比中，JavaScript 就相当于烹饪炉、电视、微波炉或吹风机——赋予你的房屋有用功能的事物。

一旦你学习了可用来构建网页的“原始”技术（如 HTML、CSS 和 JavaScript），你很快就会开始遇到各种工具，这些工具可以用来使你的工作更容易或更高效。例如

• 现代浏览器中的 开发者工具 可用来调试代码。
• 测试工具 可用来运行测试，以查看你的代码是否按预期执行。
• 构建在 JavaScript 之上的库和框架，使你能够更快、更有效地构建某些类型的网站。
• 所谓的“代码规范检查器”，它们会根据一组规则查看你的代码，并突出显示你不按规则操作的地方。
• 缩小器，它们会删除代码文件中的所有空白，从而使文件更小，因此可以更快地从服务器下载。

HTML、CSS 和 JavaScript 是前端（或客户端）语言，这意味着它们由浏览器运行，以生成用户可以使用的网站前端。

还有一类语言称为后端（或服务器端）语言，这意味着它们在将结果发送到浏览器以进行显示之前在服务器上运行。服务器端语言的典型用途是从数据库中获取一些数据，并生成一些包含数据的 HTML，然后将 HTML 发送到浏览器以显示给用户。

示例服务器端框架包括 ASP.NET（使用 C#）、Django（使用 Python）、Laravel（使用 PHP）和 Next.js（使用 JavaScript）。

我们简要介绍了构建网站所需的几种技术。现在让我们讨论一下你应该采用的最佳实践，以确保你能够以最佳方式使用这些技术。

在进行网页开发时，最大的不确定性来自你无法预知每个用户会使用什么技术组合来浏览你的网站。

• 用户 1 可能会用 iPhone 浏览，屏幕小而窄。
• 用户 2 可能会用 Windows 笔记本电脑浏览，连接着宽屏显示器。
• 用户 3 可能是盲人，使用屏幕阅读器将网页内容朗读出来。
• 用户 4 可能会使用一台非常老旧的台式电脑，无法运行现代浏览器。

由于你无法确切知道用户会使用什么设备，因此需要进行防御性设计——使你的网站尽可能灵活，以便上述所有用户都能使用它，即使他们可能无法获得完全相同的体验。简而言之，我们努力让尽可能多的人都能使用网络。

在学习过程中，你将遇到以下概念。

• 跨浏览器兼容性是指努力确保你的网页在尽可能多的设备上都能正常运行。这包括使用所有浏览器都支持的技术，为能够处理这些技术的浏览器提供更好的体验（渐进增强），以及编写代码以使其在旧版浏览器中回退到更简单但仍然可用的体验（优雅降级）。它还包括大量测试，以查看某些浏览器中是否出现任何错误，然后进行更多工作来修复这些错误。
• 响应式网页设计是指使你的功能和布局灵活，以便它们能够自动适应不同的浏览器。一个明显的例子是，一个网站在桌面上的宽屏浏览器中以一种方式布局，但在手机浏览器中以更紧凑的单列布局显示。现在尝试调整浏览器窗口的宽度，看看会发生什么。
• 性能是指使网站加载速度尽可能快，但也使其直观易用，这样用户就不会感到沮丧而转到其他地方。
• 无障碍性是指使你的网站尽可能多的人都能使用（相关概念是多样性和包容性，以及包容性设计）。这包括视障人士、听障人士、认知障碍人士或身体残疾人士。它还超越了残疾人士——年轻人或老年人、来自不同文化的人、使用移动设备的人，或网络连接不可靠或速度慢的人呢？
• 国际化是指使网站适应不同文化的用户，他们使用不同的语言。这里有一些技术方面的考虑因素（例如，调整你的布局，使其仍然适用于从右到左，甚至垂直语言），也有一些人文方面的考虑因素（例如，使用简单、不含俚语的语言，这样将你的语言作为第二或第三语言的人更有可能理解你的文本）。
• 隐私和安全。这两个概念相关但不同。隐私是指让人们能够私密地进行活动，而不是监视他们或收集比绝对需要更多的数据。安全是指以安全的方式构建你的网站，以防止恶意用户从你或你的用户那里窃取网站上的信息。

• 万维网的历史
• 互联网是如何工作的？