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>

列印頁面