HTML 块（Block-level）元素用于创建网页的逻辑和语义布局。用于创建网页的逻辑和语义布局的块元素。它们有助于将内容组织成有意义的部分，并使浏览器、搜索引擎和网站访问者更容易理解网页不同部分的结构和含义。内联元素用于制作有用的块元素，例如添加锚链接。
在 HTML 中，块由各种元素包围，例如 <div>、<p>、<table> 等。所有 HTML 元素都可以分为两类。
- 块级元素（Block-level）
- 内联元素（Inline）
块级元素（Block-level）
块级元素 显示在屏幕上，就好像它们在它们之前和之后都有换行符一样。下面列出了一些块元素。
HTML 块级元素列表
下面提到的所有元素都是块级元素，它们都以自己的新行开头，并且它们后面的任何内容都出现在下一行。
块级元素示例
在此示例中，我们将使用一些块级元素。在执行以下 HTML 代码时，它将生成一个标题和两个段落，用水平线分隔
<!DOCTYPE html>
<html>
<head>
<title>HTML块级元素</title>
</head>
<body>
<h3>HTML块级元素</h3>
<p>
这一行将出现在“标题”之后的下一行中。
</p>
<hr>
<p>
这一行将出现在“水平线”之后。
</p>
</body>
</html>
内联元素（Inline）
另一方面，内联元素可以出现在同一行中，并且不会自行启动新行。一些常见的内联元素如下：
HTML 内联元素列表
下面提到的所有元素都是 内联（inlnine） 元素，它们不是从自己的新行开始的。
内联元素示例
在下面的示例中，我们将演示一些内联元素的用法。下面的代码将生成一个粗体行和一个斜体行。
<!DOCTYPE html>
<html>
<head>
<title>HTML内联元素</title>
</head>
<body>
<h3>HTML中的内联元素</h3>
<!-- 使用 <b> 内联元素 -->
<p>此<b>段落</b>为粗体。</p>
<!-- 使用 <i> 内联元素 -->
<p>这是一个<i>斜体</i>的段落。</p>
</body>
</html>
块级元素和内联元素分组
有两种方法可以对这些元素进行分组;
- 使用 <div> 标签
- 使用 <span> 标签
使用 <div> 标签分组
<div> 标签是一个块级元素，它在对各种其他 HTML 标签进行分组和对元素组应用 CSS 方面发挥着重要作用。即使是现在，<div> 标签也可以用来创建网页布局，我们在其中定义网页的不同部分（ left、right、top等 ）。这个标签不会在块上提供任何视觉变化，但当它与 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>
