與程式碼顯示、引用和列表相關的標籤

本文解釋了與程式碼顯示、引用和列表相關的標籤。

這說明了如何在HTML中撰寫源代碼、引用、註釋和列表。

YouTube Video

代碼顯示相關標籤

<code> 標籤

1Inline code example: <code>let x = 10;</code>

• <code> 標籤是一個內聯元素，用於指示 HTML 文檔中的代碼或程式片段。
• 預設情況下，它以等寬字體顯示，增強了代碼的可讀性。

<pre> 標籤

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• <pre> 標籤用於在 HTML 文檔中顯示文本的原始格式。 使用此標籤可保留文本中的空格和換行符，保持其原始格式。它主要用於顯示需要保持格式的內容，例如程式碼、詩歌或文字藝術。

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• 在 <pre> 標籤中，空格會被保留，因此如果在關閉標籤之前有空格，最後會出現一個空行，如本例所示。

<samp> 標籤

1Sample system output: <samp>Error: Invalid input.</samp>

• <samp> 標籤是一個 HTML 標籤，用於表示計算機程序的輸出。 用於表示來自程序或系統的輸出或消息。

<kbd> 標籤

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• <kbd> 標籤是一個 HTML 標籤，用於表示用戶輸入。 它用於指示鍵盤輸入或命令輸入，例如快捷鍵。

<var> 標籤

1Variable example: <var>x</var> = 5;

• <var> 標籤用於表示程式或方程式中的變量。 它用於強調變量名稱或數學公式中的變量。

用於引用等的標籤

<blockquote> 標籤

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• <blockquote> 標籤用於表示長引用或來自其他來源的文本，通常以塊級別顯示。

<q> 標籤

1This is a short quote: <q>Short quote example.</q>

• <q> 標籤是一個內聯元素，用於表示短引用。 此標籤可用於將文本或句子的某一部分標記為引用。<q> 標籤中的文本通常顯示為帶引號的方式。<q> 標籤也可以嵌套使用。在此情況下，通常會對內部引用使用不同類型的引號。

<cite> 標籤

1Reference to a book: <cite>The Great Gatsby</cite>

• <cite> 標籤是一個內聯元素，用於指示引用或參考的來源。 這主要用於表明作品的來源，例如作品標題、文章、論文、網頁或書籍。

<address> 標籤

1<address>123 Main Street, Springfield, USA</address>

• <address> 標籤用於表示與文件或部分的作者或所有者相關的聯繫信息。 這個標籤通常包含電子郵件地址、電話號碼、實體地址及類似的信息。

<time> 標籤

1<time datetime="2024-12-04">December 4, 2024</time>

• <time> 標籤用於表示特定的時間點、某段時間或重複的時間。 此標籤可包含日期和時間，以為文件提供語意上的意義。

<data> 標籤

1<data value="2024">Current Year</data>

• <data> 標籤用於將人類可讀的內容與機器可解讀的值關聯起來。 此標籤對於以程式能輕鬆處理的方式標記數據非常有用。

<details> 和 <summary> 標籤

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• <details> 標籤用於創建可折疊和展開的小工具。將 <details> 標籤和 <summary> 標籤搭配使用時，可以設置一個可以點擊的區域來顯示更多細節，通常用於類似於“閱讀更多”的互動顯示。

用於顯示列表的標籤

<ul> 標籤

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• 這是一個用於創建無序列表的標籤。 列表中的每個項目都是用 <li> 標籤定義的。默認情況下，每個列表項目前會顯示一個黑點。

<ol> 標籤

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• 這個標籤用於創建有序列表。 列表中的每個項目都是用 <li> 標籤定義的。默認情況下，會顯示數字以指示項目的順序。

<dl> 標籤

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• 這個標籤用於創建由術語和定義或名稱和詳細信息組成的配對列表。 列表項目是用 <dt> 和 <dd> 標籤定義的。術語或名稱寫在 <dt> 標籤中，定義或解釋寫在 <dd> 標籤中。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video