超文本標記語言 (或稱 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>
則在 <p>
標記內開啟和關閉。<strong>
瀏覽器不會顯示標記。這些標記可用來解讀網頁內容。
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 標記語言,則可完全可擴充向量圖形 (除非包含光柵圖片)。更可自由調整樣式。請注意,對於連結至嵌入 HTML 檔案的 CSS 內嵌 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>
等。
多數替換的元素為無效元素,但並非全部。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 樣式標記」一詞,那麼這和結束有斜線的自動關閉元素就代表意義。
元素外觀
語意元素的預設外觀是由使用者代理程式樣式表設定。為了達到這個目的,多數瀏覽器會使用實際的樣式表,有些則會在程式碼中模擬。最終結果相同。雖然某些使用者代理程式樣式表的限制是由 HTML 規格所設定,但瀏覽器存在許多緯度,這表示瀏覽器之間存在一些差異。
由於標記具有語意含義,因此您選擇的元素和標記應該適用於您顯示的內容。元素的語意 (或稱 role
) 對輔助技術以及在某些情況下為搜尋引擎相當重要。HTML 的作用是建立內容結構,而非定義內容的外觀。外觀是指 CSS 的運作範圍。雖然許多會修改內容外觀的元素 (例如 <h1>
、<strong>
和 <em>
) 都有語意含義,但外觀可以且一般都會因作者樣式而變更。
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
元素、屬性和 JavaScript
Document 物件模型 (DOM) 是 HTML 文件結構和內容的資料表示法,瀏覽器剖析 HTML 時,會為每個元素和文字區段建立 JavaScript 物件。這些物件稱為「節點」,分別是元素節點和文字節點。
這裡有可定義每個 HTML 元素功能的介面。HTML DOM API 可讓您透過 DOM 存取及控制每個 HTML 元素,為 HTML 元素以及繼承自該元素的所有 HTML 類別提供介面。HTMLElement 介面代表 HTML 元素及其所有子系節點。所有其他元素都會透過繼承自該元素的介面實作該元素。每個繼承介面都有一個建構函式、方法和屬性。您可以透過沿用的 HTMLElement 屬性,存取所有全域屬性以及 input
、pointer
、transition
和 animation
事件。您可以透過個別元素的子類型 (例如 HTMLAnchorElement 和 HTMLImageElement),存取元素專屬的屬性值和方法。
隨堂測驗
測驗您對 HTML 的瞭解程度
HTML 元素可用於設定樣式。
選取替換的元素。
<img>
<p>
<ul>
<input>
請選取所有正確的敘述。