其他 HTML 元素

在先前的活動中，您已學到：

  • HTML 標記和元素的基本概念。
  • 如何建立網頁結構。
  • 語意 HTML 和最佳做法。

本文將持續累積 HTML 知識，並涵蓋其他 HTML 元素。

文字內容元素

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

這些元素支援製作文字內容，並新增結構、樣式和意義。有多個文字內容可以包含下列元素。

引用文字元素

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

這個範例說明如何使用 <blockquote> 元素，展示聖雄甘地的知名引言。有許多精采引文，可以提供令人難忘的內容與意義。回想一下您最喜歡的幾位人物，以及他們的名言。

使用引號並參照來源中的資訊時，請使用 <blockquote> 元素。<blockquote> 元素會在簡報中建立專屬的縮排和對齊方式，且同時使用開始和結束標記。如果要使用包含多行文字的較長引號，<blockquote> 特別實用。

您可以在 <blockquote> 元素中使用各種元素，例如標題、段落或清單。

<details> 元素

<details>
   <summary>Details</summary>
   Additional Information
</details>

網頁通常會有常見問題專區，以及可供使用者參考的額外資訊。包含產品資訊、旅遊行程或各種問答形式的常見問題。

<details> 元素會使用包含額外資訊的已揭露小工具。此元素包含內建的切換功能，使用者可以開啟及關閉切換按鈕。切換鈕開啟時，額外資訊內容就會展開，供使用者閱讀。而關閉切換按鈕時，使用者則看不到其他資訊內容。如要為 <details> 小工具本身命名，請使用 <summary> 元素。

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

這是 <figure> 元素的實際運作情形。您會發現，與 <figcaption> 元素搭配使用的 <figure> 可用於改善視覺體驗。

你隨時都能查看網路上的圖片，以及其他實用視覺資料。視覺元素可以吸引訪客的注意力，並提供良好的使用者體驗。您可以使用 <figure> 元素，為圖片、表格、圖表等項目加上標籤。其運作方式是建立與主要內容相關的獨立內容。

<time> 元素

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

<time> 元素同時提供含義和語意含義，可讓活動更優異的功能，例如線上預約時間、發布網誌文章的日期和時間、封存等。部分網站範例適合使用 <time> 元素，包括使用 Google 日曆、在平台發布文章，或從圖書館網站閱讀線上歷史封存內容。

<time> 元素會參照時間，而且可代表 24 小時制的時間或可依時區和位置調整的特定日期。這個元素需要開頭和結尾標記：<time> 和 </time>。您可以新增 datetime 屬性，以便系統以機器可讀取的格式讀取日期。

文件中繼資料

<title>Sarah's Favorite Food Recipes</title>

只要您輸入網站網址，就會在瀏覽器列或網頁分頁中讀取 <title> 名稱。也就是您為網頁顯示的標題名稱。這個元素相當重要，可讓搜尋引擎在搜尋結果中顯示相關網頁清單。標題長度各有不同，例如簡短扼要，或加長型和較明確的說明。

範例：您有一個想要規劃的網頁，但不記得確切的網站網址。在搜尋引擎中輸入關鍵字。搜尋引擎會協助您追蹤所需網頁，然後您可以查看搜尋結果中的 <title> 名稱。

嵌入的內容元素

除了文字內容之外，還有許多其他的內容元素可供使用。

<iframe> 元素

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

完成線上購物並按下付款選項 (例如 PayPal 或 Apple Pay) 時，這些功能通常會透過 <iframe> 加入網頁中。另外，在網路上搜尋當地商家時，也是常見的情況。在網頁上新增這些類型的使用者體驗時，可以使用 iframe。在上述範例中，您看到 iframe 中的 Wikipedia 網址名稱為「Wikipedia」，

<iframe> 元素可讓您插入其他來源的內容，並在網頁中嵌入頁框。可建立矩形頁框，並在瀏覽器中顯示內容。頁框可讓您在 <iframe> 元素中呈現視窗形狀的版面配置。是為網頁增添內容的重要方式，還能提升使用者體驗。

表單元素

<progress max="100" value="30"> 30% </progress>

當你觀看較長的影片、上課或填寫大量申請書時，可以顯示進度列，方便追蹤進度。<progress> 元素在這類情境中非常實用。

這個元素會顯示為帶有背景顏色的視覺列。視覺列可以指定大小和背景顏色。您可以視需要在進度列上使用 max 和 value 屬性。max 屬性會設定浮點數，value 屬性則會指出工作進度了多少。

影片腳本

<canvas id="canvas"></canvas>

如果想即時繪製圖片和動畫，請使用 <canvas> 元素。將 <canvas> 元素放入 HTML 網頁即可製作畫布。這個元素需要 JavaScript 程式碼，才能繪製及建立圖形。

表格內容元素

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

<table> 元素

<table> 元素會建立資料表。這是新增其他包含列和欄元素的起點。表格經常出現在網頁上，這是很實用的方法來整理及顯示資訊。使用 <table> 元素的其中一種用途，是向使用者顯示表格資訊，例如試算表可能會提供的資訊類型。

<th> 元素

<th> 元素是一組儲存格的標頭。

<tr> 元素

<tr> 元素會定義資料表中的儲存格列。即可新增特定儲存格資料。

<td> 元素

<td> 元素會建立儲存格，並新增所需內容。

結語

在本文中，您發現了其他 HTML 元素，並採用您的程式設計技能。您已進一步瞭解內容、內嵌文字、嵌入內容和表格元素。現在，您已經瞭解其他 HTML 元素了。請繼續保持！