超文字標記語言 (或簡稱 HTML) 是用於描述網路上文件結構的標準標記語言。HTML 包含一系列的元素和屬性,可用來標記文件的所有元件,讓文件結構有條理。
基本上,HTML 文件是節點的樹狀結構,包括 HTML 元素和文字節點。HTML 元素提供文件的語意和格式,包括建立段落、清單和表格,以及嵌入圖片和表單控制項。每個元素都可以指定多個屬性。許多元素都有內容,包括其他元素和文字。其他元素為空白,而標記和屬性則會定義其函式。
元素分為幾種類別,包括中繼資料、區段、文字、內嵌語意、表單、互動式、媒體、元件和指令碼。我們會在本系列中介紹其中大部分的內容。首先,元素是什麼?
元素
HTML 包含一系列元素,您可以用來圍繞或納入內容的不同部分,以使它出現或以特定方式出現。HTML 元素以角括號 (<
和 >
) 為標示,
我們的網頁標題是第一層標題,要使用 <h1>
標記。實際名稱「機器學習研討會」則是元素的內容。內容位於開頭與結尾標記之間。整個元素包括開頭標記、結尾標記和內容,都是元素。
結束標記與起始標記相同,但前面加上斜線。
元素和標記並不完全相同,但許多人會交替使用這些字詞。標記名稱即為括號中的內容。標記內含括號。在本例中:<h1>
。一個「元素」就是開頭和結尾標記,以及這些標記之間的所有內容,包括巢狀元素。
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
此段落元素包含其他巢狀元素。為元素建立巢狀結構時,請務必正確建立巢狀結構。HTML 標記應與開啟順序相反。在上述範例中,請注意 <em>
開始和結束的 <strong>
標記內如何開啟和關閉,以及 <strong>
在 <p>
標記中同時開啟和關閉。
瀏覽器不會顯示代碼。代碼可用來解讀網頁內容。
HTML 非常可惜,例如,如果我們省略結尾 </li>
標記,則會暗示結尾標記。
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
雖然不關閉 <li>
是合理的做法,但並不是建議做法。結尾 </ul>
為必要項目。在未排序清單的結尾標記省略的情況下,瀏覽器會嘗試判斷清單和清單項目的結尾位置,但您可能不同意此決定。
每個元素的規格會列出結尾標記是否為必要標記。「兩個標記都不可用」,就表示必須提供起始標記和結束標記。規格會列出所有必要的結尾標記。
如果先前範例中的 <em>
或 <strong>
尚未關閉,瀏覽器不一定會為您關閉元素。不關閉 <em>
只會導致內容轉譯方式可能與預期不同。如果省略 </ul>
,且下一個標記是清單父項容器的結束標記,您很幸運。另一方面,如果是開頭的 <h1>
標記,瀏覽器會假設標頭是清單的一部分,包括沿用樣式。有些省略結尾標記會造成問題較大:如果不關閉某些標記 (例如 <script>
、<style>
、<template>
、<textarea>
和 <title>
),會使後續內容中斷,如以下範例所示。
即使某些內容不小心使用斜體或縮排標題,也無法破壞商家。大部分內容在 200x300 文字區域中顯示時不會顯示樣式,因為您忘了新增 </textarea>
,或完全無法顯示,因為忘記關閉 </style>
會導致網站無法使用。
在某些情況下,即使標記中沒有相關標記,瀏覽器仍會包含元素。由於元素可以是隱含的,因此即使標記不含標記,元素仍可能存在。瀏覽器會在你的內容和表格列周圍加上 <body></body>
,甚至是在表格列附近新增 <tbody></tbody>
。雖然可以省略標記,但請勿這麼做。此外,正如先前所述,請確認這些巢狀結構是否正確。您未來將成為標記的維護者,以及負責程式碼集的其他人,都由衷感謝。
元素分為兩種:已取代和未取代。
非取代元素
上一節標記的段落、標題和清單全都不會取代。非取代的元素會包含開頭和 (有時選用) 結尾標記,且可能含有文字和其他標記做為子元素。這些包含的標記可將詞組或圖片轉換為超連結、將句子變成標題、強調字詞等等。
已取代和 void 元素
在大多數表單控制項中,系統會將取代的元素替換為圖形使用者介面 (UI) 小工具,在大多數圖片中則使用光柵或可擴充圖片檔。被物件取代時,每個物件都會有預設外觀。視物件類型和瀏覽器而定,適用的樣式會受到限制。舉例來說,大多數瀏覽器都會啟用有限的 UI 小工具和相關虛擬元素樣式。如果是光柵圖片、高度、寬度、裁剪和篩選,則可以透過 CSS 輕鬆完成,但絕無僅有。另一方面,除非包含光柵圖片,否則使用與 HTML 類似的 XML 標記語言可縮放向量圖形,但都具有完整擴充性。而且可完全樣式。請注意,如果 CSS 供應商是連結至嵌入該 SVG 的 HTML 檔案,您是否能為嵌入的 SVG 設定樣式,取決於 SVG 的設定方式。
在這個範例中,<img>
和 <input>
這兩個取代的元素會分別替換成非文字內容:圖片和圖形使用者介面物件。
<input type="range">
<img src="switch.svg" alt="light switch">
上述 HTML 的輸出內容:
被替換的元素和 void 元素常常感到困惑。Void 元素都是自行關閉的元素,以單一標記表示。這表示沒有這類 void 元素的結尾標記。您可以選擇在標記結尾加上斜線,多數使用者所發現的標記更容易閱讀。延續這個範例,我們會使用斜線自行關閉代碼:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
結尾的斜線是舊校,表示元素為自行關閉,且沒有相符的結束或結尾標記。
Void 元素不得包含文字內容或巢狀元素。Void 元素包括 <br>
、<col>
、<embed>
、<hr>
、<img>
、<input>
、<link>
、<meta>
、<source>
、<track>
和 <wbr>
等。
大部分取代的元素均為 void 元素,但並非全部。系統會替換 video
、picture
、object
和 iframe
元素,但並非無效。它們則可以包含其他元素或文字,因此都有結尾標記。
大多數的 void 元素會遭到取代;但再次強調,如同我們看到 base
、link
、param
和 meta
一樣。為什麼 void 元素無法取代任何內容,也沒有在螢幕上顯示任何內容?提供內容相關資訊!資訊是由屬性。
屬性
您可能已註意到<img>
和<input
>範例不只包含起始標記的元素類型。這些額外以空格分隔的名稱/值組合 (有時候可以是選填值) 稱為「屬性」。屬性是 HTML 的一大優勢。本系列文章會介紹數百種屬性和屬性值,不過我們稍後只會討論這幾項屬性和加入方式。
屬性可以提供元素的相關資訊。和開頭標記相同的屬性一樣,不會顯示在內容中,但可以用於定義內容在視障 (輔助技術和搜尋引擎) 使用者眼前的顯示方式。
屬性則只會顯示在開頭標記中。開頭標記一律是以元素類型為開頭。類型後面可以加上零或多個屬性,並以一或多個空格分隔。大多數的屬性名稱後面都會加上等號,並用屬性值括住屬性,並以左引號和右引號括住。
本例的錨點連結包含兩個屬性,這兩個屬性已將內容「Registration」轉換成加入內部錨定連結,當使用者點選、輕觸連結,或使用鍵盤或其他裝置啟用連結時,該屬性會捲動至目前瀏覽器分頁中的 id="register"
屬性。
屬性可定義元素的行為、連結和功能。我們會在本系列的「屬性」部分中介紹更多屬性。請注意,有些屬性屬於全域性質,也就是說,這些屬性可以顯示在任何元素的起始標記中。某些元素只會套用至多個元素,而非所有元素,有些則只會套用至單一元素。
大多數的屬性為名稱/值組合。布林值屬性若為 true、false 或與屬性名稱相同,您可以只加入屬性,不必輸入值。
<img src="switch.svg" alt="light switch" ismap />
這張圖片有三個屬性:src
、alt
和 ismap
。src
屬性是用來提供 SVG 圖片素材資源的位置。alt
屬性提供描述圖片內容的替代文字。ismap
屬性為布林值,因此不需要值。這封電子郵件只是要說明什麼是屬性。有關這些屬性的詳細說明,請參閱圖片一節。
雖然引用屬性並非一律必要,但有時是如此。如果值包含空格或特殊字元,就必須加上引號。因此,建議您一律引用。如果屬性值實際上並非加上引號,請務必在屬性之間加入一或多個空格。不過,為確保內容清晰易讀,建議使用引號和空格。
HTML 不區分大小寫,但有些屬性的值。規格中定義的值不區分大小寫。未定義為關鍵字的字串通常區分大小寫,包括 id
和 class
值。
請注意,如果 HTML 中的屬性值區分大小寫,在 CSS 和 JavaScript 的屬性選取器中使用時,屬性值會區分大小寫。
為了讓標記更容易閱讀,建議您 (但非必須) 為標記中的所有元素名稱和屬性名稱使用小寫英文字母來標記 HTML,並為所有屬性值引用。如果您聽到「XHTML 樣式標記」一詞,也就是在結尾有斜線的空白元素,這就是所謂的「XHTML 樣式標記」。
元素外觀
語意元素的預設外觀是由使用者代理程式樣式表設定。大多數的瀏覽器會使用實際樣式表來達到這個目的,有些瀏覽器則會在程式碼中模擬這類設定。最終結果相同。雖然使用者代理程式樣式表的部分限制是由 HTML 規格所設定,但瀏覽器的緯度值相當龐大,因此不同瀏覽器之間存在一些差異。
您選擇的元素以及您使用的標記應該適用於顯示內容,因為標記具有語意意義。元素的「語意」(或稱 role
) 對於輔助技術相當重要,在某些情況下甚至會影響搜尋引擎。請使用 HTML 來建立內容架構,而不是定義內容外觀。外觀是 CSS 的領域,雖然許多會改變內容外觀的元素 (例如 <h1>
、<strong>
和 <em>
) 具有語意含意,但外觀也可能因為作者樣式而改變。
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
元素、屬性和 JavaScript
文件物件模型 (DOM) 是 HTML 文件結構和內容的資料表示法。在瀏覽器剖析 HTML 時,它會為看到的每個元素和文字區段建立 JavaScript 物件。這些物件分別稱為節點,即元素節點和文字節點。
您可以定義每個 HTML 元素功能的介面。HTML DOM API 可透過 DOM 存取及控制每個 HTML 元素,並提供 HTML 元素及繼承該元素的所有 HTML 類別介面。HTMLElement 介面代表 HTML 元素及其所有子節點。其他每個元素都會透過繼承自該元素的介面實作。每個繼承介面都有建構函式、方法和屬性。透過沿用的 HTMLElement 屬性,您可以存取每個全域屬性以及 input
、pointer
、transition
和 animation
事件。您可以透過個別元素的子類型 (例如 HTMLAnchorElement 和 HTMLImageElement),存取元素專屬的屬性值和方法。
隨堂測驗
測試您對 HTML 的瞭解程度
請使用 HTML 元素設定樣式。
選取替換的元素。
<input>
<img>
<p>
<ul>
請選取所有正確敘述。