我确信 HTML 是有史以来使用最广泛的标记语言。虽然存在其他标记语言，包括 nroff 和 groff、LaTeX 和 Markdown，但没有其他标记语言像超文本标记语言那样普及。HTML 是 Web 的事实标准语言。该语言于 1994 年首次在 Web 浏览器中实现，并不断发展。然而，HTML 的基本原理保持不变。
如果您刚开始学习 HTML，我想提供这份 HTML 简明入门教程。我专注于 HTML 的基本要素，以帮助您建立对 HTML 工作原理的基本理解。您可以将其作为学习更多 HTML 的起点。
收集单词以填充段落
让我们从基本了解 HTML 以及 Web 浏览器等客户端应用程序如何显示 HTML 文档开始。HTML 的核心在于收集文件中的单词并填充段落。这意味着如果您不在 HTML 文件中添加指令（称为标记），而只是将其保留为纯文本，则 Web 浏览器会将所有文本转换为单个段落。
从这个示例文本开始，将其保存在名为 index.html 的纯文本文件中。这是旧故事《国王的烤面包机》中的一个段落，这是一个关于您如何用微控制器制造烤面包机的互联网寓言
The engineer replied,
"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.
The program would use that darkness level as the index to
a 16-element table of initial timer values.
Then it would turn on the heating elements and start the
timer with the initial value selected from the table.
At the end of the time delay, it would turn off the heat
and pop up the toast.
Come back next week, and I'll show you a working
prototype."您可以将此文件放在 Web 服务器上并像访问任何网站一样访问它，或者您可以将其保存到本地磁盘并在 Web 浏览器中直接打开它。如何将文件放入 Web 浏览器并不重要。但是您应该使用 .html 扩展名命名该文件，Web 浏览器默认将其识别为 HTML 文件。
在本例中，我将文件写在不同的行上。我还添加了一些空行，以演示 HTML 不关心额外的空格。额外的空格可能有助于人类阅读 HTML 代码，但 Web 浏览器默认情况下将其视为一个块。在 Web 浏览器中查看，此文件如下所示
(Jim Hall, CC BY-SA 4.0)
内联元素和块级元素
HTML 的核心是内联元素和块级元素的概念。您可以将块级元素视为始终填充一个矩形。内联元素仅跟随内联文本。
基本的块级元素称为 division，并使用 <div> 标签。基本的内联元素是 span，使用 <span> 标签。大多数 HTML 标签都是某种块级元素或内联元素，因此从这两个开始了解它们的工作原理很有帮助。
向您的 HTML 文档添加一些 <div> 和 <span> 标签，以查看块级元素和内联元素的外观
<div>
The engineer replied,
"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.
<span>
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>
Then it would turn on the heating elements and start the
timer with the initial value selected from the table.
At the end of the time delay, it would turn off the heat
and pop up the toast.
Come back next week, and I'll show you a working
prototype."
</div>我在整个段落周围添加了一个 <div> 块级元素，并在一个句子周围添加了一个 <span>。请注意，当我启动像 <div> 或 <span> 这样的 HTML 元素时，我需要提供其相应的结束标签，如 </div> 和 </span>。大多数 HTML 元素都是这样形成的，带有开始和结束标签。
Web 浏览器使用这些标签以某种方式显示 HTML 内容，但由于 <div> 和 <span> 本身并没有真正定义任何特殊格式，因此您看不到任何变化。您的示例段落看起来和以前一样
(Jim Hall, CC BY-SA 4.0)
您可以在这些标签中使用样式指令包含直接样式，以便查看块级元素和内联元素的行为方式。为了使每个元素的边界突出显示，让我们为 <div> 块使用浅蓝色背景，为 <span> 使用粉红色背景
<div style="background-color:lightblue">
The engineer replied,
"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.
<span style="background-color:pink">
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>
Then it would turn on the heating elements and start the
timer with the initial value selected from the table.
At the end of the time delay, it would turn off the heat
and pop up the toast.
Come back next week, and I'll show you a working
prototype."
</div>通过这些更改，整个段落都具有浅蓝色背景。<div> 块级元素是一个矩形，因此蓝色甚至填充了最后一个句子结束后剩余的空白空间。同时，第二个句子具有粉红色背景。此高亮跟随句子，因为 <span> 是内联元素。
(Jim Hall, CC BY-SA 4.0)
大多数 HTML 元素都是块级元素或内联元素。唯一的区别是其他元素携带一些默认样式，具体取决于它们的类型。例如，<p> 是一个块级元素，在块的上方和下方都有额外的空间。标题标签 <h1> 到 <h6> 也是块级元素，以不同的字体大小和文本样式（如斜体和粗体）定义。<strong> 标签是一个内联元素，用于以 粗体 显示文本。同样，<em> 也是一个内联元素，用于将文本设置为 斜体 样式。
完成 HTML 页面
某些 HTML 元素是必需的。虽然您使用的示例 HTML 文件可以在任何 Web 浏览器上正确显示，但从技术上讲，它不是一个正确的 HTML 页面。您需要添加一些元素
每个 HTML 文档都应提供文档类型声明。在 HTML 文件的第一行使用单个标签 <!DOCTYPE html> 来定义 HTML 文档。HTML 标准还希望您将文档文本包装在两个块级元素中：<html> 用于定义完整页面，<body> 用于定义文档主体。
<!DOCTYPE html>
<html>
<body>
<div style="background-color:lightblue">
The engineer replied,
...
</div>
</body>
</html>HTML 文档还需要在 <body> 之前的 <head> 块，以提供有关页面的元信息。唯一必需的元信息是文档的标题，由 <title> 元素定义
<!DOCTYPE html>
<html>
<head>
<title>The King's Toaster</title>
</head>
<body>
<div style="background-color:lightblue">
The engineer replied,
"Using a four-bit microcontroller, I would write a simple
program that reads the darkness knob and quantizes its
position to one of 16 shades of darkness, from snow white
to coal black.
<span style="background-color:pink">
The program would use that darkness level as the index to
a 16-element table of initial timer values.
</span>
Then it would turn on the heating elements and start the
timer with the initial value selected from the table.
At the end of the time delay, it would turn off the heat
and pop up the toast.
Come back next week, and I'll show you a working
prototype."
</div>
</body>
</html>像 <html>、<head> 和 <body> 这样的支持标签不会改变 HTML 页面在 Web 浏览器中的显示方式，但它们对于技术上正确的 HTML 文档是必需的
(Jim Hall, CC BY-SA 4.0)
这份 HTML 简明入门教程仅提供了 HTML 的基本要素，但既然您已经了解了块级元素和内联元素，您就可以很好地学习如何使用其他 HTML 标签编写 HTML 文档。
评论已关闭。