HTML 文件包含文件類型宣告和 <html>
根元素。<html>
元素的巢狀結構為文件標頭和文件內文。雖然視障的訪客無法檢視文件標題,但網站還是能正常運作。其中包含所有中繼資訊,包括搜尋引擎和社群媒體結果的資訊、瀏覽器分頁和行動版主畫面捷徑的圖示,以及內容的行為和呈現方式。本節將說明幾乎每個網頁上會出現的元件,雖然未顯示,但不會顯示。
如要建立 MachineLearningWorkshop.com (MLW) 網站,請先加入每個網頁都應該必備的元件:文件類型、內容的語言、字元集,以及網站或應用程式的標題或名稱。
新增至每個 HTML 文件
有幾項功能應考量到每個網頁都應考慮。如果缺少這些元素,瀏覽器仍會顯示內容,但會將其納入。。
<!DOCTYPE html>
所有 HTML 文件都是前置詞。如果是 HTML,您只需要 <!DOCTYPE html>
即可。這看起來可能像 HTML 元素,但並未。它是一種特殊的節點,稱為「doctype」DOCTYPE 會指示瀏覽器使用標準模式。如果省略這項政策,瀏覽器會使用不同的顯示模式 (稱為「相容模式」)。包含 DOCTYPE 有助於防止相容模式。
<html>
<html>
元素是 HTML 文件的根元素。這是 <head>
和 <body>
的父項,其中包含 HTML 文件內 doctype 以外的所有內容。如果省略此屬性,系統會以隱含方式顯示,但請務必將其納入,因為這是宣告文件內容語言的元素。
內容語言
在 <html>
標記中新增的 lang
語言屬性會定義文件的主要語言。lang
屬性的值是由兩或三個字母組成的 ISO 語言代碼,後面接著地區。您也可以選擇指定區域,但建議填寫地區,因為不同區域的語言可能差異甚大。舉例來說,加拿大 (fr-CA
) 與布吉納法索 (fr-BF
) 的法文截然不同。這個語言宣告可讓螢幕閱讀器、搜尋引擎和翻譯服務瞭解文件語言,
lang
屬性不限於 <html>
標記。如果網頁中的文字使用與主要文件語言不同的語言,則應使用 lang
屬性來識別文件主要語言的例外狀況。就像在標題中一樣,主體中的 lang
屬性也沒有任何視覺效果。只會加入語意,讓輔助技術和自動化服務能瞭解受影響內容的語言。
除了設定文件語言,以及使用該基礎語言的例外狀況之外,這個屬性也可在 CSS 選取器中使用。您可以使用屬性和語言選取器 [lang|="fr"]
和 :lang(fr)
指定 <span lang="fr-fr">Ceci n'est pas une pipe.</span>
。
<head>
以巢狀結構在 <html>
開頭和結尾標記之間,我們發現 <head>
和 <body>
這兩個子項:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head>
(又稱文件中繼資料標頭) 包含網站或應用程式的所有中繼資料。內文包含可見內容。本節的其餘部分將著重在 <head></head>
開頭和結尾內部所含元件。
<head>
中的必要元件
文件中繼資料 (包括文件標題、字元集、可視區域設定、說明、基準網址、樣式表連結和圖示) 位於 <head>
元素中。雖然您不一定要使用上述所有功能,但請務必一律加入字元集、標題和可視區域設定。
字元編碼
<head>
中的第一個元素應為 charset
字元編碼宣告。放在標題前,確保瀏覽器能夠顯示標題中的字元,以及文件的其他部分。
視語言代碼而定,大多數瀏覽器的預設編碼為 windows-1252
。不過,您應使用 UTF-8
,因為此程式碼啟用所有字元的 1 到 4 位元組編碼,甚至連您不知道的字元也不例外。此外,這是 HTML5 所需的編碼類型。
如要將字元編碼設為 UTF-8,請納入:
<meta charset="utf-8" />
如果聲明 UTF-8
(不區分大小寫),甚至可以在標題中加入表情符號 (但勿使用)。
文件中的所有內容都會沿用字元編碼,包括 <style>
和 <script>
。這種簡短的宣告意味著您可以在類別名稱和選取器 API 中加入表情符號 (同樣也請不要這麼做)。如果您會使用表情符號,請務必在不影響無障礙功能的情況下使用表情符號,藉此強化可用性。
文件標題
首頁和所有其他網頁,都應該有獨一無二的標題。文件標題的內容 (介於 <title>
開頭與結尾標記之間的文字) 會顯示在瀏覽器分頁、開啟的視窗清單、歷史記錄、搜尋結果。另外,除非以 <meta>
標記重新定義社群媒體資訊卡。
<title>Machine Learning Workshop</title>
可視區域中繼資料
其他必要中繼標記是 viewport 中繼標記,作用是協助網站回應速度,因此不論可視區域寬度為何,內容依預設都能清楚顯示。雖然可視區域中繼標記自 2007 年 6 月起已推出,但首款 iPhone 上市時,系統最近只記載這個規格的規格文件。由於這種方法可以控制可視區域的大小和縮放比例,以及避免網站內容縮小至 320 像素的螢幕大小,因此強烈建議使用。
<meta name="viewport" content="width=device-width" />
上述程式碼是指「將網站採用回應式設計,首先將內容寬度改為畫面寬度」。除了 width
之外,您還可以設定縮放和擴充性,但兩者預設為可存取的值。您可以選擇是否提供煽情露骨內容:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
可視區域是 Lighthouse 無障礙工具稽核的一部分;只要你的網站可以擴充且未設定大小上限,就會通過測試。
目前為止,我們的 HTML 檔案概述如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
其他 <head>
內容
<head>
還有更多功能等您發掘。其實所有中繼資料<head>
中涵蓋的大部分元素都在這裡經過介紹,同時也可儲存更多 <meta>
選項供下一章使用。
您已看到中繼字元集和文件標題,但在 <meta>
標記之外,還有許多應該加入的中繼資料。
CSS
<head>
是您加入 HTML 樣式的地方。如果您想瞭解樣式,請參閱 CSS 專屬學習路徑,但確實瞭解如何在 HTML 文件中加入樣式。
加入 CSS 的方法有三種:<link>
、<style>
和 style
屬性。
在 HTML 檔案中加入樣式的方法主要是使用 <link>
元素將 rel
屬性設為 stylesheet
的外部資源,或是直接在文件標題的開頭和結尾標記 <style>
中加入 CSS。
如果想要加入樣式表,建議使用 <link>
標記。連結一或多個外部樣式表,有助於改善開發人員體驗和網站效能:您只需要連結一處,即可集中維護 CSS,不會遭到遮蔽。此外,瀏覽器也可以快取外部檔案,也就是說,不必在每次瀏覽網頁時重新下載。
語法為 <link rel="stylesheet" href="styles.css">
,其中 Style.css 是樣式表的網址。你經常看到「type="text/css"
」。沒有必要!如要加入以 CSS 以外的文字編寫的樣式,就必須使用 type
,但由於沒有其他類型,因此就不需要使用這個屬性。rel
屬性定義了關係:本例中為 stylesheet
。如果省略這項資訊,系統就不會連結你的 CSS。
您很快就會瞭解其他 rel
值,我們先來談談其他納入 CSS 的方式。
如果您想讓外部樣式表樣式顯示在階層層中,但您無權編輯 CSS 檔案來加入圖層資訊,建議您在 <style>
中加入 CSS 及 @import
:
<style>
@import "styles.css" layer(firstLayer);
</style>
使用 @import
將樣式表匯入文件 (選用) 時,@import
陳述式必須是 <style>
或連結的樣式表 (字元集宣告除外) 中的第一個陳述式。
雖然層疊層仍是新穎的,您可能不會在頭 <style>
中找到 @import
,但系統通常會在 head 樣式區塊中宣告自訂屬性:
<style>
:root {
--theme-color: #226DAA;
}
</style>
透過 <link>
或 <style>
樣式,或兩者皆應位於標題中。只要加入文件內文,即可順利使用樣式,但基於效能考量,建議你在標題中調整樣式。這聽起來可能不太直覺,因為您可能想要先載入內容,但其實想讓瀏覽器知道內容載入時的方式。先新增樣式可避免在元素首次轉譯後才套用樣式後,發生不必要的重新繪製作業。
您還可以採用以下其中一種方式,將絕不會在文件的 <head>
中使用的樣式納入:內嵌樣式。您可能絕不會在標題中使用內嵌樣式,因為使用者代理程式的樣式表會根據預設隱藏頭部。舉例來說,如果您想不使用 JavaScript 的 CSS 編輯器來測試網頁的自訂元素,可以用 display: block
顯示標題,然後隱藏標題中的所有內容,再使用內嵌 style
屬性顯示可編輯的樣式區塊。
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
雖然您可以在 <style>
中新增內嵌樣式,但現在為 style
中的 <style>
設定樣式更加有趣。我消化一下。
<link>
元素的其他用途
link
元素可用來建立 HTML 文件和外部資源之間的關係。這些資源中除了可下載,還有一些資訊可供下載。關係類型是由 rel
屬性的值定義。目前 rel
屬性有 25 個可用值,可與 <link>
、<a>
、<area>
或 <form>
搭配使用,但能與其餘值搭配使用。建議您在標題中加入與中繼資訊相關的內容,以及在 <body>
中加入成效相關的內容。
您現在要在標頭中加入 icon
、alternate
和 canonical
等其他三種類型。(您將在下一個單元中加入第四種類型 rel="manifest"
)。
網站小圖示
透過 <link>
標記搭配 rel="icon"
屬性/值組合,即可識別用於文件的網站小圖示。網站小圖示是小型圖示,會顯示在瀏覽器分頁中,通常位於文件標題的左側。開啟過多分頁時,分頁會縮小,標題可能會完全消失,但圖示會一直顯示。大部分的網站小圖示都是公司或應用程式標誌。
如果您未宣告網站小圖示,瀏覽器會在頂層目錄 (網站的根資料夾) 中尋找名為 favicon.ico
的檔案。透過 <link>
,您可以使用其他檔案名稱和位置:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
上述程式碼表示「適合 16 像素、32 像素或 48 像素的情況使用 mlwicon.png
做為圖示」。size 屬性接受可縮放圖示的 any
值,或以空格分隔的正方形 widthXheight
值清單;其中寬度和高度值在幾何序列中為 16、32、48 或較大時,系統會省略像素單位,X 則不區分大小寫。
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Safari 瀏覽器有兩種特殊的非標準的圖示:apple-touch-icon
(適用於 iOS 裝置) 和 mask-icon
(適用於 macOS 上的固定分頁)。只有在使用者將網站新增至主畫面時,系統才會套用 apple-touch-icon
:您可以為不同裝置指定多個具有不同 sizes
的圖示。只有在使用者在電腦版 Safari 中固定分頁時,系統才會使用 mask-icon
:圖示本身應為單色可擴充向量圖形,而 color
屬性會在圖示中填入需要的顏色。
雖然您可以使用 <link>
為每個頁面定義完全不同的圖片,甚至是每次載入網頁,但不必。為了保持一致並提供良好的使用者體驗,請使用單張圖片!Twitter 使用藍色的鳥瞰圖:如果瀏覽器分頁中顯示藍色小鳥,表示您不必點選標籤即可開啟 Twitter 頁面。Google 針對各個應用程式採用的網站小圖示不盡相同,例如郵件圖示、日曆圖示等。但所有 Google 圖示都使用相同的色彩配置。再次提醒您,您明確知道開啟的分頁內容只是透過圖示執行,
網站的替代版本
我們使用 rel
屬性的 alternate
值來識別網站的翻譯或替代表示法。
假設我們已經將該網站的版本翻譯成法文和巴西葡萄牙文:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
使用 alternate
進行翻譯時,必須設定 hreflang
屬性。
替代值不僅可用於翻譯,舉例來說,將 type
屬性設為 application/rss+xml
或 application/atom+xml
時,type
屬性可以定義 RSS 動態消息的替代 URI。讓我們透過連結前往網站的 PDF 版本。
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
如果 rel
值為 alternate stylesheet
,則會定義替代樣式表,且必須設定 title
屬性為該替代樣式命名。
標準
如果您為機器學習研討會建立了多個翻譯或不同版本,搜尋引擎可能會誤以為哪個版本具有權威性。此時,請使用 rel="canonical"
識別網站或應用程式的偏好網址。
請針對所有已翻譯的網頁以及首頁,加入可指出偏好網址的標準網址:
<link rel="canonical" href="https://www.machinelearning.com" />
rel="canonical"
標準連結最常用於交叉張貼內容與出版品和網誌平台,以註明來源。如果網站聯合發布內容,則應加入原始來源的標準連結。
指令碼
<script>
標記可用於包含指令碼。預設類型為 JavaScript。如果您加入任何其他指令碼語言,請加入 MIME 類型的 type
屬性;如果是 JavaScript 模組,則請加入 type="module"
。系統只會剖析並執行 JavaScript 和 JavaScript 模組。
<script>
標記可用來封裝程式碼或下載外部檔案。在 MLW 中,沒有外部指令碼檔案,因為這是一般的說法,不需要以 JavaScript 製作功能的網站。另外,這是一個 HTML 學習路徑,不是 JavaScript 檔案。
稍後您將加入一小段 JavaScript 來製作復活節彩蛋:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
這個程式碼片段會為 ID 為 switch
的元素建立事件處理常式。透過 JavaScript,如果您不想再對某個元素進行參照,請按照下列步驟操作:這項功能尚不存在,因此暫時不會納入。新增光源切換元素時,我們會在 <body>
的底部新增 <script>
,而不是在 <head>
中。原因何在?兩個原因。由於我們無法根據 DOMContentLoaded 事件建立參照指令碼,因此想要確保在參照這些元素的指令碼之前就存在元素。最重要的是,JavaScript 不僅是轉譯封鎖,還會在指令碼下載後停止下載所有素材資源,且在 JavaScript 執行完成前,不會繼續下載其他素材資源。因此,JavaScript 要求通常會在文件的結尾出現,而不是標題。
以下兩種屬性可能會減少 JavaScript 下載和執行作業造成的阻斷:defer
和 async
。使用 defer
時,系統不會在下載期間禁止 HTML 算繪,並且只會在文件完成轉譯後才執行 JavaScript。使用 async
時,系統也不會在下載期間禁止轉譯作業,但一旦指令碼下載完畢,系統就會在執行 JavaScript 時暫停轉譯作業。
如要在外部檔案中加入 MLW 的 JavaScript,您可以編寫以下程式碼:
<script src="js/switch.js" defer></script>
新增 defer
屬性會將指令碼的執行延後到所有轉譯都完成後,以免指令碼影響效能。async
和 defer
屬性僅適用於外部指令碼。
Base
還有一個只有 <head>.
中不常使用的元素,<base>
元素可讓您設定預設的連結網址和目標。href
屬性定義所有相對連結的基準網址。
target
屬性對 <base>
有效,以及連結和表單集,可設定這些連結開啟的位置。根據預設,_self
會在與目前文件相同的結構定義中開啟已連結的檔案。其他選項包括 _blank
,這會在新視窗中開啟每個連結,以及目前內容的 _parent
。如果開啟器不是 iframe,則可能是自身,或 _top
(位於同一個瀏覽器分頁中),但會彈出任何內容以開啟整個分頁。
大部分開發人員都會將 target
屬性新增至少數 (如有) 想直接在連結或表單中開啟連結,而非使用 <base>
。
<base target="_top" href="https://machinelearningworkshop.com" />
如果我們的網站發現位於 Yummly 這類網站的 iframe 中 (包括 <base>
元素),表示使用者點選文件中的任何連結時,系統會從 iframe 中彈出連結,佔滿整個瀏覽器視窗。
此元素的其中一項缺點是,錨點連結是使用 <base>
解析。<base>
能有效將 <a href="#ref">
連結轉換為 <a target="_top" href="https://machinelearningworkshop.com#ref">
,觸發將片段附加片段的 HTTP 要求傳送至基準網址。
<base>
相關注意事項:文件只能有一個 <base>
元素,而且必須在使用任何相對網址之前,包括可能的指令碼或樣式表參照。
程式碼現在如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
HTML 註解
請注意,指令碼是包裝在角括號、破折號和三角之間。這就是對 HTML 加註的方法。在網頁上提供實際內容之前,我們會先加上註解。系統不會顯示或剖析 <!--
和 -->
之間的任何項目。HTML 註解可以放在網頁上的任何位置,包括標題或內文 (但指令碼或樣式區塊除外),您應該分別使用 JavaScript 和 CSS 註解。
你已瞭解 <head>
的基本功能,但想要瞭解更多基本概念。在接下來幾節中,我們會說明中繼標記,以及網站連結至社群媒體時顯示內容的方法。
隨堂測驗
測驗您對文件結構的相關知識。
如何識別文件語言?
language
屬性。lang
屬性。Add the <lang>
元素套用至 <head>
。選取可以加入 <head>
的元素。
<p>
<title>
<meta>