感謝觀看 Google I/O 大會！立即觀賞隨選內容。

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

文件結構

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 屬性會定義文件的主要語言。值為 ISO 語言代碼，後面可選擇性加上地區。舉例來說，加拿大的法文是 fr-CA，布吉納法索的法文則是 fr-BF。這項宣告可協助螢幕閱讀器、搜尋引擎和翻譯服務辨識文件語言。

您可以在其他標記上使用 lang 屬性，識別文件主要語言的例外狀況。與在標題中使用時相同，內文中的 lang 屬性不會產生任何視覺效果。這項屬性會新增語意，因此輔助技術和自動化服務可以識別特定內容的語言。

除了設定文件語言和該基本語言的例外狀況，這個屬性還可用於 CSS 選取器。<span lang="fr-fr">Ceci n'est pas une pipe.</span> 可透過屬性和語言選取器指定目標 [lang|="fr"] 和 :lang(fr)。

`<head>`

在開頭和結尾 <html> 標記之間，我們找到兩個子項：<head> 和 <body>：

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> 包含網站或應用程式的中繼資料，而 <body> 則包含可見內容。本節的其餘部分將著重於 <head> 元素內巢狀結構的元件。

`<head>` 內的必要元件

文件的中繼資料 (包括文件標題、字元集、檢視區塊設定、說明、基準網址、樣式表連結和圖示) 位於 <head> 元素中。雖然您可能不需要所有這些功能，但請務必加入字元集、標題和可視區域設定。

字元編碼

<head> 中的第一個元素應為 charset 字元編碼宣告。這項設定會放在標題之前，確保瀏覽器可以算繪該標題中的字元，以及文件中其餘的所有字元。

大多數瀏覽器的預設編碼為 windows-1252，具體取決於語言代碼。不過，您應該使用 UTF-8，這項功能可對所有字元進行一到四位元組的編碼。

如要將字元編碼設為 UTF-8，請加入：

<meta charset="utf-8" />

只要宣告 UTF-8 (不區分大小寫)，你甚至可以在標題中加入表情符號。

文件中的所有內容都會沿用字元編碼，包括 <style> 和 <script>。這項小小的宣告表示您可以在類別名稱和 selectorAPI 中加入表情符號。如果使用表情符號，請務必以提升可用性但不損害無障礙功能的方式使用。

文件標題

每個網頁 (包括首頁和所有其他網頁) 都應有不重複的標題。文件標題的內容 (即開頭和結尾 <title> 標記之間的文字) 會顯示在瀏覽器分頁、開啟的視窗清單、記錄、搜尋結果中，除非使用 <meta> 標記重新定義，否則也會顯示在社群媒體資訊卡中。

<title>Machine Learning Workshop</title>

可視區域中繼資料

可視區域中繼標記是網站回應式設計的必要元素，可確保內容能順利顯示，不受可視區域寬度影響。雖然可視區域中繼標記自 2007 年就已存在，但直到最近才記錄在規格中。這項標記可控制可視區域大小和縮放比例，避免內容縮小以配合較小的螢幕。

<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> 標記以外還有許多中繼資料應一併納入。

CSS

您可以在 <head> 中加入 HTML 的樣式。如要瞭解樣式，請參閱這項 CSS 專屬學習路徑，但您必須知道如何在 HTML 文件中加入樣式。

有三種方式可加入 CSS：<link>、<style> 和 style 屬性。

在 HTML 檔案中加入樣式的主要方式有兩種：使用 <link> 元素 (rel 屬性設為 stylesheet) 納入外部資源，或在開頭和結尾 <style> 標記內，直接在文件標頭中加入 CSS。

建議使用 <link> 標記加入樣式表。連結單一或少數外部樣式表，有助於提升開發人員體驗和網站效能：您可以在一處維護 CSS，不必散布在各處，瀏覽器也能快取外部檔案，不必在每次網頁導覽時重新下載。

語法為 <link rel="stylesheet" href="styles.css">，其中 styles.css 是樣式表的檔案名稱和相對位置。您可能會看到 type="text/css" 屬性，但這是選用屬性。rel 屬性會定義關係，在本例中為 stylesheet。如果省略 rel 屬性，系統就不會連結 CSS。

您很快就會發現其他 rel 值，但首先要瞭解納入 CSS 的其他方式。

如果想讓外部樣式表樣式位於疊加層中，但無法編輯 CSS 檔案，請在 <style> 中加入 @import 的 CSS：

<style>
  @import "styles.css" layer(firstLayer);
</style>

使用 @import 將樣式表匯入文件時 (可選擇匯入至層疊層)，@import 陳述式必須是 <style> 或連結樣式表中的第一個陳述式，且位於字元集宣告之外。

雖然疊加層仍相當新穎，您可能不會在標頭 @import 中發現 <style>，但您通常會在標頭樣式區塊中看到宣告的自訂屬性：

<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> 元素。

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

link 元素用於建立 HTML 文件與外部資源之間的關係。部分資源可供下載，其他則為資訊。關係類型是由 rel 屬性的值定義。rel 屬性有 25 個可用值，可搭配 <link>、<a> 和 <area> 或 <form> 使用，其中有幾個值可搭配所有標記使用。建議將與中繼資訊相關的項目納入 head，與效能相關的項目則納入 <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 做為圖示」。「大小」屬性接受可調整大小的圖示值 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 瀏覽器有兩種特殊的非標準圖示：iOS 裝置適用的 apple-touch-icon，以及 macOS 上固定分頁適用的 mask-icon。apple-touch-icon 只會在使用者將網站新增至主畫面時套用：您可以指定多個圖示，並為不同裝置設定不同的 sizes。mask-icon 只會在使用者將分頁固定在桌面 Safari 時使用：圖示本身應為單色 SVG，而 color 屬性會以所需顏色填滿圖示。

雖然您可以使用 <link> 在每個網頁或甚至每次載入網頁時定義完全不同的圖片，但請勿這麼做。為確保一致性並提供良好的使用者體驗，請使用單一圖片。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 時，請避免在元素存在前參照該元素。由於 switch 尚未存在，我們暫時不會加入事件處理常式。

新增電燈開關元素時，我們會將 <script> 新增到 <body> 的底部，而不是 <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，則可能與 self 相同；或是 _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" href="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 總覽

中繼資料

文件結構 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

新增至每個 HTML 文件

<!DOCTYPE html>

<html>

內容語言

<head>

<head> 內的必要元件

字元編碼

文件標題

可視區域中繼資料

其他「<head>」內容

CSS

<link> 元素的其他用途

網站小圖示

網站的替代版本

標準

指令碼

Base

HTML 註解

隨堂測驗

文件結構

`<!DOCTYPE html>`

`<html>`

`<head>`

`<head>` 內的必要元件

其他「`<head>`」內容

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