在先前的活動中,您已瞭解以下內容:
- 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>
元素適用於這些類型的情境。
這項元素是以含有背景顏色的視覺列呈現。視覺列的大小和背景顏色都很長,在進度列中,您可以視需要使用 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 元素。請繼續保持!