HTML - 引用：為您的網頁內容增添深度和可信度

你好啊，有志於網頁開發的各位！今天，我們將深入HTML引用的世界。作為你們友好的鄰居電腦老師，我非常興奮能夠帶領你們進行這次旅行。相信我，這堂課結束後，你們將會像莎士比亞一樣在HTML中引用！

HTML - Quotations

HTML 引用標籤列表

在我們開始之前，讓我們快速看一下今天將會介紹的所有引用相關標籤：

現在，讓我們詳細探討這些標籤！

<q> 標籤對於短小的行內引用來說非常適合。它就像瑞士軍刀一樣的引用標籤 - 小巧但非常實用！

<p>正如莎士比亞曾經說過，<q>生存還是毀壞，這是一個問題。</q></p>

在瀏覽器中渲染時，這會顯示為：

正如莎士比亞曾經說過，"生存還是毀壞，這是一個問題。"

注意瀏覽器會自動在 <q> 標籤內的文本兩旁添加引號。這就像有一個微小而勤奮的編輯在幕後工作！

現在，如果你想要引用整個段落該怎麼辦？這就是我們的好夥伴 <blockquote> 登場的時候了。它是 <q> 的大家庭版，專門為較長的引用設計。

<blockquote>
<p>兩條路分叉在林中，我——
我選擇了較少有人走的那一條，
這讓我的人生有了不同。</p>
</blockquote>

這將會渲染為一個縮進的文本塊，非常適合突出較長的引語：

兩條路分叉在林中，我—— 我選擇了較少有人走的那一條，這讓我的人生有了不同。

專業小貼士：<blockquote> 非常適合用於網站上的推薦語。它讓引語更加突出，並賦予它更多的分量！

既然我們引用了某人的話，公平起見，我們應該給予他們信用，對嗎？這就是 <cite> 標籤的作用。它用於引用的來源。

<blockquote>
<p>唯一能做出偉大工作的方法就是喜歡你所做的事。</p>
<cite>史提夫·賈伯斯</cite>
</blockquote>

這將會顯示引語和下面的來源：

唯一能做出偉大工作的方法就是喜歡你所做的事。

— 史提夫·賈伯斯

<cite> 標籤通常會默認渲染為斜體，給它一種獨特的樣式。

儘管它的名字如此，<address> 標籤並不僅僅用於街道地址。它用於文件或文章作者的任何類型的聯繫信息。

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

這將會渲染為：

Written by John Doe. Visit us at: Example.com Box 564, Disneyland USA

請記住，<address> 通常會顯示為斜體，並且瀏覽器會在元素之前和之後添加行距。

有沒有想過要寫反方向文字？<bdo>（雙向重寫）標籤是您操縱文字方向的門票！

<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

這將會顯示為：

This text will go left to right.

.tfel ot thgir og lliw txet sihT

dir 屬性可以設置為 "ltr"（從左到右）或 "rtl"（從右到左）。它對於像阿拉伯語或希伯來語這樣從右到左書寫的語言特別有用。

最後但同樣重要的是，我們有 <abbr> 標籤。它用於表示縮寫或首字母縮略詞。

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

這將會顯示為：

The WHO was founded in 1948.

但這裡有個酷炫的部分：當你將鼠標悬停在 "WHO" 上時，你會看到完整的標題 "World Health Organization"。這就像在你的網頁上有一個秘密解碼器！

至此，各位，你們現在已經裝備了一整套HTML引用標籤的工具箱。記住，這些標籤不僅僅是關於格式化 - 它們為你的內容添加了意義和結構，使其更加可訪問和對SEO友好。

當我們結束時，我想到一句引語（看我在這裡做了什麼？）來自一個學生，他有一次告訴我，"HTML就像成年人的樂高！" 而你知道嗎？他說得對。每個標籤就像不同的樂高積木，而你則是創造驚人網頁結構的總設計師。

所以，勇往直前，引用、引用來源和縮寫到你心滿意足。並記住，在一個聰明的網頁開發者的不朽之言中：有了偉大的HTML力量，就必須承擔重大的責任！快樂編程！?

Credits: Image by storyset