<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>
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP