HTML - 块和内联元素

每个 HTML 元素都有自己的显示值，具体取决于 elemment 的类型。用于创建网页的逻辑和语义布局的块元素。它们有助于将内容组织成有意义的部分，并使浏览器、搜索引擎和网站访问者更容易理解网页不同部分的结构和含义。内联元素用于制作有用的块元素，例如添加锚链接。

在 HTML 中，块由各种元素包围，例如 <div>、<p>、<table> 等。所有 HTML 元素都可以分为两类。

块元素
内联元素

块元素

块级元素显示在屏幕上，就好像它们在它们之前和之后都有换行符一样。下面列出了一些块元素。

HTML 块元素列表

下面提到的所有元素都是块级元素，它们都以自己的新行开头，并且它们后面的任何内容都出现在下一行。

HTML 块元素
<address>	<article>	<aside>	<blockquote>	<canvas>
<dd>	<div>	<dl>	<dt>	<fieldset>
<figcaption>	<figure>	<footer>	<form>	<h1> - <h6>
<header>	<hr>	<li>	<main>	<nav>
<noscript>	<ol>	<p>	<pre>	<section>
<table>	<tfoot>	<ul>	<video>

块级元素示例

在此示例中，我们将使用一些块级元素。在执行以下 HTML 代码时，它将生成一个标题和两个段落，用水平线分隔


<!DOCTYPE html>
<html>
<head>
<title>HTML块级元素</title>
</head>
<body>
<h3>HTML块级元素</h3>
<p>
这一行将出现在“标题”之后的下一行中。
</p>
<hr>
<p>
这一行将出现在“水平线”之后。
</p>
</body>
</html>

内联元素

另一方面，内联元素可以出现在同一行中，并且不会自行启动新行。一些常见的内联元素如下：

HTML 内联元素列表

下面提到的所有元素都是 inlnine 元素，它们不是从自己的新行开始的。

HTML 内联元素
<a>	<abbr>	<acronym>	<b>	<bdo>
<big>	<br>	<button>	<cite>	<code>
<dfn>	<em>	<i>	<img>	<input>
<kbd>	<label>	<map>	<object>	<output>
<q>	<samp>	<script>	<select>	<small>
<span>	<strong>	<sub >	<sup>	<textarea>
<time>	<tt>	<var>

内联元素示例

在下面的示例中，我们将演示一些内联元素的用法。下面的代码将生成一个粗体行和一个斜体行。


<!DOCTYPE html>
<html>
<head>
<title>HTML内联元素</title>
</head>
<body>
<h3>HTML中的内联元素</h3>
<!-- 使用 <b> 内联元素 -->
<p>此<b>段落</b>为粗体。</p>
<!-- 使用 <i> 内联元素 -->
<p>这是一个<i>斜体</i>的段落。</p>
</body>
</html>

对 HTML 块元素和内联元素进行分组

有两种方法可以对这些元素进行分组;

使用 <div> 标签
使用 <span> 标签

使用 <div> 标签进行分组

<div> 标签是一个块级元素，它在对各种其他 HTML 标签进行分组和对元素组应用 CSS 方面发挥着重要作用。即使是现在，<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>

打印本页