<h1>、<h2>、<h3>...标签，在段落内内嵌（<p>）答案

【问题标题】：<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)<h1>、<h2>、<h3>...标签，在段落内内嵌（<p>）
【发布时间】：2011-01-13 02:26:06
【问题描述】：

我正在尝试在段落中添加<hx> 标签，例如：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras <h2>placerat</h2> justo vel risus porta cursus. Nullam eget sem nibh. Sed <h3>mattis</h3> facilisis rhoncus. Morbi sit amet nisl lectus.</p>

但我总是在每个之前都有一个换行符，即使应用了所有这些，以及以下声明的组合：

h1, h2, h3, h4, h5, h6 {
display:inline !important;
text-transform:none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
clear:none;
color:inherit;
margin:0;
padding:0;
}

那么我该怎么做才能使标签与文本内联而不被注意到？现在我得到类似的东西

Lorem ipsum dolor sit amet， consectetur adipiscing 精英。阿里康 pulvinar tincidunt neque，位于 blandit 狮子座马蒂斯简历。废话

placerat justo vel risus porta cursus。 Nullam eget sem nibh。

mattis facilisis rhoncus。莫比坐 amet nisl lectus。

谢谢

PS：顺便说一句，我正在为 drupal 使用蓝图框架主题。

【问题讨论】：

标签： html css seo

【解决方案1】：

您误用了header tags。

您应该在 CSS 类中使用 <span> 标签。

我tried it out，发生的情况是，当 Firefox 在<p> 中看到无效的<h1> 标记时，它会自动关闭<p> 标记。您可以在 Firebug 中清楚地看到这一点。

【讨论】：

一些搜索引擎知道用于 SEO 的“不受欢迎的路径”技术，并标记网站以将其除名。我会坚持使用正确的语义并使用其他方法来最大化您的排名。
"...SEO 机构给了我们这个方向。"那么您的 SEO 机构就配备了白痴（或傻瓜）。
"CSS classes" -- 类是 HTML 属性。 CSS 可以使用它们作为一条标准来选择元素，但它们存在于 HTML 中。
@Alextronic 立即取消与这家 SEO 公司的合同！他们向您推销绝对不真实的信息和建议，如果有任何事情，您将从该建议中损失的不仅仅是金钱。我强烈建议您在 SitePoint 论坛上发帖，因为那里的一些普通用户对 SEO 非常了解，并且会引导您朝着正确的方向前进，或者可以将您指向真正知道自己在做什么的人的招聘方向。跨度>

【解决方案2】：

只需在段落的开头放置一个 h2 标签。例如。 <p>The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p> 是 para 并且我们希望自动打破包含在 h1 标记中..

<p><h2></h2>The p tags are <h1>automatically breaking</h1> as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p>

但是我们无法实现我们赋予 p 标签的样式，因为 p 标签会自动中断。

注意：h1 标签的样式应为

h1{ display:inline; !important}

【讨论】：

【解决方案3】：

<p> 标签只能包含内联元素。标头标签是块级元素，即使您将它们设置为内联显示，也不能进入 <p> 标签内。

无论如何，考虑到这种用法，它们在语义上是不正确的——段落不应该有随机浮动的标题。考虑正确使用<em> 和<strong> 标签，或者如果它们真的不是您要描述的内容，请使用带有特定类的<span> 标签。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
pulvinartincidunt neque, at blandit leo mattis vitae.
Cras <em>placerat</em> justo vel risus porta cursus. Nullam eget
sem nibh. Sed <strong>mattis</strong> facilisis rhoncus. Morbi sit
amet nisl lectus.</p>

【讨论】：

使用 em、strong 和 span 将允许您为这些元素指定特定样式，而不会出现不正确的语义标记。
请参阅我对 SLaks 回答的评论。谢谢。

【解决方案4】：

“H”标签用于标题，标题，以显示主题中的断点。 “p”标签用于控制文本的长度，每个单独的段落都会得到一个“p”。 “span”标签只能放在“p”标签内，它们用于在段落中显示重点，但在css样式方面它们是有限的。不幸的是，你必须遵循这些标签的 html 结构，否则每个浏览器都会有不同的东西。

【讨论】：

您应该始终为工作使用最符合语义的标签。所以，如果你想强调文本，你应该使用em。

【解决方案5】：

SLaks 是对的。你不应该在段落中使用标题。但是，如果您真的需要它（如果它是由其他人编写的）。您也可以通过将p 设置为内联来解决问题。这会起作用的。

【讨论】：

我确信它有效。请看这里dl.dropbox.com/u/1961549/StackOverflow/HeadingInline/Test.html。
这听起来很有希望，但是如果我将'p'设置为内联，当一个段落结束时，下一个段落将在同一行中，而不是创建一个新段落（我的意思是段落中断），因此导致没有分隔的长文本。您是如何在演示中消除这种影响的？
从代码中可以看出（Firefox 中的 Ctrl+U），这就是我所做的一切。奇怪的是它对你不起作用。我在 FF、Chrome 和 Konqueror 上对此进行了测试，它们都可以正常工作。我也使用你的示例段落。
你说得对，纳瓦曼。不知道为什么它对我不起作用。即使我将它们设置为 'inline !important'，我的 css 中一定有一些东西仍然影响着 'p' 和 'hx' 标签。诡异的！我检查了蓝图主题对“p”元素的声明，它是这样的：“p {margin:0 0 1.5em;}”和其他地方：“{vertical-align:baseline;}”，所以我不这样做不知道还能有什么。
上面来自 NawaMan 的示例仅在您的 p 和 h1 在标记中有 CSS INLINE 时才有效（为多个段落保留 p 边距底部），而不是在它使用 CSS 选择器（如在样式表中）时。另一个问题是它破坏了其他样式，例如发生内联 h1 的颜色。我仍然充其量将这种技术称为 hacky - 因为即使 p 和 h1 都是 display:inline，浏览器仍然“自动关闭” p 标签，这就是颜色样式中断的原因。如果你自己关闭 p 标签，尝试在 h1 之后修复 p 颜色，那么仍然会出现换行符。

【解决方案6】：

一旦 html 解析器到达 hx 标签，p 标签就会自动中断。如果你真的想这样做，你必须在 hx 标签之前关闭 p 标签。然后设置 p 和 hx 显示内联！

【讨论】：