網頁元資料（head 部分有什麼？）
HTML 文件的head部分在頁面載入時不會顯示在 Web 瀏覽器中。它包含元資料資訊，例如頁面<title>、CSS連結（如果你選擇使用 CSS 樣式化 HTML 內容）、自定義網站圖示連結以及其他元資料（關於 HTML 的資料，例如作者和描述文件的重要關鍵詞）。
Web 瀏覽器使用head中包含的資訊來正確渲染 HTML 文件。在本文中，我們將涵蓋上述所有內容以及更多內容，以便為您使用標記提供一個良好的基礎。
| 預備知識 | 熟悉基本的 HTML 知識，如前一課所述。 |
|---|---|
| 學習成果 |
|
HTML 的 head 部分是什麼？
讓我們回顧一下上一篇文章中介紹的簡單 HTML 文件。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
HTML head 部分是<head>元素的內容。與<body>元素的內容（在瀏覽器中載入時顯示在頁面上）不同，head 的內容不會顯示在頁面上。相反，head 的作用是包含文件的元資料。在上面的例子中，head 相當小。
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
然而，在大型頁面中，head 部分可能會變得相當大。嘗試訪問一些你喜歡的網站，並使用開發者工具檢視它們的 head 內容。我們的目標不是向你展示如何使用 head 中可能包含的所有內容，而是教你如何使用你想要包含在 head 中的主要元素，並讓你熟悉它們。讓我們開始吧。
新增標題
我們已經看到了<title>元素的實際作用——它可以用來為文件新增標題。然而，這可能會與h1元素混淆，h1 元素用於為你的正文內容新增一個頂級標題——這有時也被稱為頁面標題。但它們是不同的東西！
檢查示例
-
在此練習中，我們希望你首先訪問我們的 GitHub 倉庫並下載title-example.html 頁面的副本。為此，你可以選擇以下方式：
- 複製並貼上頁面中的程式碼到你的程式碼編輯器中的一個新文字檔案，然後將其儲存到合適的位置。
- 點選 GitHub 頁面上的“Raw”按鈕，這將顯示原始程式碼（可能在一個新的瀏覽器標籤頁中）。接下來，選擇你的瀏覽器的“另存為…”選單，並選擇一個合適的位置來儲存檔案。
-
現在在你的瀏覽器中開啟該檔案。你應該會看到類似這樣的內容：
現在應該很清楚
<h1>內容在哪裡顯示，<title>內容在哪裡顯示了！ -
你還應該嘗試在程式碼編輯器中開啟程式碼，編輯這些元素的內容，然後在瀏覽器中重新整理頁面。好好玩一玩。
<title>元素的內容也以其他方式使用。例如，如果你嘗試收藏該頁面（“書籤”>“收藏此頁”或 Firefox URL 欄中的星形圖示），你將看到<title>內容作為建議的書籤名稱填充。
<title>內容也用於搜尋結果中，如下所示。
元資料：<meta>元素
元資料是描述資料的資料，HTML 有一種“官方”方式將元資料新增到文件中——<meta>元素。當然，我們在本文中討論的其他內容也可以被認為是元資料。你的頁面<head>中可以包含許多不同型別的<meta>元素，但我們目前不會嘗試全部解釋，因為那會變得太令人困惑。相反，我們將解釋一些你可能會經常看到的內容，只是為了給你一個概念。
指定文件的字元編碼
在我們上面看到的例子中，包含了這一行：
<meta charset="utf-8" />
此元素指定了文件的字元編碼——文件允許使用的字元集。utf-8是一個通用字元集，包含了幾乎所有人類語言的字元。這意味著你的網頁將能夠處理顯示任何語言；因此，在你建立的每個網頁上都設定這個是一個好主意！例如，你的頁面可以很好地處理英語和日語：
例如，如果你將字元編碼設定為ISO-8859-1（拉丁字母的字元集），你的頁面渲染可能會出現混亂：
注意：某些瀏覽器（如 Chrome）會自動修復不正確的編碼，因此根據你使用的瀏覽器，你可能不會看到此問題。無論如何，你都應該在頁面上設定utf-8編碼，以避免在其他瀏覽器中出現任何潛在問題。
字元編碼實驗
為了嘗試這個，請重新訪問你在上一節關於<title>中獲得的簡單 HTML 模板（title-example.html 頁面），嘗試將 meta charset 值更改為ISO-8859-1，並將日語新增到你的頁面。這是我們使用的程式碼：
<p>Japanese example: ご飯が熱い。</p>
新增作者和描述
許多<meta>元素包含name和content屬性：
name指定了 meta 元素的型別；它包含什麼型別的資訊。content指定實際的元內容。
你的頁面上包含的兩個有用的 meta 元素是定義頁面作者和提供頁面簡潔描述的元素。我們來看一個例子：
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing websites and applications." />
指定作者在很多方面都有好處：如果你對內容有任何疑問並希望聯絡作者，能夠了解是誰撰寫了頁面是很有用的。一些內容管理系統具有自動提取頁面作者資訊並將其用於此類目的的功能。
指定包含與你的頁面內容相關的關鍵詞的描述很有用，因為它有可能使你的頁面在搜尋引擎中執行的相關搜尋中排名更高（此類活動被稱為搜尋引擎最佳化，或SEO）。
探索描述在搜尋引擎中的應用
描述也用於搜尋引擎結果頁面。我們來做一個練習來探討一下：
-
檢視頁面原始碼（右鍵單擊頁面，從上下文選單中選擇“檢視頁面原始碼”）。
-
找到描述元標籤。它看起來會像這樣（儘管它可能會隨時間變化）：
html<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both websites and progressive web apps." /> -
現在在您最喜歡的搜尋引擎中搜索“MDN Web Docs”（我們使用的是 Google）。您會注意到搜尋結果中使用了描述
<meta>和<title>元素內容——絕對值得擁有！
注意：在 Google 中，你會在主頁連結下方看到一些相關的 MDN Web Docs 子頁面——這些被稱為站點連結，並且可以在Google 的站長工具中配置——這是一種在 Google 搜尋引擎中改善你的網站搜尋結果的方法。
注意：許多<meta>功能現在已不再使用。例如，關鍵詞<meta>元素 (<meta name="keywords" content="fill, in, your, keywords, here">)——它應該為搜尋引擎提供關鍵詞，以確定該頁面與不同搜尋詞的相關性——已被搜尋引擎忽略，因為垃圾郵件傳送者只是用數百個關鍵詞填充關鍵詞列表，從而影響了搜尋結果。
其他型別的元資料
在網上瀏覽時，你還會發現其他型別的元資料。你在網站上看到的許多功能都是專有建立的，旨在為某些網站（例如社交網路網站）提供他們可以使用的特定資訊。
例如，Open Graph Data是 Facebook 發明的一種元資料協議，旨在為網站提供更豐富的元資料。在 MDN Web Docs 的原始碼中，你會發現：
<meta
property="og:image"
content="https://mdn.club.tw/mdn-social-share.png" />
<meta
property="og:description"
content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both websites
and HTML Apps." />
<meta property="og:title" content="Mozilla Developer Network" />
這樣做的一個效果是，當你在 Facebook 上鍊接到 MDN Web Docs 時，連結會與圖片和描述一起顯示：為使用者帶來更豐富的體驗。
為你的網站新增自定義圖示
為了進一步豐富你的網站設計，你可以在元資料中新增對自定義圖示的引用，這些圖示將在特定上下文中顯示。其中最常用的是 favicon（“收藏夾圖示”的縮寫，指其在瀏覽器“收藏夾”或“書籤”列表中的使用）。
不起眼的 favicon 已經存在多年了。它是這種型別圖示中的第一個：一個 16 畫素的方形圖示，用於多個位置。你可能會看到（取決於瀏覽器）在包含每個開啟頁面的瀏覽器選項卡中以及書籤面板中的書籤頁面旁邊顯示 favicon。
可以透過以下方式將 favicon 新增到你的頁面：
-
將其儲存到與站點索引頁相同的目錄中，以
.ico格式儲存（大多數也支援更常見的格式如.gif或.png的 favicon）。 -
在你的 HTML 的
<head>塊中新增以下行來引用它：html<link rel="icon" href="favicon.ico" type="image/x-icon" />
這是一個書籤面板中 favicon 的示例：
您可能還需要針對不同環境使用不同的圖示。例如，您會在 MDN Web Docs 主頁的原始碼中找到這些內容：
<link rel="icon" href="/favicon-48x48.[some hex hash].png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.[some hex hash].png" />
這是一種讓網站在儲存到 Apple 裝置主螢幕時顯示圖示的方法。你甚至可能希望為不同的裝置提供不同的圖示，以確保圖示在所有裝置上都看起來不錯。例如：
<!-- iPad Pro with high-resolution Retina display: -->
<link
rel="apple-touch-icon"
sizes="167x167"
href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
rel="apple-touch-icon"
sizes="152x152"
href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />
註釋解釋了每個圖示的用途——這些元素涵蓋了例如在網站儲存到 iPad 主螢幕時提供一個漂亮的高解析度圖示等內容。
現在不用太擔心實現所有這些型別的圖示——這是一個相當高階的功能，你不會被要求掌握這些知識才能繼續課程。這裡的主要目的是讓你瞭解這些東西是什麼，以防你在瀏覽其他網站的原始碼時遇到它們。如果你確實想了解更多關於所有這些值以及如何選擇它們的資訊，請閱讀<link>元素的參考頁面。
注意：如果您的網站使用內容安全策略 (CSP) 來增強其安全性，則該策略適用於網站圖示。如果您遇到網站圖示無法載入的問題，請驗證Content-Security-Policy標頭的img-src指令沒有阻止對其的訪問。
將 CSS 和 JavaScript 應用於 HTML
如今，幾乎所有你將使用的網站都會使用CSS使其看起來很酷，並使用JavaScript來提供互動式功能，例如影片播放器、地圖、遊戲等等。這些通常透過<link>元素和<script>元素分別應用於網頁。
-
<link>元素應始終放在文件的 head 部分。它有兩個屬性，rel="stylesheet"表示它是文件的樣式表，href包含樣式表文件的路徑：html<link rel="stylesheet" href="my-css-file.css" /> -
<script>元素也應該放在 head 部分，並且應該包含一個src屬性，其中包含你想要載入的 JavaScript 的路徑，以及defer（一個布林屬性），它指示瀏覽器在頁面完成解析 HTML 後加載 JavaScript。defer屬性很有用，因為它保證在 JavaScript 執行之前所有 HTML 都已載入，這樣你就不會因為 JavaScript 嘗試訪問頁面上尚不存在的 HTML 元素而出現錯誤。在你的頁面上載入 JavaScript 有幾種方法，但這是現代瀏覽器最可靠的一種。html<script src="my-js-file.js" defer></script>注意：
<script>元素可能看起來像一個空元素，但它不是，因此需要一個結束標籤。除了指向外部指令碼檔案之外，你還可以選擇將指令碼放在<script>元素內部。
輪到你了：將 CSS 和 JavaScript 應用到頁面
- 要開始此練習，請獲取我們的meta-example.html、script.js和style.css檔案的副本，並將它們儲存到本地計算機的同一目錄中。確保它們以正確的名稱和副檔名儲存。
- 在瀏覽器和文字編輯器中開啟 HTML 檔案。
- 按照上面給出的資訊，將
<link>和<script>元素新增到您的 HTML 中，以便您的 CSS 和 JavaScript 應用到您的 HTML。
如果操作正確，當你儲存 HTML 並重新整理瀏覽器時，你應該能看到一些變化：
- JavaScript 在頁面上添加了一個空列表。現在，當你點選列表外的任何位置時，會彈出一個對話方塊，要求你為新列表項輸入一些文字。當你按下“確定”按鈕時，一個新的列表項將新增到列表中，其中包含你輸入的文字。當你點選一個現有的列表項時，會彈出一個對話方塊，允許你更改該列表項的文字。
- CSS 使背景變為綠色，文字變大。它還對 JavaScript 新增到頁面的一些內容進行了樣式設定（帶有黑色邊框的紅色條是 CSS 新增到 JS 生成列表的樣式）。
注意：如果您在此練習中遇到困難，無法應用 CSS/JS，請嘗試檢視我們的css-and-js.html示例頁面。
設定文件的主要語言
最後，值得一提的是，你可以（也確實應該）設定頁面的語言。這可以透過將lang 屬性新增到 HTML 開放標籤中來完成（如meta-example.html所示，以及下方所示）。
<html lang="en-US">
…
</html>
這在許多方面都很有用。如果設定了 HTML 文件的語言，搜尋引擎會更有效地對其進行索引（例如，允許它在特定語言的結果中正確顯示），並且對於使用螢幕閱讀器的視力障礙者也很有用（例如，單詞“six”在法語和英語中都存在，但發音不同）。
您還可以將文件的子部分識別為不同的語言。例如，我們可以將日語部分識別為日語，如下所示：
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
這些程式碼由ISO 639-1標準定義。您可以在HTML 和 XML 中的語言標籤中找到更多資訊。
總結
這標誌著我們對 HTML head 的快速瀏覽結束了——這裡還有很多你可以做的事情，但在這個階段，詳盡的介紹會很無聊和令人困惑，我們只想讓你現在瞭解最常見的一些內容！在下一篇文章中，我們將探討HTML 中的標題和段落。