如何使用 HTML5 定義文字的一部分以不同的語氣或語調？

在本文中，我們將討論如何使用 HTML5 定義文字的一部分以不同的語氣或語調。HTML5 提供了一系列標籤，允許 Web 開發人員以更有意義的方式構建網頁內容。其中一個重要方面是能夠強調某些單詞或短語，例如使它們斜體或粗體。這有助於內容看起來更好，並使使用者更容易閱讀。

方法

我們有兩種不同的方法可以使用 HTML5 定義文字的一部分以不同的語氣或語調，包括以下內容 -

  • 使用“<i> 元素”

  • 使用“<em> 元素”

讓我們詳細瞭解每個步驟。

方法：使用“<i> 方法”

第一種方法是使用 HTML5 將文字的一部分定義為“<i>”。<i> 標籤用於定義文字的一部分以不同的語氣或語調。預設情況下，它以斜體字型呈現文字。它通常用於強調文字。

示例

以下是如何使用 HTML5 使用“<i>”定義文字的一部分以不同的語氣或語調的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Alternate Voice Example</title>
   <style>
      h1 {
         color: blue;
      }
      h2 {
         color: green;
      }
      .alternate {
         color: red;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point Articles</h1>
   <h2>Different Web Development Languages</h2>
   <ul>
      <i class="alternate">Hypertext markup language (HTML)</i>
      <li>Cascading style sheets (CSS)</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>Node.js</li>
   </ul>
</body>
</html>

方法：使用“<em> 方法”

第一種方法是使用 HTML5 將文字的一部分定義為“<em>”。<em> 標籤用於強調文字，預設情況下，它以斜體字型顯示。它類似於 <i> 標籤，但它具有語義含義，表示強調，而不僅僅是不同的語氣或語調。

示例

以下是使用 HTML5 使用“<em>”定義文字的一部分以不同的語氣或語調的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Example using the <em> tag</title>
   <style>
      h1 {
         color: green;
      }
      h2 {
         color: red;
      }
      .emphasis {
         color: blue;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point Articles</h1>
   <h2>Different Programming Languages</h2>
   <ul>
      <li><span class="emphasis">Hypertext markup language (HTML)</span></li>
      <li>Cascading style sheets (CSS)</li>
      <li>PHP</li>
      <li>JavaScript</li>
      <li>Node.js</li>
   </ul>
</body>
</html>

結論

在本文中，我們檢查了兩種不同的方法來使用 HTML5 定義文字的一部分以不同的語氣或語調。在這裡，我們使用了兩種不同的方法“<i>”和“<em>”。“<i>”標籤用於標記不同語氣或語調的文字，而“<em>”標籤用於強調文字。當您決定是否使用“<i>”或“<em>”來格式化網頁上的文字時，您應該考慮要使用文字傳達什麼資訊。您選擇哪一個取決於專案的需要以及您希望如何構建和組織內容。

更新於： 2023年7月19日

93 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告