HTML (HyperText Markup Language) 是用于构建网页及其内容的代码。例如,内容可以在一组段落、项目符号列表或使用图像和数据表中进行结构化。正如标题所暗示的那样,本文将让您对 HTML 及其功能有一个基本的了解。
那么什么是HTML?
HTML 是一种标记语言,用于定义内容的结构。HTML 由一系列元素组成,您可以使用这些元素来包围或包装内容的不同部分,使其以某种方式显示或以某种方式运行。封闭的标签可以使单词或图像超链接到其他地方,可以使单词斜体化,可以使字体变大或变小,等等。例如,采用以下内容行:
<span style="background-color:var(--code-background-block)">My cat is very grumpy
</span>
如果我们希望该行独立存在,我们可以通过将其括在段落标签中来指定它是一个段落:
<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 元素剖析
让我们进一步探讨这个段落元素。
我们元素的主要部分如下:
- 开场标签:它由元素的名称(在本例中为 p)组成,用左括号和右尖括号括起来。这说明了元素开始或开始生效的位置 - 在本例中为段落开始的位置。
- 结束标签:这与开始标记相同,不同之处在于它在元素名称之前包含一个正斜杠。这说明了元素的结束位置 — 在本例中为段落的结束位置。未能添加结束标签是标准的初学者错误之一,并可能导致奇怪的结果。
- 内容:这是元素的内容,在本例中,它只是文本。
- 元素:开始标签、结束标签和内容共同构成了元素。
元素还可以具有如下所示的属性:
属性包含有关您不希望在实际内容中出现的元素的额外信息。这里,是属性名称,是属性值。该属性允许您为元素提供一个非唯一标识符,该标识符可用于使用样式信息和其他内容来定位它(以及具有相同值的任何其他元素)。 某些属性没有值,例如必需。class
editor-note
class
class
设置值的属性始终具有:
- 它与元素名称(或上一个属性,如果元素已具有一个或多个属性)之间的空格。
- 属性名称后跟一个等号。
- 通过左引号和右引号括起来的属性值。
注意:不包含 ASCII 空格(或任何字符)的简单属性值可以保持不加引号的状态,但建议您将所有属性值加引号,因为这可以使代码更加一致和易于理解。"
'
`
=
<
>
嵌套元素
您也可以将元素放入其他元素中 - 这称为嵌套。如果我们想说我们的猫非常脾气暴躁,我们可以用"><强>元素包裹“非常”这个词,这意味着要强烈强调这个词:
<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> 元素。以下代码不正确:
<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)"><