Web - 第三章 | HTML Head

在HTML檔案中，head的部分是不會顯示在瀏覽器頁面上的。其中包含了像是頁面標題<title>，指向CSS的鏈接(如果要使用CSS設置HTML內容的樣式)，指向自定義favicons的鏈接以及其他元資料(有關HTML的資料，例如誰編寫它，以及描述文件的重要關鍵字)。

什麼是 HTML head?

簡單回顧一下上一章提到的HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
  <h1>Test page</h1>
  <p>This is my <strong>page</strong></p>
  <a href="https://www.google.com.tw/" target="_blank">Google</a>
  </body>
</html>

HTML頭部是包含在<head>元素裡面的內容。不是<body>元素的內容可以顯示在瀏覽器中，元素head裡面的內容不會在瀏覽器中顯示，它的作用是包含一些頁面的元資料。

一個簡單的Head內容：

<head>
  <meta charset="utf-8">
  <title>My test page</title>
</head>

在大型的頁面中，head 會包含很多的元資料。你可以用 developer tools 去查看你喜歡的網頁的 head 的內容。

加入標題 (title)

我們之前已經看到了 <title>，它可以用來給 html 文件添加一個標題。你可能會將它和給 body 添加標題的 <h1> 元素混淆，有些時候 h1 也會被稱作網頁標題。但是它們是不同的。

當被加載到瀏覽器中的時候，元素<h1> 會出現在頁面中—— 通常它應該在一個頁面中只被使用一次，它被用來標記你的頁面內容的標題(故事的標題，新聞標題或者任何適當的方式)。
元素 <title> 是用來表示整個HTML文件大致內容的元資料(不是文件的內容)。

自己動手試試看

複製下面的HTML範例。
開啟一個新的text檔案(文字文件)。
將剛複製的HTML範例貼到新開的text檔案裡。
將檔案存為 index.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>&lt;title&gt; element</title>
  </head>
  <body>
    <h1>&lt;h1&gt; element</h1>
  </body>
</html>

使用瀏覽器打開index.html，可以看到title和h1的顯示位置不一樣。

將該網站加入我的最愛，預設的名稱也可以看到是帶入title的名稱為建議的名稱。

Metadata: <meta> 元素

元資料就是描述資料的資料，而HTML有一個“官方的”方式來為一個文件添加元資料—— <meta> 元素。當然，其他在這篇文章中提到的東西也可以被當作元資料。有很多不同種類的 <meta> 元素可以被包含進你的頁面的<head>元素，但是現在我們還不會嘗試去解釋所有類型，這只會引起混亂。

指定文件字元編碼

1	<meta charset="utf-8">

這個元素簡單的指定了文件的字符編碼 —— 在這個文件中被允許使用的字符集。 utf-8 是一個通用的字符集，它包含了任何人類語言中的大部分的字符。這意味著你的web頁面可以顯示任意的語言；所以對於你的每一個頁面，使用這個設置是很好的！比如說，你的頁面可以很好的處理英語和日語。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>&lt;Meta&gt; examples</title>
  </head>
  <body>
    <h1>&lt;Meta&gt; examples</h1>
    <p>This is Japanese example: にっぽんご/にほん</p>
  </body>
</html>

將你的字符集設置為 ISO-8859-1 (拉丁字母的字符集)，那麼你的頁面會是亂碼的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <title>&lt;Meta&gt; examples</title>
  </head>
  <body>
    <h1>&lt;Meta&gt; examples</h1>
    <p>This is Japanese example: にっぽんご/にほん</p>
  </body>
</html>

添加作者和描述

許多<meta> 元素包含了name 和 content 特性：

name 指定了meta 元素的類型；說明該元素包含了什麼類型的訊息。
content 指定了實際的元資料內容。
這兩個meta 元素對於定義你的頁面的作者和提供頁面的內容描述是很有用的。

1 2	<meta name="author" content="J.J.Huang"> <meta name="description" content="This is J.J.'s BLogs, 技術筆記">

指定作者在某些情況下是很有用的：如果你需要聯繫頁面的作者，問一些關於頁面內容的問題。一些內容管理系統能夠自動獲取頁面作者的訊息，然後用於某種目的。

指定包含關於頁面內容的關鍵字的頁面內容的描述是很有用的，因為它可能或讓你的頁面在搜索引擎的相關的搜索出現得更多。

自己動手看看

可以嘗試使用搜尋引擎搜尋“J.J.’s Blogs”，並且打開網站檢視原始碼。

1
2
3

<meta name="description" content="技術筆記">
  
<meta name="author" content="J.J. Huang">

注意：許多 <meta> 特性已經不再使用。例如，keyword <meta> 元素（<meta name=”keywords” content=”fill, in, your, keywords, here”>）— 提供關鍵詞給搜索引擎，根據不同的搜索詞，查找到相關的網站—被搜索引擎忽略了，因為作弊者填充了大量關鍵詞到keyword，錯誤地引導搜索結果。

其他類型的 metadata

在網站上查看源碼時，你也會發現其他類型的元資料。你在網站上看到的許多功能都是專有創作，旨在向某些網站(如社交網站)提供可使用的特定訊息。

例如，Facebook 編寫的元資料協議 Open Graph Data 為網站提供了更豐富的元資料。
這邊依 MDN為範例的源代碼。

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

效果就是，當你在 Facebook 上鍊接到 MDN 時，該鏈接將顯示一個圖像和描述：這為用戶提供更豐富的體驗。

加入屬於自己的網頁icon

為了進一步豐富你的網站設計，你可以在元資料中添加對自定義圖標的引用，這些將在特定的場合中顯示。

這個不起眼的圖標已經存在很多很多年了，16 x 16 像素是這種圖標的第一種類型。你可以看見這些圖標出現在瀏覽器每一個打開的頁面中的標籤頁中中以及在書籤面板中的書籤頁面中。

添加方式：

將其保存在與網站的索引頁面相同的目錄中，以.ico格式保存 (大多數瀏覽器將支持更通用的格式，如.gif或.png，但使用ICO格式將確保它能在如Internet Explorer 6一樣久遠的瀏覽器顯示)

將以下行添加到HTML <head>中以引用它

1	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

使用瀏覽器在各種場合使用favicons，如打開的頁面標籤頁和書籤面板中的書籤頁面。

在HTML中加入CSS和JavaScript

如今，幾乎你使用的所有網站都會使用 CSS 讓網頁更加炫酷，使用JavaScript讓網頁有交互功能，比如視頻播放器，地圖，遊戲以及更多功能。這些應用在網頁中很常見，它們分別使用 <link>元素以及 <script> 元素。

<link> 元素經常位於文件的頭部。這個link元素有2個屬性，rel=”stylesheet”表明這是文件的樣式表，而 href包含了樣式表文件的路徑。

1	<link rel="stylesheet" href="my-css-file.css">

<script> 部分沒必要非要放在文件頭部；實際上，把它放在文件的尾部(在</body>標籤之前)是一個更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經解析了HTML內容(如果腳本加載某個不存在的元素，瀏覽器會報錯)。

1	<script src="my-js-file.js"></script>

注意： <script>元素看起來像一個空元素，但它並不是，因此需要一個結束標記。你還可以選擇將腳本放入<script>元素中，而不是指向外部腳本文件。

自己動手看看

建立一個目錄
複製下面的index.htnl範例。
開啟一個新的text檔案(文字文件)。
將剛複製的HTML範例貼到新開的text檔案裡。
將檔案存為 index.html。
複製下面的script.js範例。
開啟一個新的text檔案(文字文件)。
將剛複製的HTML範例貼到新開的text檔案裡。
將檔案存為 script.js。
複製下面的style.css範例。
開啟一個新的text檔案(文字文件)。
將剛複製的HTML範例貼到新開的text檔案裡。
將檔案存為 style.css。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="J.J.Huang">
    <meta name="description" content="技術分享">
    <link rel="stylesheet" href="style.css">
    <title>&lt;Meta&gt; examples</title>
  </head>
  <body>
    <h1>&lt;Meta&gt; examples</h1>
    <p>This is Japanese example: にっぽんご/にほん</p>
  </body>
  <script src="script.js"></script>
</html>

script.js

var list = document.createElement('ul');
var info = document.createElement('p');
var html = document.querySelector('html');

info.textContent = '以下是動態列表。單擊列表外的任何位置以添加新的列表項。單擊現有列表項以將其文本更改為其他內容。';

document.body.appendChild(info);
document.body.appendChild(list);

html.onclick = function() {
  var listItem = document.createElement('li');
  var listContent = prompt('你希望列表項有什麼內容？');
  listItem.textContent = listContent;
  list.appendChild(listItem);

  listItem.onclick = function(e) {
    e.stopPropagation();
    var listContent = prompt('輸入列表項的新內容');
    this.textContent = listContent;
  }
}

style.css

html {
  background-color: green;
  font-size: 20px;
}

ul {
  background: red;
  padding: 10px;
  border: 1px solid black;
}

li {
  margin-left: 20px;
}

效果

網頁顏色的變化，是透過style.css去做的改變。
網頁互動的部分，是透過script.js去做的事件。

的JavaScript在頁面中添加了一個空列表。現在當你點擊列表中的任何地方，瀏覽器會彈出一個對話框要求你為新列表項輸入一些文本內容。當你點擊OK按鈕，剛剛那個新的列表項會添加到頁面上，當你點擊那些已有的列表項，會彈出一個對話框允許你修改列表項的文本。
CSS使頁面背景變成了綠色，文本變得大了一點。它還將JavaScript的添加到頁面中的一些內容進行了樣式化，(帶有黑色邊框的紅色條是CSS添加到JS生成的列表中的樣式。)

預設文件語言

最後，值得一提的是你可以（而且確實應該）為你的站點設定語言，這個可以通過添加lang屬性到HTML開始標籤中來實現。

1	<html lang="en-US">

這在很多方面都很有用。如果你的HTML文件的語言設置好了，那麼你的HTML文件就會被搜索引擎更有效地索引(例如，允許它在特定於語言的結果中正確顯示)，對於那些使用屏幕閱讀器的視障人士也很有用(比如，法語和英語中都有“six”這個單詞，但是發音卻完全不同)。

你還可以將文件的分段設置為不同的語言。例如，我們可以把日語部分設置為日語。

1	<p>Japanese example: <span lang="jp">にっぽんご/にほん</span>.</p>

這些codes是根據ISO 639-1標准定義的。你可以在Language tags in HTML and XML找到更多相關的。

這邊我們主要學習的是HTML Head的部分，當然不只有這些內容，但是講解太多會覺得無聊或是產生困惑，所以這邊僅參考文章做出簡單的介紹。

註：以上參考了
MDN web docs 的 Getting started with HTML 文章。

Web - 第二章 | HTML介紹 (二)

Web - 第四章 | HTML 文字基礎概念

↑
If you enjoy the article, please feel free to donate~ Thx.
若本文對您有幫助，您也願意支持打賞，謝謝您的鼓勵。

本文由J.J. Huang 創作，採用CC BY 3.0 TW協議進行許可。可自由轉載、引用，但需署名作者且註明文章出處。

J.J.'s Blogs

J.J. Huang 2019-05-12 Web 瀏覽次數：次 {{moment(1557666000000).fromNow()}}

Web - 第三章 | HTML Head

什麼是 HTML head?

加入標題 (title)

自己動手試試看

Metadata: <meta> 元素

指定文件字元編碼

添加作者和描述

自己動手看看

其他類型的 metadata

加入屬於自己的網頁icon

在HTML中加入CSS和JavaScript

自己動手看看

效果

預設文件語言