HTML中的Head標籤學習

head 標籤是元素的內容。不像元素的內容可以顯示在瀏覽器中，head 的內容不會在瀏覽器中顯示，它的作用是包含一些頁面的元資料。在下面的例子中，head 的內容很少。

當然，在大型的頁面中，head 會包含很多的元資料。你可以用 developer tools 去檢視你喜歡的網頁的 head 的內容。在這裡，我們會告訴你怎麼將必須的內容包含在 head 裡，而不是將所有能夠包含在 head 裡的內容都告訴你。我們開始吧。

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

當被載入到瀏覽器中的時候，元素會出現在頁面中 —— 通常它應該在乙個頁面中只被使用一次, 它被用來標記你的頁面內容的標題（故事的標題，新聞標題或者任何適當的方式）

元素是用來表示整個html文件大致內容的元資料（不是文件的內容）。

元資料就是描述資料的資料，而html有乙個「官方的」方式來為乙個文件新增元資料（元素）。當然，其他在這篇文章中提到的東西也可以被當作元資料。有很多不同種類的元素可以被包含進你的頁面的元素, 但是現在我們還不會嘗試去解釋它們, 這只會引起混亂。我們會解釋一些你常會看到的東西，我們只會給你乙個想法。

通過指定字元編碼。

這個元素簡單的指定了文件的字元編碼（在這個文件中被允許使用的字符集）。 utf-8 是乙個通用的字符集，它包含了任何人類語言中的大部分的字元。這意味著你的web頁面可以顯示任意的語言; 所以對於你的每乙個頁面，使用這個設定是很好的!

許多元素包含了name 和 content 特性:

name 特性指定了meta 元素的型別; 說明該元素包含了什麼型別的資訊。

content 指定了實際的元資料內容。

這兩個meta 元素對於定義你的頁面的作者和提供頁面的內容描述是很有用的。讓我們看乙個例子：

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

當你在**上檢視原始碼時，你也會發現其他型別的元資料。你在**上看到的許多功能都是專有創作，旨在向某些**（如社交**）提供可使用的特定資訊。

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

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

頁面新增圖示的方式有：

將其儲存在與**的索引頁面相同的目錄中，以.ico格式儲存（大多數瀏覽器將支援更通用的格式，如.gif或.png，但使用ico格式將確保它能在如internet explorer 6一樣久遠的瀏覽器顯示）

將以下行新增到html 中以引用它：

如今還有很多其他的圖示型別可以考慮。例如，你可以在 mdn 主頁的源**中找到它：

這些注釋解釋了每個圖示的用途 - 這些元素涵蓋的東西提供乙個高解析度圖示，這些高解析度圖示當**儲存到ipad的主螢幕時使用。

不用擔心現在實現所有這些型別的圖示 - 這是乙個相當先進的功能，你將不會被要求在這個課堂上學習這個知識點。這裡的主要目的是讓你提前了解有這一樣東西以防當你瀏覽其他**的源**時不理解源**的含義。

元素經常位於文件的頭部，它有2個屬性， rel="stylesheet"，表明這是文件的樣式表，而 href,包含了樣式表檔案的路徑：

最後，值得一提的是你可以（而且確實應該）為你的站點設定語言，這個可以通過新增lang屬性到html開始標籤中來實現，如下所示：

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

你還可以將文件的分段設定為不同的語言。