标题在大多数网页上都很常见。事实上，几乎任何文本文档都至少有一个标题，这样你就知道你正在阅读的内容的标题了。这些标题使用HTML标题元素h1、h2、h3、h4、h5和h6编码。

在某些网站上，您可能会发现标题是在不使用这些元素的情况下编码的。相反，标题可以使用添加了特定类属性的段落，也可以使用带有类元素的分区。我们经常听到这种错误做法的原因是设计师“不喜欢标题的外观”。默认情况下，标题以粗体显示，并且它们的大小更大，尤其是h1和h2元素，它们的字体大小比页面文本的其余部分大得多。请记住，这只是这些元素的默认外观！使用CSS，您可以使标题看起来像您想要的！您可以更改字体大小、删除粗体等等。标题是对页面标题进行编码的正确方式。以下是一些原因。

为什么使用标题标记而不是分区

这是使用标题的最佳理由，并以正确的顺序使用标题（即h1、h2、h3等）。搜索引擎对标题标记中包含的文本给予最高权重，因为该文本具有语义值。换句话说，通过标记页面标题H1，您告诉搜索引擎蜘蛛这是页面的#1焦点。H2标题有#2强调，以此类推。

你不必记住你用来定义标题的类

当您知道所有Web页面都将有一个加粗、2em和黄色的H1时，您可以在样式表中定义一次，然后就可以完成了。6个月后，当您添加另一个页面时，您只需在页面顶部添加一个H1标记，就不必返回到其他页面以了解用于定义主标题和子标题的样式ID或类别。

提供强有力的页面大纲

大纲使文本更容易阅读。这就是为什么大多数美国学校教学生在写论文之前先写提纲。在大纲格式中使用标题标记时，文本具有清晰的结构，很快就会变得明显。此外，还有一些工具可以查看页面大纲以提供概要，这些工具依赖于大纲结构的标题标记。

即使关闭了样式，您的页面也会有意义

不是每个人都可以查看或使用样式表（这又回到了#1-搜索引擎查看页面的内容（文本），而不是样式表）。如果使用标题标记，则会使页面更易于访问，因为标题提供了DIV标记无法提供的信息。

它有助于屏幕阅读器和网站的可访问性

正确使用标题可以创建文档的逻辑结构。这是屏幕阅读器将用来向视力受损的用户“阅读”网站的内容，使残疾人可以访问您的网站。

为标题的文本和字体设置样式

摆脱标题标记的“大、粗、丑”问题的最简单方法是按照您希望的方式设置文本样式。事实上，当在一个新网站上工作时，最好先写一段，h1、h2和h3样式。只使用字体系列和大小/重量。例如，这可能是新站点的初步样式表（这些只是可以使用的一些示例样式）：

您可以修改标题的字体或更改文本样式甚至文本颜色。所有这些都会让你的“丑陋”标题变得更加生动，更符合你的设计。

边界可以修饰标题

边框是改善标题的好方法，而且很容易添加。但别忘了尝试一下边界——你不需要在标题的每一边都有边界。您可以使用的不仅仅是简单乏味的边框。

我们在示例标题中添加了上下边框，以引入一些有趣的视觉样式。您可以通过任何方式添加边框，以实现所需的设计样式。

将背景图像添加到标题中，以获得更多精彩

许多网站在页面顶部都有一个标题部分，其中包括一个标题——通常是网站标题和图片。大多数设计师认为这是两个独立的元素，但你不必这样做。如果图形只是用来装饰标题，那么为什么不将其添加到标题样式中呢？

这个标题的诀窍是我们知道我们的图像有90像素高。因此，我们在标题90px的底部添加了填充（填充：0.5 0 90px 0p；）。您可以使用边距、行高和填充来获得标题的文本，使其精确显示在您想要的位置。

使用图像时要记住的一点是，如果你有一个响应性强的网站（你应该这样做），其布局会根据屏幕大小和设备的不同而变化，那么你的标题就不会总是相同大小。如果你需要你的标题是一个精确的大小，这可能会导致问题。这也是为什么我们通常避免在标题中使用背景图片的原因之一，因为它们有时看起来很酷。

标题中的图像替换

这是Web设计师的另一种流行技术，因为它允许您创建图形标题，并用该图像替换标题标记的文本。事实上，这是网页设计师的过时做法，他们很少使用字体，希望在工作中使用更奇特的字体。网页字体的兴起确实改变了设计师处理网站的方式。现在可以用多种字体设置标题，不再需要嵌入这些字体的图像。因此，您只能在旧站点上找到CSS图像替代标题，而这些旧站点尚未更新到更现代的实践中。

杰里米·吉拉德编辑