HTML标签的本质区别？答案

【问题标题】：The essential difference among HTML tags?HTML标签的本质区别？
【发布时间】：2011-10-09 21:22:24
【问题描述】：

<b> 标签使文本变为粗体，但如果使用 CSS "font-weight:normal;" 分配，那么它绝对像一个普通标签。另一方面，<i> 标签可以被设置为像<b> 标签一样显示里面的文本：

<i style="font-style:normal; font-weight:bold;">

是的，我说的是HTML标签的互换性，所以我们可以少一些标签。

其中 2 个最著名的标签是“div”和“span”，在这个 SO 问题中进行了讨论：What is the difference between HTML tags DIV and SPAN?

我想知道<div>标签的本质是什么，使得span标签是这样的：

<span style="display:block;"></span>

不能替代 div 吗？另一方面，使这些代码成为“无效”（X）HTML的深层原因是什么：

<span style="display: block"><p>Still wrong</p></span>

谢谢！

对于这个场景，我正在构建一个所谓的“HTML-CSS-Generator”，它需要对 HTML 标签有深入的了解。我想过滤所有有效的 HTML 标签集以制作一组“主要标签”。然后我要求标签的可互换性。

更新（本题的最终目的）

我想知道区别在于标签是本机“块级”（如div，p）还是“内联级”（如span）？

是否有任何其他类型的“原生属性”（CSS 或 JS 无法更改），例如 HTML 标签的“块/内联级”？

【问题讨论】：

简答：语义。

标签： html tags

【解决方案1】：

不要去检查事物的呈现方式或外观（即使这是 HTML 规范的一部分）。 HTML 是关于意义的。

标签<u>、<i>、<b> 是什么意思？对，他们没有任何意义！他们只定义事物的外观。这正是它们从 HTML5 规范中删除（或实际上已弃用）的原因。

当然，您可以将<div> 设置为<span>，您可以将<div> 设置为<input type="text">。但这不是它的意义，而是意义。

根据 HTML 规范，<div> 是一个分隔符。它将网站的某些部分划分为标题或内容框的某些部分进入<div>。

<span> 用于指定内联的内容。像下面这样

<div class="Location">    
   Currently I'm living in <span class="Country">The Netherlands</span>
</div>

不要根据 HTML 标签的呈现方式来比较它们。还要始终选择与显示的数据最相似的 HTML 标记，即使它呈现的效果与您想要的完全不同。

区别不在于它们是块还是内联（即使这是它的效果）。不同之处在于它们所代表的数据。

【讨论】：

<u>、<i> 和 <b> 在 HTML5 中既不被删除也不被弃用。
但就语义而言，青睐已不再使用此类标签，而是使用 CSS 作为样式。 HTML 标签应该描述文档的结构并添加语义含义，而不是让浏览器供应商依赖其幼稚的实现来进行用户界面工作。
很好的解释。只是想补充一点，b 和 i 确实有意义，但用例很少见。例如。字典、戏剧/戏剧剧本、翻译文本等
他们有吗？你能举个例子吗
+1 蒂莫。很好的解释。对于使用早期 HTML 版本的人来说，可能会感到困惑，因为他们认为和有意义，但在 CSS 出现之前，这只是直接硬编码的样式。现在我们已经在 CSS 中分离了样式，这取决于开发人员如何设置 HTML 标签的样式，完全独立且更加灵活。 HTML 定义了文档的结构，CSS 定义了它的样式。

【解决方案2】：

考虑form versus function。 DOM 是一种结构。这是一个对象模型。 <div>s 是块级元素，它们应用了规则。 <span>s 是内联级元素，对它们应用了不同的规则。

样式元素，如<u>、<b>、<small>、<i>、<em> 等，无论如何都将在 HTML5 中逐步淘汰，以努力将 form 从function 这就是为什么你应该依赖 CSS 来为你设置 <span> 元素的样式。

CSS 有一个职责，就是style 为用户渲染页面。它可以告诉浏览器将块级元素视为内联级元素，反之亦然出于显示目的。

【讨论】：

我唯一的狡辩是，像 <b> 这样的东西的弃用更多地与这些元素含义的语义有关。这是由于显示逻辑与标签描述包含内容的方式分离； <b> 没有说明内容意味着什么，因为它仅仅描述了内容的显示状态，没有任何关于内容是的意义。也就是说，我清楚地记得div 和span 标签起初也是有争议的（参见<panel>），因为它们在语义上也没有有意义，但随着时间的推移已经消失了.
其实我认为是<layer>，而不是<panel>。
<b> 可以替换为<strong>
<u>、<b>、<small>、<i>、<em> 在 HTML5 中均未弃用。事实上，HTML5 规范只使用了一次“弃用”这个词——来描述 HTML4 对一些表现性元素做了什么。在 HTML5 中，一些元素和属性被认为是“过时的”，而另一些则被认为是“过时但符合标准”，但上面列出的元素都是完全有效的。
你是对的@Alohci - 我在这里误用了弃用这个词。 HTML5 在技术上对作者和用户代理有“单独的一致性要求”，这意味着没有标签需要被弃用。我想一个更好的词是“遗产”。

【解决方案3】：

问题已经回答了，但我只是想补充一下：

对于使用早期 HTML 版本的人来说，一开始可能会感到困惑，因为他们可能会思考并具有意义——但这只是以前在 HTML 文档中直接硬编码的“内联”样式有 CSS。

发明 CSS 是为了将样式与文档结构分开。

现在我们已经在 CSS 中分离了样式，开发人员可以自行决定如何设置 HTML 标签的样式——完全独立于文档结构并且更加灵活。

HTML 定义文档的结构，CSS 定义它的样式。

【讨论】：

【解决方案4】：

来自HTML 4.01 Specification

内容模型 通常，块级元素可能包含内联元素和其他块级元素。通常，内联元素可能包含只有数据和其他内联元素。在这种结构中固有区别在于块元素创建“更大”结构的想法比内联元素。

P 元素是块级元素，SPAN 元素是内联元素。

【讨论】：

那么，它们之间的区别在于它们是“天生”的块级或内联级，对吧？
这是正确的（根据我的理解）。当 DTD 指定内联元素不能包含块级元素时，它将生成无效文档。
HTML5 等价物是 content categories，这有点不同，因为内容类别不构成元素的分区，但它们的使用方式相似。

【解决方案5】：

(X)HTML 是一个基于规则的系统，因此您必须遵守规则...像 <div> 和 <p> 这样的块级元素不能进入像 <span> 这样的内联元素，这只是一个规则（有效的）语言。

此外，HTML 完全独立于 CSS，因此更改元素显示行为的能力不会也不应该对如何在 HTML 本身中有效使用该标签产生任何影响。

【讨论】：

【解决方案6】：

来自wikipedia HTML 页面：

HTML 元素代表语义或意义。例如，标题 element 表示文档的标题。

不同的标签有不同的含义。例如，li 表示列表中的一个项目。无论如何，您都可以通过 css 使其看起来像这样，但它仍然是为了指示列表中的项目。

对于普通浏览器，li 可能看起来像div，具体取决于您应用的 CSS。但是考虑一个看不见的人。向他们读取页面的程序可能会区分列表中的项目和divs。

【讨论】：

这里的隐藏点，可访问性，是一个重要的。如果有人只根据它们的显示方式来考虑 HTML 元素的含义，那么他们就没有抓住重点。

【解决方案7】：

如果我没记错的话，CSS 规范包含 HTML 的默认样式表或“用户代理”样式表。您可以通过打开 Google Chrome（内置开发者工具），打开以下 HTML 文档来确认这一点：

<html>
<head></head>
<body>
<div></div>
<span></span>
<b></b>
<i></i>
</body></html>

然后依次单击扳手、工具、开发者工具和元素。

依次选择body、div、span、b和i。请注意，浏览器将“用户代理”样式表应用于每个元素。例如，body 的用户代理样式表是：

body {
display: block;
margin: 8px;
}

b 的用户代理样式表是：

strong, b {
font-weight: bolder;
}

注意span 没有用户代理样式表；这是因为，至少对于 Google Chrome，display 的默认值是 inline 或 inline-block（我不确定）。

如果 span 像 div 一样使用，可能会导致 HTML 无效，但这实际上是唯一的缺点。

【讨论】：

【解决方案8】：

当我想要内联渲染更改，或者我需要从 javascript 更改文本时，我使用 a。默认情况下，span 标签不会引入换行符等，而 div 标签会。因此，例如，如果我需要

<div>Welcome to my site, <span id='name'>Matt</span></div>

可通过 Javascript 进行更改。

$('#name').html('vantrung');

如果我想在某些单词周围添加边框或其他突出显示，或者更改字体，或者有时更改顶部位置，我也会使用 span 标签。但它总是用于内联文本更改。我有一些例子，我有一个图像和文本内联，但需要将文本向上移动一点。我为此使用了一个跨度：

<p><img src='some.png' /><span style='position:relative; top:-3px'> Some</span></p>

【讨论】：

【解决方案9】：

这一切都与语义有关。基本上，如果您将某些内容包含在“<b>”标签中，它应该“意味着”粗体，而不仅仅是“成为”粗体。虽然您可以随心所欲地设置大多数标签的样式，但如果您使用标签本来就应该使用的标签，那么每个人的生活都会变得更轻松。

关于“spans”和“divs”的区别，spans 是内联级别，而 divs 是块。这意味着“跨度”元素不应导致换行。一个常见的用途是为段落中的少量文本设置样式。

另一方面，作为块级元素的 Div 应该会导致换行并暗示与周围内容的语义分离。

考虑到所有这些因素，您真的不应该使用“b”或“i”标签来在视觉上影响内容的显示方式。改用跨度...

【讨论】：