HTML 基础知识

HTML （HyperText Markup Language） 是用于构建网页及其内容的代码。例如，内容可以在一组段落、项目符号列表或使用图像和数据表中进行结构化。正如标题所暗示的那样，本文将让您对 HTML 及其功能有一个基本的了解。

那么什么是HTML？

HTML 是一种标记语言，用于定义内容的结构。HTML 由一系列元素组成，您可以使用这些元素来包围或包装内容的不同部分，使其以某种方式显示或以某种方式运行。封闭的标签可以使单词或图像超链接到其他地方，可以使单词斜体化，可以使字体变大或变小，等等。例如，采用以下内容行：

<span style="background-color:var(--code-background-block)">My cat is very grumpy
</span>

如果我们希望该行独立存在，我们可以通过将其括在段落标签中来指定它是一个段落：

[HTML全文]复制到剪贴板

<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>My cat is very grumpy<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span>

HTML 元素剖析

让我们进一步探讨这个段落元素。

我们元素的主要部分如下：

1. 开场标签：它由元素的名称（在本例中为 p）组成，用左括号和右尖括号括起来。这说明了元素开始或开始生效的位置 - 在本例中为段落开始的位置。
2. 结束标签：这与开始标记相同，不同之处在于它在元素名称之前包含一个正斜杠。这说明了元素的结束位置 — 在本例中为段落的结束位置。未能添加结束标签是标准的初学者错误之一，并可能导致奇怪的结果。
3. 内容：这是元素的内容，在本例中，它只是文本。
4. 元素：开始标签、结束标签和内容共同构成了元素。

元素还可以具有如下所示的属性：

属性包含有关您不希望在实际内容中出现的元素的额外信息。这里，是属性名称，是属性值。该属性允许您为元素提供一个非唯一标识符，该标识符可用于使用样式信息和其他内容来定位它（以及具有相同值的任何其他元素）。 某些属性没有值，例如必需。classeditor-noteclassclass

设置值的属性始终具有：

1. 它与元素名称（或上一个属性，如果元素已具有一个或多个属性）之间的空格。
2. 属性名称后跟一个等号。
3. 通过左引号和右引号括起来的属性值。

注意：不包含 ASCII 空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。"'`=<>

嵌套元素

您也可以将元素放入其他元素中 - 这称为嵌套。如果我们想说我们的猫非常脾气暴躁，我们可以用<强>元素包裹“非常”这个词，这意味着要强烈强调这个词：

[HTML全文]复制到剪贴板

<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>My cat is <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span>very<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span> grumpy.<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span>

但是，您确实需要确保您的元素正确嵌套。在上面的示例中，我们首先打开了 <p> 元素，然后打开了 <strong> 元素;因此，我们必须首先关闭 <strong> 元素，然后关闭 <p> 元素。以下代码不正确：

[HTML全文]复制到剪贴板

<span style="background-color:var(--background-critical)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>My cat is <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span>very grumpy.<span style="color:var(--code-token-attribute-value)"><