Question

要设置文本样式，我通常使用以下其中一项：

<span class="header">...</span>
<div class="header">...</div>
<p class="header">...</p>
<label class="header">...</label>

但是，我使用哪个标签将css样式应用于文本块实际上是否重要？

通常我会将<div>用于单个块中的所有内容（如标题或脚注），或<span>内嵌所有内容（如段落中的强调文本），但我最近发现我自己使用<div>标签来设置文本*Required的样式，我认为这似乎有点傻，因为它只是一个单词，我开始怀疑这是否是“正确的”做事方式，或者是否一个标签比另一个更好用于这样的简单文本样式。

当我想将css类应用于文本块时，是否存在某种关于使用哪个标记的标准？如果是这样，哪些因素决定使用哪个标签以及何时使用？

Answer 1

您引用的每个代码都有semantic值。

例如，<p>表示文本段落，<label>表示用于注释输入的文本块。另外，<div>对于分隔逻辑部分中的页面（分部，因此是名称）非常有用，不一定是文本，而<span>通常用于表示特定样式的内联文本部分（即使可以根据需要将跨度显示为块级元素。

虽然您不需要遵循语义标准，但当页面需要以非可视方式解释时（例如搜索引擎爬虫）不会以人眼“看到”页面时，这些标准很有用。，并且需要大致了解页面的组织方式。

Answer 2

查看您所拥有的每种元素的语义定义：http://w3schools.com/tags/default.asp

虽然span和div在语义上是中性的，但最好使用有助于为用户和浏览器提供意义的类或描述符。此外，您可以使用更高级别的块或内联元素来通过CSS提供样式，而不是为了显示而严格插入其他元素。

这也是一个领域，HTML5提供了一些优势，定义了新的元素，如article，section，aside，figure，header，{ {1}}，hgroup，nav，footer和details。上述链接中的每一种元素类型及其标准用法和假设含义。

标记不是一门精确的科学，但是对所使用的元素及其隐含意义进行一些额外的思考将不仅有助于更好地构建代码，而且还有助于在CSS选择器方面提供更多选择。

Answer 3

<span class="header">...</span>

非常适合内联文本修改。

<div class="header">...</div>

通常用于块，但是也是一个带有文本的块是块。

<p class="header">...</p>

这是段落。此外，他们默认还有一些额外的保证金。

<label class="header">...</label>

仅用于表单元素的上下文

你可以将所有内容用于所有内容，你也可以使span显示为块元素，但是你不能确定它在所有浏览器中看起来都是一样的。正如SirDarius已经提到的那样，非视觉方式非常重要

Answer 4

“您引用的每个标记都有一个语义值。例如，<p>表示一个段落，<label>表示用于注释输入的文本块。”

大流士爵士绝对正确。您使用的标签应反映其描述的内容。

如果您想具体了解<div>和<span>，则<div>用于通常用于与css格式化的组块元素。 <span>用于内联元素（例如，在句子中标注一个单词）。

有关所有代码的详情，请参阅here。

当我想将CSS样式应用于文本块时，使用的理想标签是什么？

4 个答案: