HTML 标题对应于标题和副标题，通过突出主题和吸引用户注意力发挥着至关重要的作用。除了 HTML 段落之外，它们还负责构建内容并使内容更易于消化。了解这些 HTML 元素和其他标签，以使页面更有条理和结构化。

最重要的标题

有 6 种类型的 HTML 标题<h1>，<h6>设计人员可以将其用于网页上的标题和副标题。正如您可能猜到的那样，<h1>定义了最重要的标题。它代表页面标题，通常具有最大的字体大小和粗细。

就像厨房里有几个厨师从来都不是一件好事一样，你应该避免<h1>每页使用超过一次。否则，它可能会使搜索引擎和屏幕阅读器感到困惑和迷惑。

最不重要的标题

标签的<h6>排名最低，代表最不重要的标题。确保使用</h6>没有间距的结束标签，否则整个格式化工作将一无所获。<h4>事实是，除非您正在编写具有多个类别和子类别的技术文档，否则大多数内容不会比标签更深入。

标题顺序

标题通过直观地指示最重要的部分来帮助组织内容。根据 WebAIM 的研究，超过 70% 的屏幕阅读器用户使用标题来更好地浏览冗长的页面。

牢记可访问性和可用性，尽量保持标题层次结构并避免跳过标题级别，例如从<h2>到<h5>。有时，如果页面内容需要，可以恢复顺序并<h2>在之后使用。<h5>

正确使用

标题用于标题和副标题。使用<h>标签使文本更大或更粗是没有意义的，并且会在网页上产生视觉噪音。反过来，应用标题而不是使用<b> </b>标签使文本变为粗体违反了可访问性准则，并使屏幕阅读器用户无法扫描内容并跳到最有趣或最有用的部分。

添加标题

就像大多数其他 HTML 元素一样，标题由开始和结束标记组成。确保关闭所有括号，在结束标记中添加斜杠，并省略任何间距。所有页面至少应包含<h1>介绍页面标题的标题。

添加标题以保持层次结构

标题为页面创建结构化大纲，类似于书籍或学期论文中目录的功能。从视觉设计的角度来看，标题使用它们的大小和重量来指示重要内容并对其进行优先级排序。从幕后，这些<h>标签向屏幕阅读器显示内容的逻辑顺序，并为搜索引擎提供关键字机会。

在视觉上，您可以放大文本并用粗体样式强调它，但屏幕阅读器会将其解释为文本，而不是标题。

显示多个段落

段落是从新行开始的文本块。在 HTML 世界中，我们使用<p>元素来定义一个段落，浏览器会自动在其前后添加一些空白。请记住，<p>元素是一个容器，它应该有开始<p>和结束</p>标签来将文本分成几部分。

显示额外的空格

让我们承认——我们都通过使用空格键添加额外的空格或额外的行来在 Word 文档中添加段落。HTML 页面不接受这种格式。浏览器将自动删除任何多余的空格和行，并且您的页面将有一段普通的文本，而不是段落或换行符。

显示额外的行

<br>如果要添加换行符，请使用标记。这是唯一的解决方案！如果您手动单击空格键或在段落内输入，您就是在浪费时间。浏览器会删除那些多余的行，您的文本将塞进一个段落。

添加主题休息

要开始一本书的新章节或学期论文的新主题，您可能需要休息一下，而一个段落是不够的。该<hr>标记表示沿 x 轴带有粗线的中断。好消息是您不必担心关闭它。<hr>是一个空标签，这意味着它不需要结束标签。

添加换行符

该<br>元素引入了换行符。这意味着如果没有此标记，您的段落将保留其行为并在单行上显示文本。这个标签最常见的用途是在书面诗歌和地址中看到。请记住，<br>标签是空的，所以如果您关闭它，您不必担心。它也是一个内联元素，不像块级元素那样贪婪，所以它只占用必要的宽度。

定义预格式化文本

还记得，当我们告诉您浏览器不会对多余的空格和行感到后悔并在单个段落中显示内容时？好吧，该<pre>元素找到了绕过此规则的方法，并允许开发人员保留预格式化的文本，并将其完全按照 HTML 文件中的内容呈现，并带有所有空格。要记住的一件事是文本使用固定宽度的字体或等宽字体，例如 Courier。它也是一个容器元素，因此您应该同时使用开始标签和结束标签

添加段落

HTML<p>元素表示段落，这些段落通常是相邻的文本块，但也可以是任何相关内容，如图像或表单。因为它是块级元素，所以浏览器会<p>在元素之前和之后用新行显示标签。标签通常需要关闭，但段落是块级元素，如果在关闭标签<p>之前有另一个块级元素，则会自动关闭。</p>

添加水平规则

假设您在故事中的场景发生了戏剧性的变化，或者在最后的论文部分中发生了主题转移。哪个 HTML 元素可以帮助您添加视觉中断？应用空白可能还不够，所以<hr>标签在这里派上用场。它添加了一条默认左对齐的水平线。这个标签是空的，不需要关闭。

添加换行符

该<br>标签在行的划分很重要的情况下很有用，例如在诗歌或地址中。您必须确保将其放置在您希望文本中断的每个点。后面的文本<br>从一个新行开始，你不必担心关闭标签——它是一个空的。

保留所有空格和换行符

该<pre>元素定义了预格式化的文本，并允许您使用打字机效果呈现文本。从示例中可以看出，它保留了所有多余的空格和线条，并使用等宽字体。此元素允许您使用<pre>标签来呈现诗歌、创建 ASCII 艺术或显示代码结构。请记住，开始<pre>和结束</pre>标签都是强制性的。

以上内容为转载