Question

所以我想编写显示标题，作者和帖子本身的内容部分，我正在使用的代码是我希望标题在一行的顶部，然后是另一行的作者和另一行的内容：

<div id="main">
    <div class="container">
        <div class="title">Title</div>
        <div class="author">Author</div>
        <div class="content">
            Content here
        </div>
    </div>
</div>

或者会是一个更好的选择吗？

<div id="main">
    <div class="container">
        <span class="title">Title</span>
        <span class="author">Author</span>
        <span class="content">
            Content here
        </span>
    </div>
</div>

或者是否存在完全不同且更好的方法？

谢谢。

Answer 1

div为grouping content，span为text-level semantics。在给出的两个例子中，后者是你最好使用的：

<div id="main">
    <div class="container">
        <span class="title">Title</span>
        <span class="author">Author</span>
        <span class="content">
            Content here
        </span>
    </div>
</div>

根据.content中包含的内容，您可能希望使用div。

为了正确符合规范，您应该使用cite作为标题。同样，如果您的.content是引用或摘录，则应使用q或blockquote

<div id="main">
    <div class="container">
        <cite class="title">Title</cite>
        <span class="author">Author</span>
        <q class="content">
            Content here
        </q>
    </div>
</div>

Answer 2

也许您应该尝试使用HTML语义标记而不是div s？

<section id="main">
    <article>
        <hgroup>
            <h1>Title</h1>
            <h2>author</h2>
        </hgroup>
        <section>
            Content
        </section>
    </article>
</section>

Answer 3

没关系。所有支持一个在另一个上面的答案都很好，但几乎是随意的意见。

最后，DIV和SPAN都只是通用容器。它们本身并不意味着什么。

所以，如果你必须在这两者中的一个之间做出选择，那就没关系了。但是，由于您的一个要求：

是我希望标题位于一行的顶部，然后是另一行的作者和另一行的内容

...我建议使用DIV除了div之外没有其他原因，默认情况下，它是一个块级元素，这意味着它将自动格式化为单独的行。

所有这一切，所有人都暗示你可能会考虑一个更具语义性的容器。这会被更好地视为ol吗？或者甚至只是p个标签？

Answer 4

如果问题只是div和span之间的选择，那么答案是......

span用于单个元素，div用于块。

第二种变体比第一种更好。

有关详细信息，请参阅Grouping elements: the DIV and SPAN elements。

这里引用：

这些元素将内容定义为内联（SPAN）或块级（DIV）

Answer 5

<div>标记应用于将页面划分为逻辑块。这里<span>更合适。

然而，因为您正在显示文字错误的内容如下：

<div id="main">
    <div class="container">
        <h2 class="title">Title</h2>
        <a class="author">Author</a>
        <p class="content">
            Content here
        </p>
    </div>
</div>

毕竟，它们是专为文本而设计的。

我应该在这个例子中使用div还是span？

5 个答案: