Question

<b>标记会将文字设为粗体，但如果使用CSS“font-weight:normal;”进行分配，那么它就像普通标记一样。另一方面，<i>标记可以设置样式以在<b>标记内显示文本：

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

是的，我在谈论HTML标签的可互换性，因此我们可以使用更少的标签。

其中两个最着名的标签结果是“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标签的“阻止/内联级别”？

Answer 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标记，即使它呈现的完全不同于您想要的内容。

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

Answer 2

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

<u>，<b>，<small>，<i>，<em>等文体元素正在HTML5中逐步淘汰，来自函数的抽象表单，这就是为什么你应该依赖CSS为你设置<span>元素的样式。

CSS有责任，即样式用户的页面呈现。它可以告诉浏览器将块级元素视为内联级元素，反之亦然用于显示目的。

Answer 3

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

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

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

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

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

Answer 4

来自HTML 4.01 Specification

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

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

Answer 5

（X）HTML是一个基于规则的系统，因此您必须遵循规则... <div>和<p>等块级元素不能进入内联元素，如{{1}它只是（有效）语言的规则。

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

Answer 6

来自HTML的wikipedia页面：

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

不同的标签有不同的含义。例如，li表示列表中的项目。无论如何，您都可以通过css进行此外观，但它仍然是指示列表中的项目。

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

Answer 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没有用户代理样式表;这是因为，至少对于谷歌浏览器，display的默认值为inline或inline-block（我不确定）。

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

Answer 8

我想在内联渲染更改时使用，或者我需要从javascript更改文本。默认情况下，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>

Answer 9

这一切都与语义有关。基本上，如果你将某些内容包含在“<b>”标签中，它应该“意味着”粗体而不仅仅是“是”粗体。虽然您可以根据自己的喜好设置大多数标签的样式，但如果您使用标签，那么每个参与者的生活都会更加轻松。

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

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

考虑到所有这些因素，您实际上不应该使用“b”或“i”标签来直观地影响内容的显示方式。请改用跨度......

HTML标签之间的本质区别是什么？

9 个答案: