其他 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> 元素,展示 Mahatma Gandhi 的名言佳句。有許多引人入勝的引言,能夠提供令人難忘的內容與意義。回想一些最喜歡的勵志人物及其名言。

如要使用引號及參照來源的資訊,請使用 <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> 元素的實際運作情形。在這個範例中,<figure> 可與 <figcaption> 元素搭配使用,改善視覺體驗。

隨時都能在網路上查看圖片,以及其他實用的視覺化資料。視覺元素有助於吸引訪客的注意力,並創造良好的使用者體驗。<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 新增。在上述範例中,您會看到標題為「Wikipedia」的 Wikipedia 網址。

<iframe> 元素可讓您插入其他來源的內容,並在網頁中嵌入頁框。系統會建立一個矩形的矩形頁框,並在瀏覽器中顯示內容。頁框可讓您在 <iframe> 元素中呈現視窗形狀的版面配置。一種強大的功能可讓您在網頁中加入內容,提升瀏覽體驗。

表單元素

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

觀看較長的影片、授課或填寫大量申請內容時,在畫面顯示進度列有助於追蹤進度。<progress> 元素適用於這些類型的情境。

這項元素是以含有背景顏色的視覺列呈現。視覺列的大小和背景顏色都很長,在進度列中,您可以視需要使用 maxvalue 屬性。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 元素。請繼續保持!