Html 简明教程
HTML - Block and Inline Elements
每个 HTML 元素都具有自己的显示值，具体取决于元素的类型。块级元素用于创建网页的逻辑和语义布局。它们有助于将内容组织成有意义的部分，并使浏览器、搜索引擎和站点访问者更容易理解网页不同部分的结构和含义。内联元素用于制作有用的块元素，例如添加锚链接。
-
Block Elements
-
Inline Elements
Block Elements
Block level elements 块级元素 会在屏幕上显示，好像它们自身前后均带有换行符一样。下面列出了一些块元素。
Example of block level Elements
在此示例中，我们将使用一些块级元素。在执行下面的 HTML 代码后，它将产生一个标题和两个由水平线分隔的段落
<!DOCTYPE html>
<html>
<head>
<title>HTML Block Level Elements</title>
</head>
<body>
<h3>HTML Block Level Elements</h3>
<p>
This line will appear in the next line
after Heading.
</p>
<hr>
<p>
This line will appear after Horizontal
Line.
</p>
</body>
</html>Inline Elements
另一方面，内联元素可以出现在同一行内，并且不会自行开始新行。一些常见的内联元素如下：
Example of Inline Elements
在以下示例中，我们将演示如何使用一些内联元素。下面的代码将生成粗体行和斜体行。
<!DOCTYPE html>
<html>
<head>
<title>HTML inline Element</title>
</head>
<body>
<h3>Inline Elements in HTML</h3>
<!-- Using <b> inline element -->
<p>This <b>paragraph</b> is bold. </p>
<!-- Using <i> inline element -->
<p>This is an <i>italic</i> paragraph.</p>
</body>
</html>Grouping using <div> Tag
<div> 标签是块级元素，在分组各种其他 HTML 标签和对元素组应用 CSS 时发挥着重要作用。即使现在 <div> 标签也可以用于创建网页布局，我们可以在其中定义网页的不同部分（左、右、上等）。此标签不会在块上提供任何视觉变化，但与 CSS 一起使用时却更有意义。
Example
以下是 * <div>* 标签的简单示例。我们将在单独的章节中学习级联样式表 (CSS)，但我们在此处使用它来展示 <div> 标签的使用 −
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style="color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style="color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Grouping using using <span> Tag
HTML * <span>* 是一个内联元素，可用于对 HTML 文档中的内联元素进行分组。此标签也不会在块上提供任何视觉变化，但与 CSS 一起使用时却更有意义。
<span> 标签和 <div> 标签之间的区别在于， <span> 标签用于内联元素，而 <div> 标签用于块级元素。