标签的使用答案

【问题标题】：Usage of tags 标签的使用
【发布时间】：2014-08-01 21:31:30
【问题描述】：

据我所知，p 标签创建段落。但我经常发现这些标签用于其他目的的 HTML 代码。例如，我在 Codecademy 练习中找到了它：

<div><p>Rex</p></div>

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

它会在这个圆圈的中心创建一个名为 Rex 的圆圈：http://jsfiddle.net/cvT6E。但是雷克斯这个词不是一个段落，它只是一个词！

当我尝试用span 替换p 标签时（这对我来说似乎更合乎逻辑），它不起作用：http://jsfiddle.net/cvT6E/2/。为什么不呢？

最后，我想知道：

1) 在示例中使用p 标签在语义上是否正确？
2）p标签替换成span标签为什么字不居中？

【问题讨论】：

span 是内联显示，如果将其更改为显示块，它将起作用jsfiddle.net/cvT6E/3 底线，如果您不想使用 p 则不要使用 div 或 span。它可以是一个单词的段落。不是每个人都会遵循 T 的语义
p 是一个块元素，包含短语内容。 span 是内联元素，是短语内容的一部分。在这里使用单个跨度意味着无论是否将文本添加到另一个跨度中，它们都可以作为一个句子被看到和阅读。包裹在 ps 中，它只是其他短语 ccontent 之外的单个文本...对于单个单词，最好是使用我自己认为的列表。
@user3546093 我猜世界 REX 从未存在过，.. 但恐龙时代......
@user3546093 可能是因为你的错字世界 = word
@user3546093 是的developer.mozilla.org/en-US/docs/Web/HTML/Element/p第一段

标签： html css semantics paragraphs

【解决方案1】：

首先，请记住 是块级element。 Mozilla 说得很好“它们最显着的特征是它们通常在元素之前和之后用换行符格式化（从而创建一个独立的内容块）。也就是说，它们占据了容器的宽度。”这就解释了为什么 居中而span 没有。

此外， 用于段落，因此更适合表示文本内容，因此保留了语义，您也可能认识到这一点。我建议在 HTML 中没有可用语义标记的情况下使用 ，在您的情况下，不坚持使用  表示一个单词或文本块。

感谢您可能会以不同的心态处理此问题，但除非必要，否则我不建议您将事情复杂化。请注意如下所述的标记。

<p><span>text</span></p>

这基本上会给您相同的效果，即“Rex”字在圆圈中居中，因为 是块级元素，它可以充当 元素的容器。因此， 将有效地继承  的属性 .这从文本垂直居中这一事实就可以看出。

 恰恰相反，它是一个内联元素，可以将其视为一个分组器，将元素捆绑在一起。同时，<div> 是一个理想的容器。就个人而言，当我找不到合适的标记元素并且我不想没有  或其他的特殊属性时，我会使用 。我喜欢，因为它很纯粹。

如果您严格要使用 并在该圆圈中居中“Rex”，您可以这样做。最后两个属性基本上使您能够做到这一点，输出如下图所示。

div span {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
        display:inline-block; 
        vertical-align:middle
}

【讨论】：

我想写它：
Rex
。 Gcyrillus 在 cmets 中认为我应该创建一个列表，也许他是对的。感谢您的回答。
这是一种意见，因为根据 HTML 规范没有“推荐”解决方案。从长远来看，使用您认为对您有用的东西。
是的，这个答案比我的要好

【解决方案2】：

问题 1 主要基于意见，答案没有实际意义。

问题 2 有一个简单的答案：span 元素根据定义是内联元素（带有display: inline），因此text-align 属性不适用于它（即，对其呈现没有影响） .您可以解决此问题，例如使用div 代替span 或使用span 和CSS 声明display: block。

【讨论】：

【解决方案3】：

p 通常用于显示段落，但由于其默认属性，它也可以用于许多其他事情。在这种情况下，span 将不起作用，因为 span 具有默认的display:inline。

【讨论】：

在我的示例中应该使用哪些标签？ ?
或者你可以使用一个默认为 display:block 的 div。