Question

有一段时间我一直在制作网站，但从未真正见过有关容器标签正确用法的讨论。我在集合标签中看到了许多不同类型的内容，但通常看起来页面创建者只选择他们喜欢的样式并坚持使用它。

我心中的主要差异在于

<p>
<div>

但我也喜欢有关

的意见

<span>

以及我可能忘记的任何其他人。

Answer 1

最初创建HTML是为了将文档内容放入计算机可理解的某种结构中。考虑到这一点，如果要将页面内容转换为打印文档，p标记应该包含任何结构化为段落的内容。 div和span元素保留为通用容器，以便于格式化和分组相关元素，以提供更多级别的结构，可能与文本文档中的页面相关。

在某些情况下，p代码应该包含其他元素，例如锚点（a），图片（img）和其他内嵌元素，因为它们直接与段落其余部分的内容相关，因此将它们分组是有意义的，或者段落其余部分的文本提供了更深入的描述。

但是，如果没有这些元素的附加说明，那么将它们作为方便的容器放在段落中是没有意义的; div会更合适。通常，段落应该包含一段文本和任何直接相关或描述的元素。在段落中没有其他任何意义。

更新：HTML5还添加了许多其他语义“容器”元素，包括article，nav，header，section，和aside。

Answer 2

我认为，标签的含义是这样的：

<p>Paragraph, usually just text</p>

<div>A block, containing anything</div>

<span>Just a simple non-blocking wrapper</span>

Answer 3

这三个（和许多其他）标签之间的区别在于它们的语义含义。 HTML标准包括具有特定语义含义的标记（段落<p>，强调文本的<em>等）和标签没有语义。

后者是<div>和<span>，用于识别需要识别的块级或内联级内容（使用class=或{{1} }属性），但不存在语义特定的标记。例如，可以写一个id= - 表示它是一个段落（浏览器已经知道如何处理），并且它的内容部分是一个名称（这意味着绝对没有到浏览器，除非CSS或JavaScript使用它。）

因此，这些标签在向HTML文档中添加不符合标准提供的语义标签的附加信息时非常有用<（> the hCard specification获得一个很好的例子）并将视觉（CSS）或功能（JavaScript）结构应用于文档而不改变其语义。

Answer 4

我认为页面创建者应该使用语义标记，这意味着他们创建的标记应该传达意义（而不是表示）。 <div>和<p>具有不同的含义。前者用于定义HTML页面的分区（或部分），后者用于定义文本段落。

Answer 5

<p>是一个块级元素，应包含一个段落，该段落由文本，内联元素组成，用于修改该文本（<p>，<a>，<abbr>等。）和图像。

<div>是一个块级元素，用于分割页面，几乎总是与CSS样式一起使用。

<span> ......好吧，老实说，我经常不使用这个标签。它是一个内联元素，我通常在我想要将样式应用于文本的一部分时使用它，这些文本不会从使用具有更多含义的内容中受益，例如<strong>和<em>标记。

Answer 6

我很想将<span>和<div>视为“webdeveloppement的豆腐”，因为它没有真正的味道，但你几乎可以做任何事情。

（X）HTML标签定义了它们所围绕的文本。是它和地址，它是一个链接，它是一个段落，等等......

<div>和<span>只是获取您通常无法访问的网站的方式。就像你想要调整大小|符号。我发现的最快的方法是在它周围放一个跨度，给它一个类然后实现CSS。

在我看来，这就是他们的好处。我有兴趣听到更多甚至更正我在这里写的内容。

Answer 7

听起来你需要阅读HTML specification

The p element：

p元素代表一个段落。

The div element：

div元素根本没有特殊含义。它代表了它的孩子。它可以与class，lang和title属性一起使用，以标记一组连续元素共有的语义。

The span element：

span元素本身并不意味着什么，但与全局属性一起使用时可能很有用，例如class，lang或dir。它代表了它的孩子。

div和span之间的主要区别是该范围为flow content，phrasing content和palpable content，而div仅为flow content }和palpable content。

基本上归结为：

div元素是块级元素，通常只能放在其他块级元素中，而span元素是内联元素，可以放在大多数其他元素中。

The HTML spec defines which elements are acceptable as descendents of each element

HTML'容器'标签 - 正确使用？

7 个答案: