一段时间以来,我一直在制作网站,但从未真正看到有关正确使用容器标签的讨论。我在收藏标签中看到了许多不同类型的内容,但通常页面创建者似乎只是选择了他们喜欢的风格并坚持下去。
在我看来,主要的差异是
<p>
<div>
但我也想关于
<span>
以及我可能忘记的任何其他人。
一段时间以来,我一直在制作网站,但从未真正看到有关正确使用容器标签的讨论。我在收藏标签中看到了许多不同类型的内容,但通常页面创建者似乎只是选择了他们喜欢的风格并坚持下去。
在我看来,主要的差异是
<p>
<div>
但我也想关于
<span>
以及我可能忘记的任何其他人。
最初创建 HTML 是为了将文档的内容放入某种计算机可以理解的结构中。考虑到这一点,p
如果要将页面内容转换为打印文档,则该标签应该包含任何结构为段落的内容。和元素保留为通用容器,以促进相关元素的格式化和分组,以提供额外的结构级别,可能与文本文档中的页面相关div
。span
在某些情况下,p
标签应该包含其他元素,例如锚点 ( a
)、图像 ( img
) 和其他内联元素,因为它们直接与段落其余部分的内容相关,并且以这种方式对它们进行分组是有意义的,或者该段其余部分的文字提供了更深入的描述。
然而,如果没有对这些元素的额外描述,那么将它们简单地放在一个段落中作为一个方便的容器是没有意义的;adiv
会更合适。一般来说,一个段落应该包含一段文本和任何直接相关或描述的元素。段落中没有其他任何意义。
更新:HTML5 还添加了许多其他语义“容器”元素,包括article
、nav
、header
、section
和aside
.
我认为,标签的含义是这样的:
<p>Paragraph, usually just text</p>
<div>A block, containing anything</div>
<span>Just a simple non-blocking wrapper</span>
这三个(和许多其他)标签之间的区别在于它们的语义含义。HTML 标准包括具有特定语义含义的标签(<p>
用于段落、<em>
用于强调文本等)和没有语义含义的标签。
后者是<div>
和<span>
,用于识别需要识别的块级或内联级内容(例如使用 aclass=
或id=
属性),但不存在语义特定标签。例如,可以写<p>Hi, my name is <span class="name">John Doe</span>.</p>
——表明它是一个段落(浏览器已经知道如何处理它)并且它的那部分内容是一个名称(这对浏览器绝对没有任何意义,除非 CSS 或 JavaScript 使用它)。
因此,这些标签在向 HTML 文档添加不符合标准提供的语义标签的附加信息(参见hCard 规范中的一个很好的例子)和应用视觉 (CSS) 或功能 (JavaScript)方面都非常有用结构到文档而不改变其语义。
我认为页面创建者应该使用语义标记,这意味着他们创建的标记应该传达意义(而不是表示)。<div>
并且<p>
有不同的含义。前者用于定义 HTML 页面的一个分区(或部分),后者用于定义一段文本。
<p>
是一个块级元素,应该包含一个段落,由文本、修改该文本的内联元素(<p>
、<a>
、<abbr>
等)和图像组成。
<div>
是用于划分页面的块级元素,几乎总是与 CSS 样式结合使用。
<span>
...好吧,老实说,我不经常使用这个标签。它是一个内联元素,当我想将样式应用于文本的一部分时,我通常会使用它,而这些文本不会从使用更有意义的东西(如<strong>
and<em>
标签)中受益。
我被认为是“webdeveloppement的豆腐” <span>
,<div>
因为它没有真正的味道,但你几乎可以用它做任何事情。
(X)HTML 标签定义了它们周围的文本是什么。是和地址,是链接,是段落,等等...
<div>
并且<span>
是访问您通常无法访问的站点的简单方法。就像当你试图调整 | 象征。我发现的最快的方法是在它周围放置一个跨度,给它一个类,然后实现 CSS。
在我看来,这就是他们的好处。我很想听听我在这里写的更多甚至更正的内容。
听起来您需要阅读HTML 规范
该
p
元素代表一个段落。
该
div
元素根本没有特殊含义。它代表它的孩子。它可以与class
、lang
和title
属性一起使用,以标记一组连续元素共有的语义。
span
元素本身没有任何意义,但与全局属性(例如 、 或 )一起使用时会class
很有lang
用dir
。它代表它的孩子。
div
and之间的主要区别在于span
span 是flow content
, phrasing content
, and palpable content
,而 div 只是flow content
and palpable content
。
本质上,这归结为:
div
元素是块级元素,通常只能放置在其他块级元素中,而span
元素是内联元素,并且可以放置在大多数其他元素中。