除了标题 <h1><h2> 等的 HTML 元素答案

【问题标题】：HTML element aside from headers <h1><h2>, ect除了标题 <h1><h2> 等的 HTML 元素
【发布时间】：2009-12-28 01:18:16
【问题描述】：

我正在浏览与我的问题相关的问题，但似乎找不到答案。无论如何，我想知道当我已经在我的网站上同时使用（p 和 div 标签）作为纯文本时，我是否仍然可以使用 p 或 div 标签而不是标题标签。原因是我只想在我的网站中显示一个标题标签 h1。我试图调整一些部分，并在此过程中迷路了。可悲的是，经过几次测试，它没有工作......我想知道它是否可能，或者是否有任何其他 HTML 标记可以使用，而不是 header 标记。你们的任何回应将不胜感激。 =)

【问题讨论】：

欢迎来到 StackOverflow，liza28！
我不确定你在问什么。为什么你不能为你的标题使用标题标签？您能否发布一段代码来说明您遇到的问题？
感谢您的欢迎，但我无法在此处发布代码，因为我仍在处理它。 =) 不管怎样，它是一个客户站点，他们想仍然使用 sifr 但没有其他标题标签。我们目前有 h1 和 h2 用于 Drupal 块格式。因此，他们希望 css 位于 div 或 p 中，这样我们就可以消除 h2。对困惑感到抱歉。同样，想法是用 div 或 p 或其他具有 h2 属性的 html 标记替换 h2 并仍然使用 sifr。再次感谢您的所有回复。我真的很感激。 =)

标签： html css tags styling

【解决方案1】：

您可以随意更改<p> 的外观，例如：

<p class="header">This is a header</p>

与

p.header { font-size: 200%; font-weight: bold; }

但我会推荐反对。原因是 HTML（表面上）是语义的，所以如果你声明：

<h3>This is a header</h3>

你实际上是在说（语义上）给定的文本是某种标题。请记住，您有 <h1> 到 <h6>，您可以选择使用其中的哪一个。不用<h1>就可以用<h2>等等。

这对于视障人士也很有用，因为对于那些使用屏幕阅读器的人来说，标题样式的内容不会这样显示，但标题会显示。您应该尽可能解决可访问性问题。

【讨论】：

【解决方案2】：

您应该不将 div、span 或 p 设置为看起来像标题，然后在 h1-h6 之外使用它。这完全违背了经验法则背后的精神，即一个页面上的 h1 不应超过一个。

【讨论】：

【解决方案3】：

<span> 也是一个有用的补充。

【讨论】：

【解决方案4】：

您可以反复使用P 和DIV 标签。如果需要，请将它们设置为类似于 H1 的样式。

p.title {
  font-size:18px;
  font-weight:bold;
}
p.header2 {
  background: url("bg.jpg");
}

--

<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>

<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>

【讨论】：

哇，感谢乔纳森的及时回复。我可能错过了在 css 中声明类，这就是它不起作用的原因。无论如何，我拥有的当前 h2 在显示中有图像背景。也许我需要时间来了解更多网站的结构。我正在调整一个drupal网站。您提供的任何其他提示都会非常有帮助，因此请继续提供。如果成功我会通知你/
对了，我忘了说明这个问题与使用sifr有关。谢谢！
liza28，我更新了我的示例来演示如何为某些段落添加背景图片。
您为什么要将段落样式设置为看起来像标题，而不是直接使用标题？一般来说，这是一个坏主意。提取网站轮廓的工具（如 Google 机器人或屏幕阅读器）不会将这些段落视为标题。
Brian，因为 OP 已经使用了他们的 H1 标签，并且您不应该在每页使用多个 Header 标签的实例。我回答了这个问题，我没有推动我的个人观点。

【解决方案5】：

不要忘记记住您网站上的 SEO。大概这就是为什么你只想要一个 H1 标签？

【讨论】：

【解决方案6】：

<span> <strong> 和 <em> 是您可以在 <p> 标记中使用的其他内容。

【讨论】：

【解决方案7】：

我会使用 <div> 或 <span> 标签并使用 ids 或 classes 来控制样式。如果你想重复这种风格，如果只有一次实例或类，则使用 ids。你也可以在一个元素上使用多个类

例如

<div id="text">Text Here</div>

<span class="red">This would be red</span>

<div class="red big">This would be big and red</div>

用css

#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }

希望对你有帮助

【讨论】：

【解决方案8】：

您可以使用多个 h1 或 h2，然后像这样定位它们：

<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>

#header h1{ color:red;}
#main h1{ color:blue;}

这不是你要问的。我怀疑谷歌比单一的 H1 方法更聪明。

【讨论】：