Web 标准模型
本文提供了一些关于 Web 和 Web 标准的有用背景知识——它们是如何产生的、Web 标准技术是什么以及它们如何协同工作。
| 预备知识 | 熟悉您的计算机操作系统、Web 浏览器和 Web 技术的基本知识。 |
|---|---|
| 学习成果 |
|
Web 的简史
在 20 世纪 60 年代后期，美国军方开发了一个名为 ARPANET 的通信网络。这可以被认为是互联网的先驱，因为它采用分组交换，并首次实现了 TCP/IP 协议套件。这两项技术构成了互联网基础设施的基础。
1980 年，蒂姆·伯纳斯-李（通常被称为 TimBL）编写了一个名为 ENQUIRE 的笔记本程序，其中包含不同节点之间链接的概念。听起来熟悉吗？
快进到 1989 年，TimBL 撰写了 信息管理：一项提议 和 CERN 的超文本；这两份出版物共同为 Web 的工作方式提供了背景。它们引起了相当大的兴趣，足以说服 TimBL 的上司允许他继续创建一个全球超文本系统。
到 1990-91 年，TimBL 已经创建了运行第一个版本万维网（通常称为 Web）所需的所有东西——HTTP、HTML、第一个 Web 浏览器（名为 WorldWideWeb）、一个 Web 服务器和一些可供浏览的网页。
注意：人们有时会互换使用“Web”和“互联网”，但它们是不同的事物。互联网是使信息在全球不同服务器和客户端之间传输的基础设施，而 Web 是构建在互联网之上的一个系统。Web 定义了通过互联网传输的信息类型（内容和代码）以及管理该传输的通信协议。
1994 年，TimBL 创立了万维网联盟（W3C），这是一个汇集了来自众多不同公司的代表，共同致力于创建 Web 技术的组织。W3C 致力于标准化和改进现有的 Web 技术，如 HTML 和 HTTP，并创建了 CSS 和 JavaScript 等新技术。CSS 和 JavaScript 对于赋予 Web 样式和交互性尤其重要，使其看起来更像我们今天所知的 Web。
在接下来的几年里，Web 爆炸式发展，发布了多个浏览器，建立了数千个 Web 服务器，并创建了数百万个网页。其他标准组织也出现，以帮助标准化 Web 技术的不同方面。
注意：如果您对阅读更详细的 Web 历史感兴趣，请尝试在您最喜欢的搜索引擎中搜索“Web 历史”，看看您能找到什么。
Web 标准
Web 标准是我们用来构建网站的技术。这些标准以冗长的技术文档形式存在，称为规范，它们详细说明了技术应该如何工作。这些文档对于学习如何使用它们所描述的技术用处不大（这就是为什么我们有像 MDN Web Docs 这样的网站）。相反，它们旨在供软件工程师实现这些技术（通常在 Web 浏览器中）。
标准机构和流程
Web 标准由标准机构创建——这些机构邀请来自不同技术公司的团体齐聚一堂，就技术应如何以最佳方式满足其所有用例达成一致。
W3C 是最著名的 Web 标准机构，但还有其他机构。例如
- WHATWG 维护 HTML Living Standard，它精确描述了 HTML（所有 HTML 元素及其相关的 API 以及其他周边技术）应如何实现。
- TC39 和 ECMA 规定并发布了 ECMAScript 标准，现代 JavaScript 就是基于此标准。
- Khronos 发布 3D 图形技术，例如 WebGL。
标准创建的完整过程可能深奥复杂。然而，除非您想创建自己的 Web 技术功能，否则您不需要理解其中的大部分。如果您想为新技术的讨论做出贡献并提供反馈，通常只需加入相关的邮件列表或其他讨论机制。标准讨论是公开进行的，因此称为“开放”标准。
现在，我们将向您提供一个关于标准流程如何运作的通用、高级理解
-
有人注意到需要一个新的 Web 标准功能，这将使开发人员的工作更轻松。例如，可能存在一种在 Web 用户界面中普遍使用的常见模式，但实现起来很麻烦。一个专门的 CSS 功能将使其变得容易得多。这个“某人”可以是任何人——一个独立的开发人员，或者一个为大型科技公司工作的工程师。
-
该人与其他开发人员、浏览器工程师等讨论此功能，并开始引起人们对实现该功能的兴趣。通常他们会撰写一份说明文档，解释对该功能的需求以及它将如何工作，并提供一个代码演示，展示该功能在实际应用中的样子。
-
如果该功能引起了足够的兴趣，它将在相关标准机构工作组内正式讨论。例如，CSS 功能通常由 CSS 工作组 (WG) 讨论（另请参阅 CSS 工作组维基百科页面 以获取更多描述和历史记录）。在接受一项新的 Web 技术之前，必须对其进行严格评估，以确保它对 Web 有利——例如，它不会引入任何安全问题，它具有可访问性和兼容性，并且不依赖于专利。
-
为了证明该功能，会发生几件事。这些点都可能与第 3 点同时发生，甚至更早（浏览器供应商有时会实现专有/非标准功能，然后尝试在之后将其标准化）
- 一个或多个浏览器厂商将实现新功能的实验版本，通常默认禁用，但那些希望测试并提供反馈的人可以启用它。
- 工作组成员还会将其添加到技术规范中，以便浏览器厂商能够一致地实现它。
- 他们还会征求其他浏览器厂商的反馈，以了解他们对提案有什么问题，以及他们实现该提案的可能性。这些被称为标准立场。例如，请参阅 Mozilla 标准立场。
- 相关人员还将编写一套全面的测试，以证明该功能按所述工作。
-
最终，如果一切顺利，该功能将在所有浏览器中实现，并可在创建网站时开始使用。
注意：提出该功能、在浏览器中实现该功能、创建规范、编写测试并收集反馈的人完全可能是同一个人/群人。
您可以在特定标准机构流程中找到更多信息。例如：
Web 标准关键原则
Web 的关键原则，也正是这些原则使得 Web 成为一个独特而令人兴奋的行业，如下所示：
- 开放贡献和使用，因此不受专利限制或单一私人实体控制。
- 易于访问和互操作。
- 它们不会破坏网络。
让我们更详细地了解这些内容。
“开放”标准
Web 标准的一个关键方面，也是 TimBL 和 W3C 从一开始就达成一致的，就是 Web（和 Web 技术）应该开放。这意味着它们可以自由贡献和使用，不受专利/许可的限制。这很重要——如果一项 Web 技术依赖于专利/许可技术才能运行，那么专利/所有者可能会向实现该技术的浏览器厂商收取巨额费用，而这些成本最终会转嫁给浏览器用户。
此外，由于 Web 技术是开放的，由许多不同公司协作创建的，这意味着没有任何一家公司可以控制它们，这是一件非常好的事情。您不会希望一家公司突然决定将整个 Web 放在付费墙后面，或者发布一个每个人都必须购买才能继续制作网站的新版本 HTML，或者更糟糕的是，决定他们不再感兴趣并将其关闭。
开放标准使网络能够保持一个免费的公共资源，任何人都可以免费编写代码来构建网站，任何人都可以为标准创建过程做出贡献。
可访问性和互操作性
Web 和 Web 浏览器从根本上设计为使 Web 内容对残障人士可访问。它最初被设想为一个伟大的平衡器，使人们能够不受环境限制地获取信息。这意味着，例如：
- 无法使用鼠标或指向设备的人可以使用键盘来浏览网页。
- 视障人士可以放大内容，或者使用一种称为屏幕阅读器的程序来为他们朗读内容，并以易于理解的方式描述控件。
注意：您将在学习路径的后期了解更多关于可访问性的信息。
此外，Web 技术旨在实现互操作性。由于 Web 技术是按照已发布的标准实现的，因此浏览器应为给定输入（例如，HTML、CSS 或 JS 代码）提供相同的渲染输出——换句话说，网站应在多个浏览器中一致地工作。
不要破坏网络
您还会听到关于开放网络标准的另一个短语是“不要破坏网络”。其背后的思想是，任何新的网络技术都应该与之前的东西向后兼容，这样现有的网站将继续以与以前相同的方式运行。
Web 浏览器厂商应该能够实现新的 Web 技术，而不会导致渲染或功能上的差异，从而导致他们的用户认为网站已损坏并因此尝试其他浏览器。
现代 Web 技术概述
如果您想成为一名前端 Web 开发人员，需要学习一些技术。在本节中，我们将简要介绍它们。
HTML、CSS 和 JavaScript
HTML、CSS 和 JavaScript 是您用来构建网站的三个主要技术。您在上一模块中已经见过它们，但为了回顾：
- 超文本标记语言，或称 HTML，是一种标记语言，由您可以包装（标记）内容的各种元素组成，以赋予其含义（语义）和结构。如果我们采用房屋建造的类比，HTML 就像房屋的地基和墙壁，它们赋予房屋结构并将其连接在一起。
- 层叠样式表 (CSS) 是一种基于规则的语言，用于为您的 HTML 应用样式——例如，设置文本和背景颜色、添加边框、动画化事物或以某种方式布局页面。在房屋类比中，CSS 就像您用来美化房屋的油漆、墙纸、地毯和画作。
- JavaScript 是我们用来为网站添加交互性的编程语言，从动态样式切换到从服务器获取更新，再到复杂的 3D 图形。
- 您还会听到 API 这个术语与 JavaScript 一起使用，它代表 应用程序编程接口。JavaScript API 是构建在 JavaScript 之上的功能，它允许您以可管理的方式控制其他更复杂的代码片段或计算机上的其他功能（例如您的网络摄像头或麦克风等硬件设备）。
- 在房屋类比中，JavaScript 就像炊具、电视、微波炉或吹风机——赋予您房屋有用功能的东西。
其他网络技术
网络上还有其他技术，例如
然而，HTML、CSS 和 JavaScript 是迄今为止最重要的学习技术，因此我们将在学习路径中主要关注这些技术。
工具
一旦您了解了用于构建网页的标准基础技术（如 HTML、CSS 和 JavaScript），您很快就会接触到各种可以使您的工作更轻松或更高效的工具。示例包括：
服务器端语言和框架
HTML、CSS 和 JavaScript 是前端（或客户端）语言，这意味着它们由浏览器运行，以生成用户可以使用的网站前端。
还有另一类语言称为后端（或服务器端）语言，这意味着它们在服务器上运行，然后将结果发送到浏览器显示。服务器端语言的一个典型用途是从数据库中获取一些数据，生成一些包含数据的 HTML，然后将 HTML 发送到浏览器以显示给用户。
服务器端框架和语言示例包括 ASP.NET (C#)、Django (Python)、Laravel (PHP) 和 Next.js (JavaScript)。
这些技术不被认为是“Web 标准”——它们是由W3C和WHATWG等Web标准组织之外的组织开发的——尽管其中一些可能拥有类似开放的流程。
静态与动态
客户端和服务器端语言通常还有另一种描述方式，即静态和动态。
- 一个普通的 HTML 文件存储在服务器上。当被请求时，它原封不动地交付给客户端，并由浏览器渲染。因为它不会改变，所以被称为“静态”。
- 当服务器端代码（例如，Python 脚本或 ASP.NET 页面）生成一些包含数据的 HTML 并将该 HTML 返回给客户端时，HTML 的内容会根据服务器端代码所做的操作而变化。因此，它被称为“动态”。
静态代码和动态代码的概念往往有些重叠。服务器端语言通常在模板文件中定义 HTML 结构，这些结构大多是静态 HTML，其中包含一些特殊的动态部分，这些部分根据需要插入的数据而变化。
Web 最佳实践
我们简要介绍了您将用于构建网站的技术。现在让我们讨论 Web 开发人员通常采用的最佳实践，以确保他们的网站尽可能多的人使用。
在进行 Web 开发时，不确定性的主要原因在于您不知道每个用户将使用何种技术组合来查看您的网站。
- 用户 1 可能正在 iPhone 上查看，屏幕小而窄。
- 用户 2 可能正在带有宽屏显示器的 Windows 笔记本电脑上查看。
- 用户 3 可能视力受损，并使用屏幕阅读器阅读和与网页交互。
- 用户 4 可能正在使用一台无法运行现代浏览器的非常旧的台式机。
由于您不确切知道用户将使用什么，因此您需要采取防御性设计——让您的网站尽可能灵活，以便所有上述用户都能使用它，即使他们可能无法获得相同的体验。
您将在学习过程中遇到以下概念，它们代表了您的网站应理想遵循的最佳实践。现在不必过于担心这些。在课程的大部分内容中，我们试图隐式地教授这些知识，这意味着当我们教您 HTML、CSS 和 JavaScript 时，我们的示例将尽可能遵循最佳实践。在您学习旅程的后期，您可能会探索这些领域的显式教学。
- 渐进增强
-
创建一个最小化的体验，为所有用户提供基本功能，并在支持它们的浏览器中叠加更好的体验和其他增强功能。渐进增强通常被认为不重要，因为现在浏览器往往更一致地支持新功能，而且人们往往拥有更快的互联网连接和更高的数据使用限制。但是，考虑一些示例，例如减少装饰以使移动体验更流畅并节省数据，或者为按兆字节付费或有计量连接的用户提供更轻、低带宽的体验。
- 跨浏览器兼容性
-
努力确保您的网页在尽可能多的设备上运行。这包括使用所有浏览器都支持的技术，为能够处理这些技术的浏览器提供更好的体验（渐进增强），以及/或编写代码，使其在旧版浏览器中回退到更简单但仍可用的体验（称为优雅降级）。它还需要进行测试，以查看是否有任何在特定浏览器中失败，然后进行更多工作来修复这些故障。
- 分层
-
将您的内容（HTML）、样式（CSS）和行为（JavaScript）放在不同的代码文件中，而不是将它们混杂在同一个地方。这样做有很多好处，包括代码管理和理解，以及团队协作/职责分离。实际上，这种分离并非总是清晰的。它是一个尽可能追求的理想，而不是一个绝对的要求。
- 响应式网页设计
-
使您的功能和布局灵活，以便它们可以自动适应不同的浏览器。一个明显的例子是，一个网站在桌面上宽屏浏览器中以一种方式布局，但在手机浏览器上显示为更紧凑的单列布局。现在尝试调整浏览器窗口的宽度，看看网站布局发生了什么变化。
- 性能
-
让网站尽可能快地加载，同时使其直观易用，这样用户就不会感到沮丧并转到其他地方。
- 国际化
-
使网站能够被来自不同文化、讲不同语言的人使用。这里既有技术方面的考虑（例如调整布局，使其仍然适用于从右到左或从上到下的语言），也有人文方面的考虑（例如使用简单、非俚语的语言，以便不同文化更有可能理解您的文本）。
- 隐私和安全
-
这两个概念相互关联但有所不同。隐私是指允许人们私下处理自己的事务，而不是监视他们或收集超出绝对必要的数据。安全是指以安全的方式构建您的网站，以便恶意用户无法从您或您的用户那里窃取其中包含的信息。