所有 HTML 元素都可以分为两类 (a) 块级元素 (b) 内联元素。
块元素
块元素总是在新行上开始，即独占一行，在它们之前和之后有一个换行符，块元素可以容纳其它块元素和内联元素。例如，<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr / >、<blockquote> 和 <address> 元素都是块级元素。它们都从自己的新行开始，并且它们后面的任何内容都出现在自己的新行上。
内联元素
和相邻的内联元素在一行。 <b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<codeno otransR、<cite>、<dfn>、<kbd> 和 <var> 元素都是内联元素。
HTML分组元素
有两个重要的标签，我们经常使用它们来对各种其他 HTML 标签进行分组（i）<div> 标签和（ii）<span> 标签
<div> 标签
这是非常重要的块级标签，它在对各种其他 HTML 标签进行分组以及在元素组上应用 CSS 方面发挥着重要作用。即使现在 <div> 标签也可用于创建网页布局，我们使用 <div> 标签定义页面的不同部分（左、右、上等）。此标记不会在块上提供任何视觉变化，但与 CSS 一起使用时具有更多含义。
示例
以下是 <div> 标记的简单示例。我们将在单独的章节中学习层叠样式表（CSS），但我们在这里使用它来展示 <div> 标签的用法 -
<!DOCTYPE html>
<html>
<head>
<title>HTML div 标签</title>
</head>
<body>
<!-- 第一个标签分组 -->
<div style = "color:red">
<h4>这是第一组</h4>
<p>以下蔬菜列表</p>
<ul>
<li>土豆</li>
<li>小白菜</li>
<li>大白菜</li>
<li>芹菜</li>
</ul>
</div>
<!-- 第二个标签分组 -->
<div style = "color:green">
<h4>这是第二组</h4>
<p>以下是水果列表</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
<li>草莓</li>
</ul>
</div>
</body>
</html><span> 标签
HTML <span> 是一个内联元素，它可用于对 HTML 文档中的内联元素进行分组。该标签也不提供块上的任何视觉变化，但与 CSS 一起使用时具有更多含义。
<span> 标签和 <div> 标签之间的区别在于 <span> 标签与内联元素一起使用而 <div> 标记与块级元素一起使用。
示例
以下是 <span> 标记的简单示例。我们将在单独的章节中学习层叠样式表（CSS），但我们在这里使用它来展示 <span> 标签的用法 -
<!DOCTYPE html>
<html>
<head>
<title>HTML span 标签</title>
</head>
<body>
<p>这是<span style = "color:red">红色</span>，这是
<span style ="color:green">绿色</span></p>
</body>
</html>