网络和网络标准

¥Brief history of the web

我们将保持简短，因为有许多（更）详细的网络历史记录，我们稍后将链接到这些记录（也可以尝试在你最喜欢的搜索引擎中搜索 "网络的历史"，看看你会得到什么，如果 你有兴趣了解更多细节。）

¥We'll keep this very brief, as there are many (more) detailed accounts of the web's history out there, which we'll link to later on (also try searching for "history of the web" in your favorite search engine and see what you get, if you are interested in more detail.)

20 世纪 60 年代末，美国军方开发了一种名为 ARPANET 的通信网络。这可以被认为是 Web 的先驱，因为它在 分组交换 上运行，并且是 TCP/IP 协议套件的第一个实现。这两种技术构成了互联网基础设施的基础。

¥In the late 1960s, the US military developed a communication network called ARPANET. This can be considered a forerunner of the Web, as it worked on packet switching, and featured the first implementation of the TCP/IP protocol suite. These two technologies form the basis of the infrastructure that the internet is built on.

1980 年，Tim Berners-Lee（通常称为 TimBL）编写了一个名为 ENQUIRE 的注意本程序，其中包含了不同节点之间链接的概念。听起来有点熟？

¥In 1980, Tim Berners-Lee (often referred to as TimBL) wrote a notebook program called ENQUIRE, which featured the concept of links between different nodes. Sound familiar?

快进到 1989 年，TimBL 在 CERN 编写了 信息管理：一份提案 和 HyperText；这两本发布物共同提供了网络如何运作的背景。他们收到了相当多的兴趣，足以说服 TimBL 的老板允许他继续创建一个全球超文本系统。

¥Fast forward to 1989, and TimBL wrote Information Management: A Proposal and HyperText at CERN; these two publications together provided the background for how the web would work. They received a fair amount of interest, enough to convince TimBL's bosses to allow him to go ahead and create a global hypertext system.

到 1990 年底，TimBL 已经创建了运行第一个网络版本所需的所有东西 - HTTP、HTML、第一个网络浏览器（称为 WorldWideWeb）、HTTP 服务器和一些可供查看的网页。

¥By late 1990, TimBL had created all the things needed to run the first version of the web — HTTP, HTML, the first web browser, which was called WorldWideWeb, an HTTP server, and some web pages to look at.

在接下来的几年里，网络呈爆炸式增长，多种浏览器被发布，数以千计的网络服务器被建立，数以百万计的网页被创建。好的，这是对所发生事件的一个非常简单的总结，但我们确实向你保证了一个简短的总结。

¥In the next few years that followed, the web exploded, with multiple browsers being released, thousands of web servers being set up, and millions of web pages being created. OK, that's a very simple summary of what happened, but we did promise you a brief summary.

最后一个要分享的重要数据是，1994 年，TimBL 创立了 万维网联盟 (W3C)，该组织汇集了来自许多不同技术公司的代表，共同致力于创建 Web 技术规范。之后，其他技术如 CSS 和 JavaScript 相继出现，网络开始看起来更像我们今天所知道的网络。

¥One last significant data point to share is that in 1994, TimBL founded the World Wide Web Consortium (W3C), an organization that brings together representatives from many different technology companies to work together on the creation of web technology specifications. After that other technologies followed such as CSS and JavaScript, and the web started to look more like the web we know today.

¥Web standards

网络标准是我们用来构建网站的技术。这些标准以称为规范的长技术文档的形式存在，其中详细说明了技术应如何工作。这些文档对于学习如何使用它们所描述的技术来说并不是很有用（这就是我们拥有 MDN Web Docs 等网站的原因），而是旨在供软件工程师用来实现这些技术（通常在 Web 浏览器中）。

¥Web standards are the technologies we use to build websites. These standards exist as long technical documents called specifications, which detail exactly how the technology should work. These documents are not very useful for learning how to use the technologies they describe (this is why we have sites like MDN Web Docs), but instead are intended to be used by software engineers to implement these technologies (usually in web browsers).

例如，HTML 生活标准 准确地描述了 HTML（所有 HTML 元素及其关联的 API 和其他周边技术）应如何实现。

¥For example, the HTML Living Standard describes exactly how HTML (all the HTML elements, and their associated APIs, and other surrounding technologies) should be implemented.

网络标准是由标准机构创建的，这些机构邀请来自不同技术公司的人员聚集在一起，就技术应如何以最佳方式工作来满足其所有用例达成一致。W3C 是最著名的 Web 标准机构，但还有其他机构，例如 WHATWG（维护 HTML 语言的现行标准）、ECMA（发布 JavaScript 所基于的 ECMAScript 标准）、科罗诺斯（发布 3D 图形技术，例如 WebGL）等。

¥Web standards are created by standards bodies — institutions that invite groups of people from different technology companies to come together and agree on how the technologies should work in the best way to fulfill all of their use cases. The W3C is the best known web standards body, but there are others such as the WHATWG (who maintain the living standards for the HTML language), ECMA (who publish the standard for ECMAScript, which JavaScript is based on), Khronos (who publish technologies for 3D graphics, such as WebGL), and others.

¥"Open" standards

TimBL 和 W3C 从一开始就同意的网络标准的关键方面之一是网络（和网络技术）应该可以自由贡献和使用，并且不受专利/许可的阻碍。因此，任何人都可以免费编写代码来构建网站，任何人都可以为编写规范的标准创建过程做出贡献。

¥One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.

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

¥Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making websites, or worse still, just deciding they aren't interested any more and just turning it off.

这使得网络仍然是免费提供的公共资源。

¥This allows the web to remain a freely-available public resource.

¥Don't break the web

你会听到的关于开放网络标准的另一个短语是 "不要破坏网络" - 这个想法是，引入的任何新网络技术都应该向后兼容之前的技术（即旧网站仍将继续工作），并且向前兼容（未来的技术） 反过来将与我们目前拥有的兼容）。当你阅读此处提供的学习材料时，你将开始了解如何通过一些非常巧妙的设计和实现工作来实现这一点。

¥Another phrase you'll hear around open web standards is "don't break the web" — the idea is that any new web technology that is introduced should be backwards compatible with what went before it (i.e. old websites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). As you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work.

¥Being a web developer is good

如果你正在找工作，网络行业是一个非常有吸引力的市场。最近公布的数据显示，目前全球大约有 1900 万网络开发者，并且该数字在未来十年内将增加一倍以上。与此同时，该行业还存在技能短缺 - 那么还有什么更好的时间来学习 Web 开发呢？

¥The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?

然而，这并不全是乐趣和游戏 - 构建网站是一个比以前更复杂的命题，你必须花一些时间来研究你需要使用的所有不同技术、所有技术和最佳实践 你需要知道，以及你将被要求实现的所有典型模式。你需要几个月的时间才能真正开始接触它，然后你需要继续学习，以便你的知识与网络平台上出现的所有新工具和功能保持同步，并且 不断练习和完善你的手艺。

¥It isn't all fun and games however — building websites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.

唯一不变的是变化。

¥The only constant is change.

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

¥Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.

你现在是一名数字创意人员。享受这种经历和谋生的潜力。

¥You're a digital creative now. Enjoy the experience, and the potential for earning a living.

¥Overview of modern web technologies

如果你想成为一名前端 Web 开发者，有很多技术需要学习。在本节中，我们将简要描述它们。有关其中一些如何协同工作的更详细说明，请阅读我们的文章 网络如何运作。

¥There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article How the web works.

¥Browsers

此时此刻，你可能正在网络浏览器中阅读这些文字（除非你已将其打印出来，或者正在使用辅助技术，例如屏幕阅读器来将其读给你听）。网络浏览器是人们用来消费网络的软件程序，包括 火狐浏览器、Chrome、Opera、苹果浏览器 和 边缘。

¥You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screen reader to read it out to you). Web browsers are the software programs people use to consume the web, and include Firefox, Chrome, Opera, Safari, and Edge.

超文本传输协议 (HTTP) 是一种消息传递协议，允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信。典型的对话是这样的

¥Hypertext Transfer Protocol, or HTTP, is a messaging protocol that allows web browsers to communicate with web servers (where websites are stored). A typical conversation goes something like

"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 消息（称为请求和响应）的实际语法不是人类可读的，但这为你提供了基本概念。

¥The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.

¥HTML, CSS, and JavaScript

HTML、CSS 和 JavaScript 是构建网站时使用的主要三种技术：

¥HTML, CSS, and JavaScript are the main three technologies you'll use to build a website:

• 超文本标记语言（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 就像炊具、电视、微波炉或吹风机 - 这些东西为你的房子提供了有用的功能。

¥Tools

一旦你了解了可用于构建网页的 "raw" 技术（例如 HTML、CSS 和 JavaScript），你很快就会开始遇到可用于使你的工作更轻松或更高效的各种工具。示例包括：

¥Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:

• 现代浏览器中的 开发者工具 可用于调试代码。
• 测试工具 可用于运行测试以显示你的代码是否按照你的预期运行。
• 基于 JavaScript 构建的库和框架，可让你更快、更有效地构建某些类型的网站。
• 所谓的 "代码检查器"，它采用一组规则，检查你的代码，并高亮你没有正确遵循规则的地方。
• 缩小器，它删除代码文件中的所有空白，使其更小，从而更快地从服务器下载。

¥Server-side languages and frameworks

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

¥HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.

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

¥There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.

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

¥Example server-side frameworks include ASP.NET (in C#), Django (in Python), Laravel (in PHP), and Next.js (in JavaScript).

¥Web best practices

我们已经简要讨论了你将用于构建网站的技术。现在让我们讨论一下你应该采用的最佳实践，以确保你以最佳方式使用这些技术。

¥We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.

在进行 Web 开发时，不确定性的主要原因来自于你不知道每个用户将使用什么技术组合来查看你的网站：

¥When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your website:

• 用户 1 可能会在 iPhone 上查看它，屏幕又小又窄。
• 用户 2 可能正在连接了宽屏显示器的 Windows 注意本电脑上查看它。
• 用户 3 可能是盲人，并使用屏幕阅读器向他们朗读网页。
• 用户 4 可能使用的是一台非常旧的台式机，无法运行现代浏览器。

因为你不确切知道你的用户将使用什么，所以你需要进行防御性设计 - 让你的网站尽可能灵活，以便上述所有用户都可以使用它，即使他们可能不会获得相同的体验 。简而言之，我们正在努力让网络尽可能为所有人服务。

¥Because you don't know exactly what your users will use, you need to design defensively — make your website as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.

在学习过程中的某个时刻，你会遇到以下概念。

¥You'll come across the below concepts at some point in your studies.

• 跨浏览器兼容性是尝试确保你的网页可以在尽可能多的设备上运行的做法。这包括使用所有浏览器支持的技术，为可以处理这些技术的浏览器提供更好的体验（渐进增强），和/或编写代码以使其在旧浏览器中回落到更简单但仍然可用的体验（优雅降级）。它还涉及大量测试，以查看某些浏览器中是否出现任何故障，然后进行更多工作来修复这些故障。
• 响应式网页设计是使你的功能和布局灵活的实践，以便它们可以自动适应不同的浏览器。一个明显的例子是，一个网站在桌面上的宽屏浏览器中以一种方式布局，但在手机浏览器上显示为更紧凑的单列布局。现在尝试调整浏览器窗口的宽度，看看会发生什么。
• 性能意味着让网站尽可能快地加载，同时也使它们直观且易于使用，这样用户就不会感到沮丧而去其他地方。
• 可访问性意味着让你的网站可供尽可能多的不同类型的人使用（相关概念是多样性和包容性以及包容性设计）。这包括有视力障碍、听力障碍、认知障碍或主体障碍的人。它还不仅限于禁用 - 年轻人或老年人、来自不同文化的人、使用移动设备的人，或者网络连接不可靠或缓慢的人呢？
• 国际化意味着让来自不同文化、使用不同语言的人们可以使用网站。这里有技术上的考虑（例如改变你的布局，以便它仍然适用于从右到左，甚至垂直的语言），以及人类的考虑（例如使用简单的非俚语，以便使用你的语言的人 因为他们的第二或第三语言更有可能理解你的文本）。
• 隐私与安全。这两个概念相关但又不同。隐私是指允许人们私下处理自己的事务，而不是监视他们或收集超出绝对需要的数据。安全性是指以安全的方式构建你的网站，以便恶意用户无法从你或你的用户那里窃取其中包含的信息。

¥See also

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