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