<b> 和 <strong>、<i> 和 <em> 標籤有什麼區別?


在本文中,我們將討論 <b> 和 <strong> 標籤、<i> 和 <em> 標籤之間的區別,並檢視一些使用這些標籤的示例。

<b> 和 <strong> 標籤

<b> HTML 元素用於吸引讀者注意其內容在其他方面不重要的元素。它以粗體突出顯示一段文字,使其對使用者更顯眼。這是一種樣式宣告。它不傳達任何額外的意義。

因此,如果我們只需要出於演示目的增加特定單詞、短語或段落的字型粗細,則應使用 <b> 標籤。

語法

<b> 標籤寫成 <b>/b>,粗體文字插入在開始和結束標籤之間。

<b> --bold text-- </b>

HTML <strong> 標籤強調文字,傳統上意味著瀏覽器將文字顯示為粗體。它突出了內容的重要性。它可以用來強調嚴肅性、緊迫性或重要性。它表明某些內容必須如何理解。

<strong> 標籤內的文字對搜尋引擎具有語義意義,並且以特殊的語調突出顯示。

語法

<strong> --content to be emphasized-- </strong>

這兩個標籤之間的區別在於 <b> 僅在視覺上使文字顯示為粗體,而 </strong> 標籤還提供語義強調,表示有意義的單詞或文字部分。用在另一個 </strong> 標籤內的 </strong> 標籤具有更大的權重。

造成這種區別的原因是 HTML 區分語義(有意義)和物理(視覺外觀)標籤。前者指的是各個區域的含義,後者僅定義瀏覽器中的視覺顯示。

讓我們看看這兩個標籤的使用示例。

示例

在此示例中,我們將演示 <b> 標籤在 HTML 中的使用。

<!DOCTYPE html>
<html>
  <head>
    <title> <b> tag in HTML </title>
    <style>
        div{
            background-color:honeydew;
            color:darkolivegreen;
            width:350px;
            height:70px;
            padding:20px;
            margin:20px;
            font-size:17px;
        }
    </style>
  </head>
  <body>
    <h3>An example of bold tag</h3>
    <div>
        <p>
            The text below is enclosed within the 'bold' tag<br>
            <b>I am just bold text without any significance</b>
        </p>
    </div>
  </body>
</html>

示例

在此示例中,我們將演示 <strong> 標籤在 HTML 中的使用。

<!DOCTYPE html>
<html>
  <head>
    <title> <strong> tag in HTML </title>
    <style>
        div{
            background-color:mistyrose;
            color:mediumvioletred;
            width:420px;
            height:70px;
            padding:20px;
            margin:20px;
            font-size:17px;
        }
    </style>
  </head>
  <body>
    <h3>An example of strong tag</h3>
    <div>
        <p>
            The text below is enclosed within the 'strong' tag<br>
            <strong>I am a text of strong importance, unlike plain bold text.<strong>
        </p>
    </div>
  </body>
</html>

< i > 和 < em > 標籤

在 HTML 中,<i> 標籤用於以斜體顯示內容。此標籤通常用於顯示技術術語、短語或其他語言的關鍵術語。<i> 標籤與 <b> 標籤一樣,用於演示目的。它表示文字的一部分以不同的聲音或情緒,或指示不同的文字質量。

語法

<i> --contents-- </i>

<em> 標籤表示其內容的強調。它能夠改變句子的含義。此標籤內的文字也以斜體顯示。<em> 元素可以巢狀,每個級別都表示更高的強調級別。

語法

<em> --content to be emphasized-- </em>

這兩個標籤的主要區別在於 <em> 標籤在語義上強調了一個重要的單詞或單詞部分,而 I 標籤只是偏移文字,通常以斜體樣式顯示以顯示不同的情緒或聲音。

讓我們看看描述這兩個標籤用法的示例。

示例

在此示例中,我們將演示 <i> 標籤在 HTML 中的使用。

<!DOCTYPE html>
<html>
  <head>
    <title> <i> tag in HTML </title>
    <style>
        div{
            background-color:mintcream;
            color:teal;
            width:320px;
            height:70px;
            padding:20px;
            margin:20px;
            font-size:17px;
        }
    </style>
  </head>
  <body>
    <h3>An example of i tag</h3>
    <div>
        <p>
            In French <i>Je m'appelle</i> means 'my name is'
        </p>
    </div>
  </body>
</html>

示例

在此示例中,我們將演示 <em> 標籤在 HTML 中的使用。

<!DOCTYPE html>
<html>
  <head>
    <title> <em> tag in HTML </title>
    <style>
        div{
            background-color:linen;
            color:purple;
            width:320px;
            height:50px;
            padding:20px;
            margin:20px;
            font-size:18px;
        }
    </style>
  </head>
  <body>
    <h3>An example of em tag</h3>
    <div>
        <p>
            <em>I am the emphasized part</em> of the entire text.
        </p>
    </div>
  </body>
</html>

更新於: 2023年9月12日

464 次檢視

開啟你的 職業生涯

完成課程,獲得認證

開始學習
廣告

© . All rights reserved.