HTML 元素简介

在本课程中，我们将探讨不同的 HTML 标签、它们的用途以及如何在 Web 应用程序中有效地使用它们。我们将讨论一些最常用的 HTML 标签及其相应的属性。

段落标签

段落可能是最常用的 HTML 元素，由

定义。它是一个块级元素，这意味着每个段落都将另起一行。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

没有

元素，您的浏览器将自动忽略多余的空格并将文本呈现在单行中。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

访问代码演示 ↗

您需要使用
元素，如果您想在单个段落元素内换行。这是不需要结束标记的 HTML 元素之一。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

访问代码演示 ↗

标题标签

写文章时，最好在段落之间添加标题，以使文章更有条理。 HTML 文档的工作方式相同。 HTML 提供了从

到

的六种不同级别的标题。到

.

<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>

访问代码演示 ↗

在大多数情况下，

到

创建网页时应足够，一般情况下，我们建议不要使用太小的标题，例如

等。和

，因为它们会使您的网页结构变得不必要的复杂。

;是顶部标题，它在网页中起着特殊的作用。应该只有一个

每个 HTML 文档中的元素，它应该总结整个页面。

格式化元素

有时，您可能想通过给特定的单词和段落赋予不同的格式来强调它们，例如使它们显示为粗体、斜体或下划线。 HTML 提供了可以帮助实现此效果的格式化元素。

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

访问代码演示 ↗

• ; 元素具有相同的效果。它们都使所包含的文本显示为粗体。

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

尽管它们具有相同的外观，如 CodePen 演示所示，但它们为浏览器和搜索引擎提供不同的用途。

仅使文本加粗而不添加任何特定含义，而 表示所附文本非常重要。

• ;和元素相似。他们都将文本变成斜体形式。 不表示任何特殊含义，而 定义强调文本，以斜体形式显示。

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph, which starts on a new line.</p>

• ;元素定义突出显示/标记的文本。

<!-- prettier-ignore -->

  This is the first paragraph.
  This is the second paragraph, which starts on a new line.

• ;元素定义小文本。

  <p>
    This is the first paragraph.<br>
    This is the second paragraph, which starts on a new line.
  </p>

• ;元素指示已删除的文本，通过在所包含的文本中添加删除线来显示。另一方面，元素用于指示插入的文本，显示为带下划线的文本。

<h1 id="Heading">Heading 1</h1>
<h2 id="Heading">Heading 2</h2>
<h3 id="Heading">Heading 3</h3>
<h4 id="Heading">Heading 4</h4>
<h5 id="Heading">Heading 5</h5>
<h6 id="Heading">Heading 6</h6>

• _{;和 ^{elements 分别定义下标和上标。}}

<b></b>
<strong></strong>

<i></i>
<em></em>

<mark></mark>

<small></small>

<del></del>
<ins></ins>

<sub></sub>
<sup></sup>

如何向 HTML 元素添加样式

有时，这些格式化元素的默认表示形式不足以表达其预期含义。

例如，元素用删除线表示删除的文本，这样很容易理解。然而，元素使用下划线来表示插入，这可能会很混乱。

要改善这些元素的默认外观，您可以使用如下样式属性：

<p>
  Lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

默认情况下，链接会带有下划线并显示为蓝色，当您点击它时，您将被带到 href 属性指定的目的地。

为了进行演示，请在工作目录中创建一个 HTML 元素简介.html 文件。

<p>Lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<p>Lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

然后，在您的 index.html 文件中添加一个指向目的地的链接。

<p>Lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

点击链接后，您将被带到HTML 元素简介.html文档。

您还可以在HTML 元素简介.html中添加返回链接以返回index.html。

<p>
  Lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

这些相互关联的链接形成了我们今天看到的互联网。

默认情况下，链接的目的地将在同一窗口中打开。您可以通过设置目标属性来更改该行为。例如，target="_blank" 在新选项卡中打开目的地。

<p>
  Lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

访问代码演示 ↗

您可能注意到的另一件事是链接最初显示为蓝色。当你点击它的那一刻，它就会变成红色。之后，链接会变成紫色，表示该链接之前已被访问过。

此行为与称为伪类的概念有关，它允许您在不同条件下为元素定义不同的样式。当我们更多地讨论 CSS 时，我们将再次讨论这个话题。

列表

访问代码演示 ↗

HTML 中存在三种不同类型的列表：有序列表、无序列表和描述列表。

有序列表是用

定义的元素，并且每个单独的列表项都是使用
1. .
   创建的

     <p>This is the first paragraph.</p>
     <p>This is the second paragraph, which starts on a new line.</p>
   
   

   无序列表是用

   定义的。元素。
   

   <!-- prettier-ignore -->
   
     This is the first paragraph.
     This is the second paragraph, which starts on a new line.
   
   

   描述列表有点复杂，因为它们由项目列表和每个项目的描述组成。描述列表由

   定义。元素，每个列表项用

   定义，每个描述语句用

   .
   定义

     <p>
       This is the first paragraph.<br>
       This is the second paragraph, which starts on a new line.
     </p>
   
   

   布局元素

   到目前为止，我们只讨论了用于显示内容的元素，例如文本、列表和图像。事实上，HTML 中还有另一类元素负责组织这些元素。

   它们并不是为了显示任何特定类型的内容而设计的，而是充当其他元素的容器。当与 CSS 结合时，他们可以为网页创建不同的布局。下面的列表显示了一些常用的布局元素。

   • ：定义文档的标题部分，通常位于网页顶部。
   • ：定义导航栏。对于大多数网页来说，它位于顶部和标题一起，但有些开发人员将其放在页面的侧面。
   • ：定义文档的一个部分。
   • ：定义网页中的独立部分。
   • ：主要内容之外的内容，例如侧边栏。
   • ：位于网页底部的页脚部分。
   • ：创建用户可以打开和关闭的选项卡。
   • ：为创建标题。元素。它应该放在
     里面。元素。

   <h1 id="Heading">Heading 1</h1>
   <h2 id="Heading">Heading 2</h2>
   <h3 id="Heading">Heading 3</h3>
   <h4 id="Heading">Heading 4</h4>
   <h5 id="Heading">Heading 5</h5>
   <h6 id="Heading">Heading 6</h6>
   

   访问代码演示 ↗

   • ：当然还有最重要的布局元素，

     ，它代表分割。它是一个通用元素，在网页中创建一个块，不用于任何特殊目的。

     这是最常用的布局元素，因为对于现实生活中的网页，大多数部分和块与上述任何语义元素都不匹配。因此，许多开发人员喜欢使用

     。用于创建页面布局。
     

       <p>This is the first paragraph.</p>
       <p>This is the second paragraph, which starts on a new line.</p>
     
     

     

     请注意，

     元素总是从新行开始，并占据尽可能多的水平空间。另一方面，。元素不会另起一行，只占用必要的空间。

     这其实就是块元素和行内元素的区别。

     到目前为止我们提到的大多数元素都是块元素，例如

     、

     、

     等到

     、

   • 等。如果没有定义额外的样式，它们将自动占用尽可能多的水平空间。

     ; element 是内联元素的一个示例。当与其他元素并排放置时，它仅占用必要的空间。并且 width 和 height 属性不会对其产生影响。

     HTML 中还有许多其他元素，包括块元素和内联元素。在一堂课中不可能讨论所有这些内容，但如果您有兴趣，这里有来自 W3Schools 的所有 HTML 元素的参考。

     进一步阅读

     • 如何使用 CSS 选择器
     • 什么是语义 HTML 代码？
     • 如何在 CSS 中将 Div 居中