head中有什么? HTML中的元數(shù)據(jù)
當頁面加載完成的時候，標簽head里的內容，是不會在頁面中呈現(xiàn)出來的。它包含了像頁面的<title>（標題），引入CSS（如果你想用CSS來美化頁面內容），圖標和其他的元數(shù)據(jù)（比如 作者，關鍵詞，摘要）。在本文中，我們將覆蓋所有上述的事情，為您提供一個良好的基礎，在head標簽中，處理標記和其他代碼。
| 前提： | 基本熟悉HTML，可以從 HTML入門了解。 |
|---|---|
| 目的： | 學習head標簽，它的目的是什么，包含哪些元素以及它對頁面有什么影響。 |
什么是Head標簽？
讓我們簡單的回顧下上一章提到的HTML：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body></html>
head 標簽是 <head> 元素的內容。不像 <body> 元素的內容可以顯示在瀏覽器中，head 的內容不會在瀏覽器中顯示，它的作用是包含一些頁面的元數(shù)據(jù)。在下面的例子中，head 的內容很少。
<head> <meta charset="utf-8"> <title>My test page</title></head>
當然，在大型的頁面中，head 會包含很多的元數(shù)據(jù)。你可以用 developer tools 去查看你喜歡的網(wǎng)頁的 head 的內容。在這里，我們會告訴你怎么將必須的內容包含在 head 里，而不是將所有能夠包含在 head 里的內容都告訴你。讓我們開始吧。
添加一個標題
我們之前已經(jīng)看到<title>，它可以用來給 html 文檔添加一個標題。你可能會將它和給 body 添加標題的<h1>元素混淆，有些時候 h1 也會被稱作網(wǎng)頁標題。但是它們是不同的。
- 當被加載到瀏覽器中的時候，元素 <h1> 會出現(xiàn)在頁面中——通常它應該在一個頁面中只被使用一次, 它被用來標記你的頁面內容的標題（故事的標題，新聞標題或者任何適當?shù)姆绞剑?/span>
- 元素 <title> 是用來表示整個HTML文檔大致內容的元數(shù)據(jù)（不是文檔的內容）。
主動學習：檢查一個簡單的例子
- 使用你的代碼編輯器，從頁面中拷貝粘貼代碼到一個新的文本文件中，然后將其保存到一個適當?shù)牡胤健?/span>
- 按下頁面中的 "Raw" 按鈕, 從瀏覽器的菜單中選擇 File > Save Page As... ，然后選擇一個地方來保存這個文件。
現(xiàn)在很明顯的可以看到 <h1> 出現(xiàn)的地方，和 <title> 出現(xiàn)的地方！
3.你應該嘗試著在你的代碼編輯器中打開這些代碼，編輯這些元素的內容，然后在你的瀏覽器中刷新頁面。祝你玩得開心。
元素 <title> 也被以其他的方式使用著。比如說，如果你嘗試為某個頁面添加書簽，（Bookmarks > Bookmark This Page, 在火狐瀏覽器中），你會看到 <title> 的內容被作為建議的書簽名。
元素 <title> 的內容也被用在搜索的結果中，正如你下面看到的那樣。
元數(shù)據(jù)：<meta> 元素
元數(shù)據(jù)是描述數(shù)據(jù)的數(shù)據(jù)，而HTML有一個“官方的”方式來為一個文檔添加元數(shù)據(jù)——<meta> 元素。當然，我們在本文中討論的其他東西也可以被認為是元數(shù)據(jù)。有很多不同類型的<meta> 元素可以包含在你的頁面的<head>元素里，但是現(xiàn)在我們還不會嘗試去解釋它們，這只會引起混亂。我們會解釋一些你會經(jīng)?？吹降臇|西，會給你一個想法。
指定文檔中字符的編碼
在上面的例子中，我們看到了這一行：
<meta charset="utf-8">
這個元素簡單的指定了文檔的字符編碼——在這個文檔中被允許使用的字符集。utf-8 是一個通用的字符集，它包含了任何人類語言中的大部分的字符。這意味著你的web頁面可以顯示任意的語言；所以對于你的每一個頁面，使用這個設置是很好的！比如說，你的頁面可以很好的處理英語和日語：
比如說，如果你將你的字符集設置為ISO-8859-1（拉丁字母的字符集），那么你的頁面會是亂碼的：
主動學習：體驗字符集
為了進行這個練習，重新到你在前面<title>章節(jié)中獲取的HTML模板 （ title-example.html page），試著改變其字符集的值為ISO-8859-1，然后將日語添加到頁面中。這就是我們使用的代碼：
<p>Japanese example: ご飯が熱い。</p>
添加作者（author）和描述（description）
許多<meta> 元素包括 name 和content特性：
name特性指定了meta 元素的類型；說明該元素包含了什么類型的信息。content指定了實際的元數(shù)據(jù)內容。
這兩個meta元素對于定義你的頁面的作者和提供頁面的內容描述是很有用的。讓我們看一個例子：
<meta name="author" content="Chris Mills"><meta name="description" content="The MDN Learning Area aims to providecomplete beginners to the Web with all they need to know to getstarted with developing web sites and applications.">
指定作者在以下幾個方面是有用的：如果你需要聯(lián)系頁面的作者，問一些關于頁面內容的問題。一些內容管理系統(tǒng)能夠自動獲取頁面作者的信息，然后用于某種目的。
指定包含關于頁面內容的關鍵字的頁面內容的描述是很有用的，因為它可能或讓你的頁面在搜索引擎的相關的搜索出現(xiàn)得更多（這些行為術語上被稱為 Search Engine Optimization，即SEO。）
主動式學習：在搜索引擎中description的使用
description也被使用在搜索引擎顯示的結果頁中。下面通過一個例子來說明：
- 到front page of The Mozilla Developer Network。
- 查看頁面資源（通過鼠標右鍵菜單查看頁面資源。）
- 找到description的meta標簽。就和如下展示的這樣：
<meta name="description" content="The Mozilla Developer Network (MDN) providesinformation about Open Web technologies including HTML, CSS, and APIs for bothWeb sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
- 現(xiàn)在，在你喜歡的搜索引擎里搜索”Mozilla Developer Network“ （下圖展示的是在雅虎搜索里的情況）。你會看到description <meta> 和 <title> 元素如何在搜索結果里顯示—很值得這樣做哦！
注意：在Google搜索中，在主頁面鏈接下面，你將看到一些相關子頁面 — 這些是站點鏈接，可以在 Google's webmaster tools 配置：一種可以使你的站點對搜索引擎更友好的方式。
注意：許多<meta>特性已經(jīng)不再使用。例如， keyword <meta> 元素——提供關鍵詞給搜索引擎，根據(jù)不同的搜索詞，查找到相關的網(wǎng)站——被搜索引擎忽略了。因為作弊者填充了大量關鍵詞到keyword，引導搜索結果。 其他類型的元數(shù)據(jù)
當你在網(wǎng)絡上漫游時，你也會發(fā)現(xiàn)其他類型的元數(shù)據(jù)。你在網(wǎng)站上看到的許多功能都是專有創(chuàng)作，旨在向某些網(wǎng)站（例如社交網(wǎng)站）提供他們可以使用的特定信息。
例如， Open Graph Data 是Facebook發(fā)明的元數(shù)據(jù)協(xié)議，用于為網(wǎng)站提供更豐富的元數(shù)據(jù)。在MDN源代碼中，你會發(fā)現(xiàn)：
<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) providesinformation about Open Web technologies including HTML, CSS, and APIs for both Web sitesand HTML5 Apps. It also documents Mozilla products, like Firefox OS."><meta property="og:title" content="Mozilla Developer Network">
上面代碼展現(xiàn)的一個效果是，當你在Facebook上鏈接到MDN時，該鏈接會顯示一個圖像和描述：為用戶提供更豐富的體驗。
Twitter也有自己的類似的專有元數(shù)據(jù)，當網(wǎng)站的URL顯示在twitter.com上時，會產(chǎn)生類似的效果。例如：
<meta name="twitter:title" content="Mozilla Developer Network">
給你的網(wǎng)站添加自定義圖標
為了進一步豐富你的網(wǎng)站設計，你可以在元數(shù)據(jù)中添加對自定義圖標的引用，這些引用將在特定上下文中顯示。
favicon這個不起眼的圖標已經(jīng)存在很多很多年了，16 x 16 像素是這種圖標的第一種類型。你可以看見這些圖標出現(xiàn)在瀏覽器每一個打開的頁面的標簽頁中，以及在書簽面板的書簽頁面中。
頁面添加圖標的方式有：
- 將其保存在與網(wǎng)站的索引頁面相同的目錄中，以
.ico格式保存（大多數(shù)瀏覽器將支持更通用的格式，如.gif或.png，但使用ICO格式將確保它能在如Internet Explorer 6一樣久遠的瀏覽器顯示）。 - 將以下行添加到HTML
<head>中以引用它：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
現(xiàn)代瀏覽器在各種地方使用favicons，例如在打開的頁面標簽頁和書簽面板中的書簽頁面。下面是一個favicon出現(xiàn)在書簽面板中的例子：
還有很多其他的圖標類型可以考慮。例如，你可以在MDN首頁的源代碼中找到:
<!-- third-generation iPad with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="144x144" rel="external nofollow" target="_blank" ><!-- iPhone with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="114x114" rel="external nofollow" target="_blank" ><!-- first- and second-generation iPad: --><link rel="apple-touch-icon-precomposed" sizes="72x72" rel="external nofollow" target="_blank" ><!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --><link rel="apple-touch-icon-precomposed" rel="external nofollow" target="_blank" ><!-- basic favicon --><link rel="shortcut icon" rel="external nofollow" target="_blank" >
這些注釋解釋了每個圖標的用途 - 這些元素涵蓋的東西提供一個高分辨率圖標，這些高分辨率圖標在網(wǎng)站保存到iPad的主屏幕時使用。
不用急于現(xiàn)在去實現(xiàn)所有這些類型的圖標 - 這是一個相當高級的功能，你無需在此課程中進一步學習這些知識。這里的主要目的是讓你提前了解有這一樣東西以防當你瀏覽其他網(wǎng)站的源代碼時不理解源代碼的含義。
將HTML中應用CSS和JavaScript
如今，幾乎你使用的所有網(wǎng)站都會使用 CSS 讓網(wǎng)頁更加炫酷，使用 JavaScript 讓網(wǎng)頁有交互功能，比如視頻播放器，地圖，游戲等。這些應用在網(wǎng)頁中很常見，他們分別使用<link>元素和<script>元素。
-
<link>元素始終位于文檔的開頭。這需要兩個屬性，rel ="stylesheet"，表明這是文檔的樣式表，而href包含樣式表文件的路徑：<link rel="stylesheet" href="my-css-file.css">
-
<script>部分沒必要非要放在文檔頭部；實際上，把它放在文檔的尾部（在</body>標簽之前）是一個更好的選擇，這樣可以確保在加載腳本之前瀏覽器已經(jīng)解析了HTML內容（如果腳本加載某個不存在的元素，瀏覽器會報錯）。<script src="my-js-file.js"></script>
注意：
<script>元素可能看起來像一個空元素，但它不是，因此需要一個結束標記。 你也可以選擇將腳本放在<script>元素中，而不是指向外部腳本文件。
主動：在網(wǎng)頁中應用CSS和JavaScript
- 開始操作之前， 先拷貝我們的 meta-example.html， script.js 和 style.css 文件，并把它們保存到本地電腦的同一目錄下，確保使用了正確的文件名和文件格式
- 使用瀏覽器和文字編輯器同時打開你的HTML文件。
- 根據(jù)上面的信息，添加
<link>和<script>部分到你的HTML文件中，這樣你的HTML就可以應用CSS和JavaScript了。
如果按照上述步驟正確地執(zhí)行，當你保存HTML文件并重新刷新瀏覽器時，你會發(fā)現(xiàn)頁面已經(jīng)變樣了：
- 在頁面中添加了一個空列表?，F(xiàn)在當你點擊列表中的任何地方，瀏覽器會彈出一個對話框要求你為新列表項輸入一些文本內容。當你點擊OK按鈕，剛剛那個新的列表項會添加到頁面上，當你點擊那些已有的列表項，會彈出一個對話框允許你修改列表項的文本。
- CSS使頁面背景變成了綠色，文本變得大了一點。它還將JavaScript添加到頁面中的一些內容進行了樣式化（帶有黑色邊框的紅色條是CSS添加到js生成的列表中的樣式）。
注意：如果你在本練習中遇到困難，無法正常應用的CSS和JavaScript，嘗試查看一下我們的css-and-js.html示例頁面。
為文檔設定主語言
最后，值得一提的是，你可以（而且確實應該）為你的站點設定語言。這個可以通過添加 lang屬性到HTML開始標簽中來實現(xiàn)（參考 meta-example.html ），如下所示：
<html lang="en-US">
這在許多方面是有用的。如果你的HTML文檔的語言設置好了，那么你的HTML文檔就會被搜索引擎更有效的索引（例如，允許它在特定于語言的結果中顯示正確），對于那些使用屏幕閱讀器的視覺障礙人士很有用（例如，法語和英語中都有“six”這個單詞，但發(fā)音卻完全不同。)
你還可以將文檔的分段設置為不同的語言。例如，我們可以把日語部分設置為日語，如下所示：
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
這些代碼由 ISO 639-1 標準定義。有關詳情，請參閱 HTML和XML中的語言標記。
總結
已經(jīng)到了我們快速學習HTML head標簽的尾聲 — 你還能學到更多相關的，但是現(xiàn)階段詳盡的講的太多會無聊且迷惑，我們只希望你現(xiàn)在在這學到最基本的概念！下一篇我們將要學習HTML 文本基礎。
更多建議：