HTML - 引用

HTML 引用允許您在網頁內容中包含和格式化引用的文字。HTML 提供了諸如 <blockquote>、<q>、<cite>、<address>、<bdo> 和 <abbr> 等標籤來構建和設定引用的樣式。

這些引用標籤有助於保持正確的格式和語義，增強網頁上引用內容的呈現和含義。包含引用對於準確傳達資訊以及為使用者提供井井有條的閱讀體驗至關重要。

HTML 引用元素

以下是用於在網頁上插入和顯示引用的引用元素

標籤	描述
<q>	定義簡短的內聯引用。
<blockquote>	定義塊級縮排引用。
<cite>	指定對創意作品（如書籍或文章）標題的引用。
<address>	定義聯絡資訊。
<bdo>	覆蓋文字方向。
<abbr>	定義縮寫或首字母縮寫。

短引用 (<q>)

<q>標籤用於在 HTML 中定義短（或內聯）引用，瀏覽器通常會在其周圍新增引號。

語法

定義短引用的語法為：

<q>The content to be quoted</q>

示例

以下是顯示網頁上短（或內聯）引用的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML Quotation tag</title>
</head>
<body>
   <p>DLF stands for <q>Delhi Land and Finance</q></p>
   <p>Delhi Land and Finance is one of the largest commercial real estate developer in India.</p>
</body>
</html>

示例

在下面的示例中，我們在<h1>標籤內的特定文字上使用了<q>標籤

<!DOCTYPE html>
<html>
<head>
   <title>HTML u tag</title>
</head>
<body>
   <h1>Welcome to <q> INDIA </q> Kids.</h1>
</body>
</html>

塊級引用 (<blockquote>)

<blockquote>標籤用於指示長引用。它只應包含其中的塊級元素，而不僅僅是純文字。它指定從其他來源引用的部分，並且只包含塊級元素。

我們還可以在 <blockquote> 標籤內使用 cite 屬性以 URL 形式指示引用的來源。

語法

定義塊級引用的語法為：

<blockquote>The multiple line content to be quoted </blockquote>

示例

以下是顯示網頁上塊級引用的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <p>DLF stands for Delhi Land and Finance</p>
   <blockquote>Delhi Land and Finance is one of the largest commercial real estate developers in India. It is also engaged in the business of generation of power provision of maintenance services hospitality and recreational activities life insurance and retail chain outlets. Its internal business includes the development business and rental business. The development business of the Company is involved in the sale of residential spaces select commercial offices and commercial complexes. The company has a unique business model with earnings arising from development and rentals. </blockquote>
</body>
</html>

示例

以下是使用帶 <blockquote> 標籤的“cite”屬性的示例

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoint’s official website</p>
   <blockquote cite="https://tutorialspoint.tw">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote>
</body>
</html>

引用樣式 (<blockquote>)

您可以使用 CSS 為 <blockquote> 標籤設定樣式，使其更符合您的網頁主題。

在下面的示例中，我們設定了一些 CSS 屬性，例如背景顏色、邊框、邊框寬度和字型顏色，以使其更具吸引力

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
   <style>
      blockquote {
         background-color: #006969;
         color: #fff;
         border: 1px solid #333;
         border-radius: 8px;
         font-weight: 500;
         padding: 8px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoint’s official website</p>
   <blockquote cite="https://tutorialspoint.tw">Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.</blockquote>
</body>
</html>

引用引用 (<cite>)

<cite>標籤用於在內容中引用創意作品（如書籍、電影或歌曲）的標題。它為引用提供了語義含義。

示例

這是一個編碼示例：

<!DOCTYPE html>
<html>
<head>
   <title>Cite Tag Example</title>
</head>
<body>
   <p>The information is sourced from <cite>The Elements of Style</cite> by Strunk and White.</p>
</body>
</html>

在這個例子中，'<cite>' 用於指示所引用書籍的標題。

聯絡資訊 (<address>)

<address>標籤用於定義文件作者或所有者的聯絡資訊。它通常包括諸如電子郵件地址、物理地址或其他相關聯絡資訊等詳細資訊。

示例

這是一個示例：

<!DOCTYPE html>
<html>
<head>
   <title>Address Tag Example</title>
</head>
<body>
<address>
   Contact us at: <a href="mailto:info@example.com">info@example.com</a><br>
   Visit us at: 123 Main Street, Cityville
</address>
</body>
</html>

在這個例子中，'<address>' 標籤用於提供聯絡資訊，包括電子郵件連結和物理地址。

雙向覆蓋 (<bdo>)

HTML 中的 <bdo> 標籤，bdo 代表雙向覆蓋，用於覆蓋當前文字方向。它通常用於需要更改預設文字方向的情況，例如顯示從右到左的文字。

示例

這是一個示例：

<!DOCTYPE html>
<html>
<head>
   <title>Bi-Directional Override Example</title>
</head>
<body>
   <p>This text will go left to right.</p>
   <p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>

在這個例子中，'<bdo>' 標籤內的文字從右到左顯示，覆蓋了預設的從左到右的方向。

縮寫 (<abbr>)

<abbr> 標籤用於定義縮寫或首字母縮寫，即您可以為特定單詞或句子的完整形式定義可選標題。

示例

這是一個示例：

<!DOCTYPE html>
<html>
<head>
   <title>Abbreviation Tag Example</title>
</head>
<body>
   <p>Tim Berners-Lee, a British scientist, invented the <abbr title="World Wide Web">WWW</abbr> in 1989.</p>
</body>
</html>

在這個例子中，<abbr> 用於將“World Wide Web”縮寫為“WWW”，而'title' 屬性提供了縮寫的完整描述。

列印頁面