6

要设置文本样式,我通常使用以下方法之一:

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

但是,我使用哪个标签将 CSS 样式应用于文本块真的很重要吗?

通常我<div>用于应该在单个块中的所有内容(如页眉或脚注),或<span>用于内联的所有内容(如段落中的强调文本),但是我最近发现自己使用<div>标签来设置文本的样式*Required,我认为这似乎有点傻,因为它是一个词,我开始想知道这是否是“正确”的做事方式,或者一个标签是否比另一个标签更适合用于像这样的简单文本样式。

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

4

4 回答 4

8

您引用的每个标签都有语义价值。

例如,<p>表示文本段落,<label>表示用于注释输入的文本块。a <div>也可用于在逻辑部分(部门,因此名称)中分隔页面,不一定只是文本,而 a<span>通常用于表示特定样式的内联文本部分(即使可以显示跨度)如有必要,作为块级元素)。

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

于 2013-01-09T20:35:11.463 回答
1

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

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

这也是 HTML5 提供一些优势的一个领域,它定义了新元素,如article, section, aside, figure, header, hgroup, nav,footer和. 以上链接中的每种元素类型及其标准用法和假定含义也是如此。detailssummary

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

于 2013-01-09T20:42:16.003 回答
0
<span class="header">...</span>

非常适合内联文本修改。

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

通常用于块,但是带有文本的块也是块。

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

这是为段落。他们也默认在它下面有一些额外的边距。

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

仅在表单元素的上下文中使用

可以将它们全部用于所有内容,也可以使跨度显示为块元素,但您不能确定这在所有浏览器中都会显示相同。正如 SirDarius 已经提到的,它对于非视觉方式很重要

于 2013-01-09T20:47:51.303 回答
-2

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

大流士爵士是绝对正确的。您使用的标签应该反映它们所描述的内容。

如果您想具体了解<div>'s 和<span>'s than <div>'s 用于组块元素,通常用于使用 css 格式化。A<span>用于内联元素(例如,在句子中设置一个单词的样式)。

有关所有标签的更多信息,请参阅此处

于 2013-01-09T20:44:50.023 回答