🗿 人类为何发明 HTML - 深入学习前端 - 第一部分

2025-05-25

🗿 人类为何发明 HTML - 深入学习前端 - 第一部分

为什么要读这篇文章？

如果你看过库布里克的《2001：太空漫游》，你应该注意到它受欢迎的过场动画，其中一个猿人将一根骨头扔向天空，当骨头达到高潮时，它切换到宇宙飞船在太空中加速的场景。

它包含着一个间接而又英勇的信息：“出于喜悦和好奇，把骨头扔向天空的猿人，也是把宇宙飞船送上太空的猿人。”

这是进化的理念。人类如何基于过去的发现和知识，学会开发更好的解决方案和工具。

但这一切怎么会和HTML扯上关系呢？我们生活在一个网络蓬勃发展的时代！网络应用、网站、博客、电商平台、社交媒体、网络游戏等等，应有尽有。这些又怎么会和猿人及其骨骼扯上关系呢？答案在于HTML是如何诞生的，以及它背后的目的是什么，以及它基于哪些人类先前开发的概念。

这就是我们这篇文章要学习的内容。系好安全带，我们将踏上一段探索HTML和万维网基础历史的精彩旅程！

❓ 这篇文章对您有何帮助？
  • 本文并非教程，也并非试图教你如何编写 HTML。当然，在本系列的后续章节中，代码和教程也会添加到内容中。但目前，我只想深入介绍一下 HTML 及其用途和基础。如果你刚开始学习 Web 开发，这篇文章或许能对你有所帮助。如果你已经是一位经验丰富的前端开发人员，它或许能拓展你对 Web 开发环境的视野。

❓ 我为什么要发布这个系列？
  • 在我成功面试却在一周后丢掉工作之后，我被激励着去深入学习与前端相关的一切，一点一点。在这个系列中，我将与你分享我在这一过程中积累的经验和知识。你可以在这篇文章中阅读更多内容：为什么我面试成功却丢掉了工作！

在我们开始之前...

问：就像人类创造的一切一样，HTML 的诞生也是为了克服一个挑战。那么，这个挑战是什么？HTML 具体是如何帮助解决这个挑战的？

简而言之：HTML 是共享文档的人类解决方案。它是一种标记语言，简化了构建可在万维网上共享的文档的过程。

但长话短说，答案会更全面。我们应该先了解一下 HTML 是如何开发的……

👨‍🔬 出生于物理实验室❕

不。HTML 的初衷并非利用原子激发释放的能量来创建网页。它是由蒂姆·伯纳斯-李爵士创立的，当时他任职于欧洲粒子物理研究中心（CERN，位于瑞士日内瓦）的计算服务部门，其目的是简化文档传输流程。

❓ 是什么让 Tim 产生了创建 HTML 的冲动？（点击展开）

  • 欧洲核子研究中心是顶尖物理学家聚集的中心，他们在这里讨论和交流关于可能改变地球生命的革命性思想。
    因此，我们可以得出结论，官方文件、文章、手稿等文件在他们的聚会中发挥了重要作用。

  • 但是，如果他们能够摆脱获取这些文件的麻烦，节省宝贵的时间来思考那些只需轻轻一抹粒子就能终结地球上人类生命的理论，而不是等到到达日内瓦后与其他固执地不接受他们理论的科学家进行长时间的讨论，那会怎样呢？

因此，蒂姆提出了一种超文本的想法，它可以像纸质文档一样工作，让读者通过点击后来被称为“超链接”的内容来浏览页面和内容。所有这些文档都将通过HTTP（超文本传输​​协议）传输，这使得世界各地的物理学家可以通过互联网连接访问它们。

当然，我们谈论的互联网与今天的互联网截然不同，最初的网络浏览器和网页也有很多不同之处。Tim 提出的 HTML 文档类型定义是 SGML 和超文本的融合。但这两者究竟是什么呢？让我们一起来探索一下。

🦸‍♂️ 超文本：只有超人才能读懂的文本

在定义超文本时，我们应该注意，“超”一词并非指很长的文本，也不是大约一百万字的内容。当然，互联网和超文本是方便访问数十亿页文档的实用工具，但超文本的具体含义是：“包含指向其他文档的特殊锚点的文档。这些锚点可以通过鼠标点击、键盘按键或触摸屏访问。激活这些锚点会使浏览器跳转到另一个文档。”

  • 锚标签⚓（点击展开） <a href="http://example.com">Link Text</a>：该<a>标签是主要的 HTML 标签之一。单词a“Anchor”的首字母。它接受一个名为 href 的属性，该属性代表超文本引用 (Hypertext Reference)，其值是锚点激活后浏览器必须跳转的目标位置。此标签将在超文本文档上呈现一个链接，其地址是 href 的值。

超文本这一术语自20世纪40年代起便在学术界广为人知。但直到第一台图形个人电脑问世，超文本才得以成为现实。
个人电脑上超文本的发展包括由按钮组成的文档文件，点击按钮后，系统会决定显示哪些内容。这些按钮类似于目录中的next page“和”previous page或“ ”。Chapter Titles

然而，这些超文本只能在PC上运行，无法访问地球另一端其他PC上的文档。为此，Tim决定实现HTTP。

  • 解释什么是 HTTP 以及它如何工作超出了本文的范围。我们将在本系列的后续文章中学习，届时我们将讨论 Ajax。

然后我们看看什么是标记语言以及 SGML 如何启发 Tim。

🧾 标记语言：如何在文档中定义元素

我经常在网上看到有人争论HTML是不是编程语言。对我来说，答案很简单，只要查一下它的名字就行了。HTML是超文本标记语言（Hypertext Markup Language）
的缩写。其实，这个名字本身并不能说明它是一种编程语言，而是一种标记语言。标记语言是一种人类可读的文本，它使用标签来定义文档中的元素。

为了更好地理解，您可以查看当前帖子。其中有一个标题，标题是“人类为何发明 HTML”。现在假设我们需要打印这篇帖子的副本，并且我们希望将标题打印在页面的左上角。打印机预先设置了位置，但打印机需要知道标题是什么。我们不需要将标题单独传递给打印机，而是在文档本身中定义它。但是怎么做呢？
这时标记语言就派上用场了。
在包含标记语言的文本中，我们定义一个标题标签，并将所需的标题传递给它。打印机在解析文本时，会存储标题的值并将其打印到正确的位置。
以下是一个例子：

<title>Why Humans Invented HTML</title>
Enter fullscreen mode Exit fullscreen mode

上面的示例使用了 HTML 标签。但由于标记语言种类繁多，我们可以在各自的环境中使用任何一种。
以下是 Scribe 标记语言的示例：

@Title(Why Humans Invented HTML)
Enter fullscreen mode Exit fullscreen mode

现在我们已经了解了标记语言如何定义文档中的元素，接下来让我们了解一下 SGML 是什么。

📋 SGML：标记语言的定义方式

SGML 是“标准通用标记语言”的缩写。它本身并不是一种标记语言，而是由 ISO（国际标准化组织）注册的一个标准，定义了标记语言的标准。

  • SGML 有何用处？

    如果需要开发新的标记语言，可以将此标准应用于这些语言，以便使标记语言能够支持不同的平台。由于基于此标准的标记语言彼此行为相似且遵循相同的规则，因此可以轻松移植到不同的格式并轻松打印。这就是 HTML 可以轻松转换为 PDF、EPUB、XML 等的原因。

SGML 本身是基于 GML （通用标记语言）开发的，GML 早期由 IBM 为其打印机设备开发。GML 文档的结构可能如下所示：

:h1.The Title Goes Here!
:p.A paragraph about the content.
:h2.A title for a list.
:ol.
:li.List Item 1.
:li.List Item 2.
:eol.
Enter fullscreen mode Exit fullscreen mode
  • 什么是“:ol”标记？

    ❗ 注意如何ol使用 (有序列表) 来启动有序列表，以及eol如何使用 (结束有序列表) 来声明列表元素在那里结束。

标记将打印以下文档：

标题就在这里！

关于内容的一段。

列表的标题。
  1. 列表项 1。
  2. 列表项 2。

SGML 被 取代:tagname. :etagname.，<tagname></tagname>并且也被实现到 HTML 中。

现在又出现了一个新问题：HTML 是如何实现 SGML 的？

✅ HTML 变得生动起来。

当伯纳斯·李爵士首次开始宣传他关于通过互联网共享超文本的想法时，它在研究人员中广为人知，他们认为超文本将成为未来的主要交流工具。

  • 公司最初对 HTTP 有何看法？（点击展开）
  • 惠普或IBM等大公司认为，它只对那些希望共享文档、简化引用的研究人员有用。对他们来说，通信的未来很大程度上取决于电话公司及其为发展通信所能找到的解决方案。
  • 事实证明他们错了。如今，万维网已经是数十亿网站的家园，而这些网站如今已不再只是研究和官方文件。

但即便如此，Tim 最初也是孤军奋战。他必须运用自己的计算机能力，将自己的想法付诸实践。他融合了超文本、SGML 等其他概念，并开发了自己的共享协议 HTTP。之后，他得以召集小团队，共同开拓通信世界！

但是 HTML 一开始是什么样子的呢？

HTML：第一个版本。

想要查看真实示例，请访问以下页面：万维网项目
。 上面的链接会将您重定向到第一个用 HTML 编写的页面。如果您想查看该页面的标记方式，可以右键单击浏览器页面，然后选择“查看页面源代码”或其他类似选项。

我们可以仔细看看它的来源：

<HEADER>
  ...
</HEADER>
<BODY>
  ...
</BODY>
Enter fullscreen mode Exit fullscreen mode

您可以观察到，源代码由人类可读的标签组成。主要有两个标签：<HEADER>& <BODY>。

既然我们已经了解了标记语言试图模拟纸质文档，那么我们就很容易理解这两个标签的含义了。它们定义了文档的两个主要部分：“详细信息”和“内容”。它就像你在办公室、学校和其他地方能找到的许多文件夹一样。你很可能也写过这样的文档。

“Header” 到底起什么作用？（点击了解）
  • 标签提供的详细信息<HEADER>与我们需要了解的纸质文档信息不同。这<HEADER>部分内容实际上并非供人类阅读。它包含浏览器可能有用的信息。比如什么？比如“标题”或“字符集”。

让我们放大<HEADER>标签：

<HEADER>
  <TITLE>The World Wide Web project</TITLE>
  <NEXTID N="55">
</HEADER>
Enter fullscreen mode Exit fullscreen mode

由于这是一个非常基本的 HTML 版本，因此里面只定义了两个标签<HEADER>。

其中之一就是标题，它只是当前文档的标题或名称。由于浏览器需要告知用户他们正在查看的内容，因此标题就是浏览器显示在最顶部的内容。

  • 标题是 HTML 文档中最重要的元素之一，如果没有定义标题，用户必须依靠 HTTP 地址 URL 来识别他/她正在查看的文档。

这个<NEXTID>标签在 Elementary HTML 版本中使用，并由Next HTML 编辑器生成，用于生成标签name的属性Anchor。这是一个早已弃用的标签，说实话，我自己也不太清楚它是怎么用的。😅 现在它已经不再使用了。

深入了解 HTML 的开发如何帮助您开发现代网络？
  • 我可以猜到你现在在想什么：到目前为止，我们所了解的只是标记语言是如何发展并最终导致HTML诞生的。但关于文档及其类似纸张的结构的事实，似乎与当今网络环境的运作方式和外观无关。
  • 但这就是它的奥秘所在。其实什么都没变。你在网络上看到的一切，从 HTML5 游戏到渐进式 Web 应用，再到流畅维护的动画和 SVG 图形，所有这些以及更多，都建立在文档结构概念之上。这个概念被称为文档对象模型( DOM)，我将在本系列的下一篇中详细讨论它。
  • 我知道阅读这篇文章可能看起来很无聊、冗长且耗时，但我敢打赌，通过收集这些知识，您可以更深入地了解 HTML5 语义标签、最佳 CSS 布局实践、SEO 以及搜索引擎如何处理和分析您的 Web 应用程序<body>、<head>JSX 的数据管道以及虚拟 DOM 如何变为现实等等。
  • 相信我，这些都是基于简单的超文本思想😊。

现在您又充满活力和动力去寻找 HTML 的深层根源，让我们看看什么BODY是 HTML 文档。

<BODY>上面例子中的部分是这样写的：

<BODY>
  <H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A NAME=0 HREF="WhatIs.html"> 
hypermedia</A>
  ...
  <DL>
    <DT><A NAME=44 HREF="../DataSources/Top.html">What's out there?</A>
    <DD> Pointers to the
    world's online information,<A NAME=45 HREF="../DataSources/bySubject/Overview.html"> 
    subjects</A>
    , <A NAME=z54 HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc.
    <DT><A NAME=46 HREF="Help.html">Help</A>
    <DD> on the browser you are using
    ...
  </DL>
</BODY>
Enter fullscreen mode Exit fullscreen mode

主体部分呈现的是一组elements。每个元素都使用标签进行标识。标签内的文本称为 its inner text，嵌套在其中的标签称为 it's children。主标签本身称为 the parent。
内部文本是打印在浏览器页面中的部分。

问：但是为什么我们要对 HTML 结构使用像子级和父级这样的兄弟术语呢？
答：因为 HTML 文档结构的行为是继承的。

inheritance当你需要处理layout、positioning和 时，这个概念就变得更加重要display。上面的 HTML 标记中有一个很好的例子，演示了它如何inheritance帮助layout设计。

标签<DL>定义了一个Description List。描述列表展示的是一个 列表，items每个 都有description自己的 。

描述列表的一个很好的例子就是字典。（点击阅读原因）
  • 词典文档包含一个单词列表。每个单词都有其自身的定义。
  • 单词是items，定义是description。

上面的示例用于<DL>显示超链接列表。可以说，每个超链接都像一个术语一样书写，而术语本身又包含一个描述，用于告诉用户该超链接将引导他们到哪里。这显然是本文档中实现的用途DL。但它还有另一个用途……

是的layout。如果您已经熟悉网页设计和 CSS，您就会知道 Flexbox 或 Grid 等 CSS 属性是如何帮助布局的。
但最初的超文本项目并没有定义任何样式。这是有原因的。因为 Burners-lee 预见到了 HTML 必须只包含文档结构和标记的事实，因此得出结论，样式逻辑不应该在 HTML 本身中实现。这使得 HTML 更加灵活。一个文档结构可以被用户、作者或浏览器以不同的方式设置样式。

  • 什么是 Flexbox 或 Grid？还有，什么是 CSS？（不知道的可以点击阅读）

    CSS 是层叠样式表 (Cascading Style Sheets)的缩写。样式表是一组将样式应用于文档的规则。层叠意味着这些规则就像瀑布一样，会覆盖其下方的所有内容。

  • 因此，文档的某些部分可以更改或覆盖某些样式规则。此属性与 HTML 的继承行为不同，将在本系列的后续部分中介绍。

  • Flexbox 和 Grid 是 CSS 用于 HTML 布局的属性。它们分别以list-like和 的table-like方式对齐内容。

这意味着该description list元素用于为打印（或渲染）的内容提供一些视觉布局和结构。
该结构通过在每行仅显示一个超链接并在下一行显示其描述来实现。这种结构使读者更容易阅读文档。

我希望这个例子能够展现 HTML 文档最初的结构。即使是最新的 HTML 版本也遵循许多这样的规则。这样你就能观察到 HTML 是如何开发出来的，以及开发的目的是什么。

现在就这些了...！

我们已经走了很长的路，描述了很多你可能已经知道的事情。

  • 但我写这篇长文的目的是为了让大家从根本上了解前端技术是如何定义的。
  • 在我看来，一切都基于文档结构，无论是关于在线视频会议还是社交应用程序，还是图形动画。
  • 牢固掌握标记语言和继承方法必将帮助我们深入学习前端。
  • 关于 DOM 的一个重要方面是语义标签的使用。您在本文中已经看到了不同类型的语义标签，包括、title等等。这些标签之所以具有语义，是因为它们可以让浏览器了解其内容在文档中扮演的角色。h1list
  • 例如，h1标签意味着它的文本是当前文档中最重要的标题，并且它的文本肯定包含有关当前部分的一些重要和描述性信息。
  • 学习语义标签对于 SEO、布局，甚至掌握声明式和基于组件的编程都至关重要。在最新的 HTML 定义中，引入了更新的语义标签，它们在开发更好的前端应用程序方面发挥着关键作用。
  • 在接下来的部分中，我们将利用本文收集的知识更深入地探索前端编程的海洋！

请反馈！

这篇文章很长，我花了不少时间才写完。我打算把它扩展成一个系列，想听听大家的意见和想法。

最重要的是：本文中的许多内容可以归类为主观解释。因此，可能存在相反或更好的解释和理论。如果您有这样的想法，请评论。

在下一部分中我们将回到 DOM。

感谢阅读！❤️

文章来源：https://dev.to/alimobasheri/why- humans-invented-html-learning-frontend-deeply-part-1-h1l
Devto 翻译
PREV
Javascript - 对象也可以循环吗？
NEXT
使用 Typescript 进行反应