HTML - 标题

HTML 标题定义了网页内容的层级（级别）和结构。它们创建了一个视觉层级，最高级别的标题（即h1）表示最重要的内容或主标题，较低级别的标题，如h2、h3、h4等，则用于子主题。

使用标题的原因

标题对于组织内容和清晰地指示新章节或主题的开始至关重要。结构良好的标题可增强网站的可读性和用户体验，确保信息井然有序且易于浏览。

标题对 SEO 的影响：组织良好的标题有助于搜索引擎理解内容结构并进行索引。
突出重要主题：正确使用标题标签可以保持内容的可读性。

HTML 标题标签

标题由标题标签定义（<h1> 到 <h6>）。使用标题标签来显示网页上的内容结构非常重要。HTML 有不同级别的标题标签。层级决定了内容的重要性，并有助于为用户和搜索引擎创建清晰的信息流。

示例

以下示例显示了 HTML 标题的不同级别：

<!DOCTYPE html>
<html>
  <body>
    <h1>This is Heading 1 (H1 Tag)</h1>
    <h2>This is Heading 2 (H2 Tag)</h2>
    <h3>This is Heading 3 (H3 Tag)</h3>
    <h4>This is Heading 4 (H4 Tag)</h4>
    <h5>This is Heading 5 (H5 Tag)</h5>
    <h6>This is Heading 6 (H6 Tag)</h6>
  </body>
</html>

标题标签的层级结构

以下是标题标签的层级列表（从最重要到最不重要）：

<h1> 标签 - 最高级别标题表示整个页面的主要主题或标题。
<h2> 标签 - <h1> 下的子标题表示与主要主题相关的各个主要部分。它们为内容提供更具体的上下文。
<h3> 到 <h6> 标签 - 这些标签用于<h2>标题内的更多子部分或嵌套内容。它们为在特定部分内组织内容提供了更深的层级。

HTML 标题示例

在这些示例中，您将看到所有标题标签的使用，以及使用 CSS 对其进行样式设置：

使用 <h1> 到 <h6> 标签的标题

在这个例子中，我们将使用标题标签 (h1 到 h6)；每个标签的内容都有不同的尺寸和粗细：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

使用 CSS 设置标题样式

在下面的示例中，我们将应用样式，例如字体系列、字体颜色、字体大小等，到标题：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
    <style>
      h1, h2, h3, h4, h5, h6{
       font-family: Verdana;
      }
      h1{
       color: Red;
       font-size: 32px;
      }
      h2{
       color: Green;
       font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

在这里，我们为所有标题标签应用了“Verdana”字体样式，为H1标题定义了“红色”颜色，字体大小为32px，并为H2标题定义了“绿色”颜色，字体大小为30px。

在标题标签中使用 HTML 标签

HTML 标题 (h1 到 h6) 用作内容组织的主要标题和子标题。在这些标题标签中，您可以使用各种其他 HTML 标签来有效地增强和组织您的内容。以下是一些示例：

<span> 标签

您可以使用<span> 标签将内联样式或类应用于标题内文本的特定部分。这允许对标题内的文本进行自定义样式设置。

<!DOCTYPE html>
<html>
<head>
   <title>Using <span> Tag</title>
</head>
<body>
   <h2>This is a <span style="color: blue;">blue</span> word.</h2>
</body>
</html>

<a> 标签用于链接

要在标题内创建链接，请使用<a> 标签。这对于指向网站其他页面或部分的标题非常有用。

<!DOCTYPE html>
<html>
<head>
   <title>Using <a> Tag for Links</title>
</head>
<body>
   <h1><a href="https://tutorialspoint.com">Visit our website</a></h1>
</body>
</html>

<em> 和 <strong> 标签

这些标签用于强调标题中的文本。<em> 标签将文本斜体显示，而<strong>使其加粗。

<!DOCTYPE html>
<html>
<head>
   <title>Using <em> and <strong> Tags</title>
</head>
<body>
   <h3>This is <em>emphasized</em> and <strong>important</strong> text.</h3>
</body>
</html>

<sup> 和 <sub> 标签

在标题中，要在标题中包含上标或下标文本，请使用<sup>和<sub>。

<!DOCTYPE html>
<html>
<head>
   <title>Using <sup> and <sub> Tags</title>
</head>
<body>
   <h4>The 10<sup>th</sup> floor is at the top.</h4>
   <h5>The chemical formula for water is H<sub>2</sub>O.</h5>
</body>
</html>

<abbr> 标签用于缩写

当您需要在标题中包含缩写或首字母缩略词时，请使用<abbr>标签。它通常提供一个带有完整含义的工具提示。

<!DOCTYPE html>
<html>
<head>
   <title>Using <abbr> Tag for Abbreviations</title>
</head>
<body>
   <h2>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</h2>
</body>
</html>

<br> 标签用于换行

有时，您可能希望在标题内创建换行符以获得更好的格式。<br> 标签用于此目的。

<!DOCTYPE html>
<html>
<head>
   <title>Using <br> Tag for Line Breaks</title>
</head>
<body>
   <h3>This is the first line.<br>This is the second line.</h3>
</body>
</html>

<mark> 标签

使用<mark> 标签突出显示标题内的特定文本。它通常用于指示搜索结果或文本的选定部分。

<!DOCTYPE html>
<html>
<head>
   <title>Using <mark> Tag</title>
</head>
<body>
   <h1>Search for "<mark>important</mark>" information here.</h1>
</body>
</html>

应避免的错误

使用标题标签时，请确保避免以下错误：

跳过级别 - 始终遵循正确的层级 (h1、h2、h3 等)。不要跳过级别。
过度使用 h1 - 将 h1 保留为主标题；不要在一页上多次使用它。
样式过载 - 避免过度使用样式；CSS 应该处理美观效果，而不是标题。

打印页面