準備 Chrome 中的第三方 Cookie 終止。立即測試你的網站，確保一切運作正常。

本頁面由 Cloud Translation API 翻譯而成。

文件結構

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> 的基本功能，但想要瞭解更多基本概念。在接下來幾節中，我們會說明中繼標記，以及網站連結至社群媒體時顯示內容的方法。

隨堂測驗

測驗您對文件結構的相關知識。

如何識別文件語言？

在 HTML 標記中加入 language 屬性。

請再試一次。

在 HTML 標記中加入 lang 屬性。

答對了！

Add the <lang> 元素套用至 <head>。

請再試一次。

選取可以加入 <head> 的元素。

<p>

請再試一次。

<title>

答對了！

<meta>

答對了！

文件結構

新增至每個 HTML 文件

<!DOCTYPE html>

<html>

內容語言

<head>

<head> 中的必要元件

字元編碼

文件標題

可視區域中繼資料

其他 <head> 內容

CSS

<link> 元素的其他用途

網站小圖示

網站的替代版本

標準

指令碼

Base

HTML 註解

隨堂測驗

`<!DOCTYPE html>`

`<html>`

`<head>`

`<head>` 中的必要元件

其他 `<head>` 內容

`<link>` 元素的其他用途