HTML - 块级元素和内联元素

HTML 块级元素用于创建网页的逻辑和语义布局。它们有助于将内容组织成有意义的部分，并使浏览器、搜索引擎和网站访问者更容易理解网页不同部分的结构和含义。内联元素用于创建有用的块级元素，例如添加锚链接。

您可以使用各种标签来创建块，例如 <div>、<p>、<table> 等。

所有 HTML 元素可以分为两类

块级元素
内联元素

HTML 块级元素

块级元素从新行开始，其后的任何内容都显示在下一行。这些元素可能包含边距，以在前后添加一些空间。默认情况下，这些元素占据其父元素的全部宽度；您可以使用 CSS width 属性设置其宽度。

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>

块级元素示例

以下示例演示了块级元素。这里，我们使用了一个标题和两个由水平线分隔的段落。

<!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>

HTML 内联元素

内联元素可以出现在同一行，并且不会自行开始新行。

HTML 内联元素列表

下表列出了所有内联元素：

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>

内联元素示例

以下示例演示了内联元素。这里，我们使用内联元素 <b> 和 <i> 使段落的文本变为粗体和斜体：

<!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>

块级元素和内联元素的分组

可以使用 <div> 标签对块级元素和内联元素进行分组。<div> 标签是一个块级元素，在对各种其他 HTML 标签进行分组并将 CSS 应用于元素组方面发挥着重要作用。

示例

此示例演示了使用 div 标签对元素进行分组：

<!DOCTYPE html>
<html>
<head>
   <title>HTML div Tag</title>
</head>
<body>
   <!-- First group of tags -->
   <div style="background-color:yellow">
      <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="background-color:cyan">
      <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>

打印页面