文件結構

HTML 文件包含文件類型宣告和 <html> 根元素。<html> 元素中的巢狀結構為文件標頭和文件內文。雖然受影響的訪客看不到文件標題,但網站功能十分重要。其中包含所有中繼資訊,包括搜尋引擎和社群媒體結果的資訊、瀏覽器分頁與行動版主畫面捷徑的圖示,以及內容的行為與呈現方式。在本節中,您可以瞭解到幾乎所有網頁上存在的元件 (雖然不可見)。

如果要建立 MachineLearningWorkshop.com (MLW) 網站,請先加入每個網頁應納入考量的元件:文件類型、內容的人語、字元集,以及網站或應用程式的標題或名稱。

以下提供幾個為所有網頁都應納入考量的功能。即使缺少這些元素,瀏覽器仍會轉譯內容,但納入這些元素。。

<!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>

<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,因為如此一來,即使是 您不知道的字元,也能使用一到四位元組的編碼。此外,這也是 HTML5 所需的編碼類型。

如要將字元編碼設為 UTF-8,請納入:

<meta charset="utf-8" />

您甚至可以藉由宣告 UTF-8 (不區分大小寫),在標題中加入表情符號 (但請勿使用)。

字元編碼會沿用至文件中的所有內容,包括 <style><script>。這項小型宣告意味著您可以在類別名稱和 selector API 中加入表情符號 (再次提醒)。如要使用表情符號,請務必以容易操作的方式使用表情符號,同時兼顧無障礙體驗。

文件標題

您的首頁和所有其他網頁的標題都要有不同的標題。文件標題的內容 (開頭與結尾 <title> 標記之間的文字) 會顯示在瀏覽器分頁、開啟的視窗清單、歷史記錄、搜尋結果,以及除非透過社群媒體資訊卡重新定義 <meta> 標記

<title>Machine Learning Workshop</title>

可視區域中繼資料

另外,另一個應考慮採用的中繼標記是 viewport 中繼標記,這有助於網站回應情形,無論可視區域寬度為何,都能預設顯示優質內容。雖然可視區域中繼標記自 2007 年 6 月問世,但當首款 iPhone 問世時,只有最近載明的規格說明。因為此功能可以控制檢視區的大小和縮放功能,並且防止網站內容縮小,讓 960px 的網站內容能容納 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 樣式。如要瞭解樣式,但不知道如何在 HTML 文件中納入樣式,請參閱CSS 專屬學習路徑

加入 CSS 的方式有三種:<link><style>style 屬性。

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

如要加入樣式表,建議使用 <link> 標記。連結一或多個外部樣式表,對於開發人員體驗和網站效能都有助益:您可以在同一處維護 CSS,而不是固定於任何地方,瀏覽器也可以快取外部檔案,意即不用在每次瀏覽網頁時重新下載 CSS 檔案。

語法為 <link rel="stylesheet" href="styles.css">,且 style.css 是樣式表的網址。通常會顯示 type="text/css"。不需要!如果您要納入以 CSS 以外內容編寫的樣式,就必須使用 type,但由於並不需要任何其他類型,因此不需要這個屬性。rel 屬性定義關係:在本例中為 stylesheet。如果省略這個值,系統將無法連結你的 CSS。

您很快就會發現其他幾個 rel 值,但先來看看其他包括 CSS 的其他方式。

如果想將外部樣式表的樣式設為階層式圖層,但是您無權編輯 CSS 檔案在其中加入圖層資訊的權限,可以在 <style> 中加入包含 @import 的 CSS:

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

使用 @import 將樣式表匯入文件時,可以選擇將其匯入階層式圖層,@import 陳述式必須是 <style> 或已連結的樣式表中的第一個陳述式,而不是字元集宣告。

雖然串聯圖層仍算是新元素,而且您可能無法在標頭 <style> 中找到 @import,但通常會在標頭樣式區塊中宣告自訂屬性:

<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 元素可用來在 HTML 文件和外部資源之間建立關係。其中有些資源可以下載,有些則是參考資訊。關係類型是由 rel 屬性的值定義。目前 rel 屬性有 25 個可用的值,可搭配 <link><a><area><form> 使用,其中一些值也可以全部運用。建議在標題中加入與中繼資訊相關的資料,以及在 <body> 中與效能相關的資料。

您現在會在標頭中加入另外三種類型:iconalternatecanonical。(下個單元將包含第四個類型 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 瀏覽器有兩個特殊的非標準圖示類型:apple-touch-icon (iOS 裝置) 和 mask-icon (macOS 為固定分頁)。只有在使用者將網站新增至主畫面時,系統才會套用 apple-touch-icon:您可以為不同裝置指定多個具有不同 sizes 的圖示。只有在使用者於電腦版 Safari 中固定分頁時,系統才會使用 mask-icon:圖示本身應為單色 SVG,且 color 屬性為圖示填滿所需顏色。

雖然您可以使用 <link> 為每個網頁或甚至載入網頁定義完全不同的圖片,但請勿這麼做。為求一致性和良好的使用者體驗,請使用單一圖片!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+xmlapplication/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> 底部 (而非 <head>) 新增 <script>。這是因為有兩個原因。我們想確保元素在參照這些元素的指令碼之前就存在,因為這並不是 DOMContentLoaded 事件的架構。基本上,JavaScript 不只有「會封鎖轉譯功能」render-blocking,瀏覽器會在指令碼下載後停止下載所有資產,且必須等到 JavaScript 執行完畢後才會恢復下載其他資產。因此,JavaScript 要求通常會在文件結尾處找到,而不是在標題中。

有兩個屬性可減少 JavaScript 下載及執行的封鎖性質:deferasync。如果使用 defer,系統就不會在下載期間封鎖 HTML 轉譯功能,而 JavaScript 只會在文件轉譯完畢之後才會執行。使用 async 時,系統也不會在下載期間禁止轉譯,但一旦指令碼下載完成,轉譯就會在 JavaScript 執行時暫停。

並在使用非同步與延遲時載入

如要在外部檔案中加入 MLW 的 JavaScript,您可以編寫:

<script src="js/switch.js" defer></script>

新增 defer 屬性會讓指令碼延後執行直到轉譯完成為止,以免指令碼降低效能。asyncdefer 屬性僅適用於外部指令碼。

Base

<head>. 中還有另一個元素「不常使用」,<base> 元素允許設定預設連結網址和目標。href 屬性會定義所有相對連結的基準網址。

target 屬性適用於 <base>、連結和表單,可設定這些連結應開啟的位置。預設的 _self 是開啟連結的檔案,且會和目前的文件相同。其他可用選項包括 _blank (會在新視窗中開啟每個連結)、目前內容的 _parent、目前內容的 _parent;如果開啟器不是 iframe,則可能與本身相同,但會在同一個瀏覽器分頁中彈出 _top,但從任何內容彈出,並佔滿整個分頁。

大多數開發人員會為想要在連結或表單 (而非 <base>) 本身開啟新視窗的連結或表單 (如果有的話) 新增 target 屬性。

<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 標記中加入 lang 屬性。
Add the <lang> 元素新增至 <head>
在 HTML 標記中加入 language 屬性。

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

<p>
<title>
<meta>