Question

编码HTML页面（特别是文本内容很多）时，有时可以选择使用DIV或P元素。概念规则是：think semantically, use P for text paragraphs。

我发现的一个问题是，段落的真实世界概念并不总是与HTML限制一致，即 P元素不能包含块元素。在现实世界中，段落有时确实包括文本块 - 特别是引用。以P. G. Wodehouse的这段文字为例：

奇怪的部分是在之后   看到这一切的第一次震惊   可怕的能量似乎没有   这么奇怪。我和同伴说过话   因为谁去过纽约，和   他们告诉我他们发现它只是   相同。显然有一些东西   空气，无论是臭氧还是臭氧   磷酸盐或其他东西，这使得   你坐起来注意。一种   拉链，因为它。一种bally   自由，如果你知道我的意思，那   进入你的血液并揍你，   并让你感觉

上帝在他的天堂里：   一切都是对的，
     如果你有奇怪的话，你不在乎   袜子。我无法表达得更好   而不是说这个想法   当我走路的时候，在我的脑海中最重要的   关于他们称之为时代的地方   广场，是有三个   千里之间的深水   我和阿姨阿姨。

看到这个的自然（语义）方式是带有子块元素的一个段落。但在HTML中，您必须选择

制作三个P段（你应该做一些调整，例如最后的伪段可能有错误的边距或缩进 - 但最重要的是，它在语义上和结构上都是错误的）
将内部引用编码为内联元素，具有多个BR的SPAN（丑陋，很难将样式应用于所有内容）
将整个段落设为DIV（如果其他段落编码为P元素，则不可行/不一致）

我不喜欢任何一种选择 - 我也看不到其他选择;因此决定何时应该使用P的语义标准对我来说仍然不太令人满意。

来自another PGW opus的另一个类似示例如下：

example

有关处理此方案的任何建议吗？

Answer 1

你问的是整个段落，但引用是真正的问题 - 我认为<q>，<br>和CSS的混合是合适的，因为诗是其中一个案例换行有一定意义。通过一个类来识别特定的内联引用是一首诗的摘录，你可以得到你想要的样式。

http://jsfiddle.net/insin/af2Uz/

<!doctype HTML>
<html>
<head>
<title>Poem Quoting</title>
<style type="text/css">
p { text-indent: 1em; }
q.poem { display: block; margin: 2em; font-style: italic; text-indent: 0; }
q.poem:before, q.poem:after { content: ''; content: none; }
</style>
</head>
<body>
<p>
  The odd part of it was that after the first shock of seeing all this
  frightful energy the thing didn't seem so strange. I've spoken to fellows
  since who have been to New York, and they tell me they found it just the
  same. Apparently there's something in the air, either the ozone or the
  phosphates or something, which makes you sit up and take notice. A kind of
  zip, as it were. A sort of bally freedom, if you know what I mean, that
  gets into your blood and bucks you up, and makes you feel that
  <q class="poem">God's in His Heaven:<br>All's right with the world,</q>
  and you don't care if you've got odd socks on. I can't express it better
  than by saying that the thought uppermost in my mind, as I walked about the
  place they call Times Square, was that there were three thousand miles of
  deep water between me and my Aunt Agatha.
</p>
</body>
</html>

...但是，如果没有CSS，这看起来会非常糟糕，所以我会花时间以最技术上正确的方式表达确切的语义，使用<blockquote>并将周围文本分成两部分<p>个带有一个类，表示其中一个<p>确实是一个延续。

到目前为止，如果它与你必须在尖端结束时使用的东西不符合，那么你只能采用理论 - 使用你不喜欢的方法之一的真正损失是什么？如果在某个阶段，你来写一些取决于结果文档结构的东西，如果你在这些场景中不能始终如一地使用相同的方法，那么这只会是一个障碍（能够依赖于像“治疗”这样的规则一个块引用，然后是p.continuation作为前一个p“的成员。

Answer 2

使用HTML的<q>元素

<p>My Long Paragraph <q>Set Apart</q> More of my boring stuff </p>

http://www.w3schools.com/html5/tag_q.asp 官方W3C： http://www.w3.org/TR/html401/struct/text.html#h-9.2.2 （谢谢Jared）

Answer 3

为语义（和样式）原因指定一个类在这里有意义。

<p class="visual">WELCOME HOME MR. WILL</p>

或

<div class="thought">
    <p>God's in His Heaven:</p>
    <p>All's right with the world,</p>
</div>

对于第二种情况，您可以使用CSS选择器（对于支持它们的客户端）稍微修改上一个thought段落的样式以保持正确的格式。

#thought_lines{
    padding: 10px 5px 5px;
}

#thought_lines p:last-child{
    padding-bottom: 5px;
}

建议用块内容处理段落？

3 个答案: