站長資訊網移動端的工作已經越來越成為前端工作的重要內容，除了平常的項目開發(fā)，HTML 頭部標簽功能，特別是meta標簽顯得非常重要。
HTML文檔的head部分，通常包括指定頁面標題，為搜索引擎提供關于頁面本身的信息，加載樣式表，以及加載JavaScript文件（出于性能考慮，多數時候放在頁面底部</body>標簽結束前加載JavaScript）。除了title，head里的內容對頁面訪問者來說都是不可見的.
下面是HTML文檔head部分的一個例子：
<head> <meta charset="utf-8" /> <meta name="author" content="Adam Freeman"/> <title>Your page title</title> <base href="http://titan/listings/" target="_blank"/> <style type="text/css"> a{ background-color: grey; color: white; padding: 0.5em; } </style> </head>
DOCTYPE(Document Type)，該聲明位于文檔中最前面的位置，處于 html 標簽之前，此標簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范。
使用 HTML5 doctype，不區(qū)分大小寫。
title元素
head元素中必須包含一個title元素，該元素內容會出現在瀏覽器的標簽頁中或者出現在瀏覽器窗口的頂部，作為網頁標題，和瀏覽器相關。
base元素
base元素用來設置一個基準URL，讓HTML文檔中的相對鏈接在此基礎上進行解析。如未指定，則使用當前加載文檔的URL。base元素還能設定鏈接在用戶點擊時的打開方式，以及提交表單時瀏覽器如何反應。
<base href="http://bjpowernode/listings/" target="_blank"/>
1）href即為指定的基準URL。
2）target屬性規(guī)定在何處打開頁面上的所有鏈接，包括值：
1）_blank：在新窗口中打開被連接文檔；
2）_self：默認，在相同的框架中打開被鏈接文檔；
3）_parent：在父框架打開被鏈接文檔；
4）_top：在整個窗口中打開被鏈接文檔；
5）framename：在指定框架中打開被鏈接文檔。
meta元素
meta元素用來定義文檔的各種元數據，meta元素可以有多種用途，但每個meta元素只能用于一種用途，如果需要使用不止一種，就需要在head元素中添加多個meta元素。
指定名/值元數據對
<meta name="author" content="Adam Freeman"/>
name屬性用來表示元數據的類型，content屬性提供值。name屬性包含以下值：
1）application name：當前頁所屬Web應用系統(tǒng)的名稱；
2）author：當前頁的作者名；
3）description：當前頁的說明；
4）generator：用來生成HTML的軟件名稱；
5）keywords：描述頁面的內容。
除了以上5個預定義的元數據名稱，還可以使用元數據擴展，這里（http://wiki.whatwg.org/wiki/MetaExtensions）有這些擴展的一份時常更新的清單。有些擴展用的比較多，例如robots元數據，HTML文檔的作者可以用它告訴搜索引擎該如何對待該文檔：
<meta name="robots" content="noindex"/>
該屬性有三個大多數搜索引擎都認識的值：
1）noindex：不要索引本頁；
2）noarchive：不要將本頁存檔或緩存；
3）nofollow：不要順著本頁中的鏈接繼續(xù)搜索下去.
大多數搜索引擎都提供了優(yōu)化網頁或整個網站的指南，可以查看相應搜索引擎提供的網頁或網站優(yōu)化指南。
聲明字符編碼
<meta charset="utf-8" />
head元素中的meta元素聲明文檔的字符編碼為UTF-8（默認）。
模擬HTTP標頭字段
meta元素可以用來模擬或替換三種HTTP標頭字段的值。
<meta http-equiv="refresh" content="5"/>
http-equiv屬性的用途是指定所要模擬的標頭字段名稱，字段值在content屬性中指定。http-equiv屬性的可選值如下：
1）refresh：以秒為單位指定一個時間間隔，在此時間過去之后將從服務器重新載入當前頁面。也可以另行指定一個URL讓瀏覽器載入，如：
<meta http-equiv="refresh" content="5;http://www.apress.com"/>
2）default-style：指定頁面優(yōu)先使用的樣式表，content屬性的值必須是同一文檔中某個style元素或link元素的title屬性值；
3）content-type：另一種聲明HTML頁面所用字符編碼的方法，如：
<meta http-equiv="content-type" content="text/html charset=UTF-8"/>
style元素
定義HTML文檔內嵌的CSS樣式。
<style type="text/css"> a{ background-color: grey; color: white; padding: 0.5em; } </style>
上面為a元素設計了一個新樣式。style元素可以出現在HTML文檔中的各個部分，一個文檔可以包含多個style元素，該元素可以用于為模板定義的樣式（link元素導入）提供補充。
可以為style元素指定樣式適用的媒體：
<style media="screen AND (min-width:500px)" type="text/css"> ...... </style>
media屬性中的screen是設備類型，可選值的范圍包括：
1）all：將樣式用于所有設備（默認值）；
2）aural：將樣式用于語音合成器；
3）braille：將樣式用于忙問設備；
4）handheld：將樣式用于手持設備；
5）projection：將樣式用于投影機；
6）print：將樣式用于打印預覽和打印頁面時；
7）screen：將樣式用于計算機顯示器屏幕；
8）tty：將樣式用于電傳打字機之類的等寬設備；
9）tv：將樣式用于電視機。
media屬性中的(min-width:500px)指定特性，包括：
1）width height：指定瀏覽器窗口的寬度和高度，單位px，例如：width:200px
2）device-width device-height：指定整個設備（而不僅僅是瀏覽器窗口）的寬度和高度，單位px，例如：min-device-height:200px
3）resolution：指定設備的像素密度，單位dpi（點/英寸）或dpcm（點/厘米），例如：max-resolution:600dpi
4）orientation：指定設備的較長邊朝向，可選值為portrait和landscape
5）aspect-ratio device-aspect-ratio：指定瀏覽器窗口或整個設備的像素寬高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白設備上每個像素占用的二進制位數，例如：min-monochrome:2
7）color-index：指定設備所能顯示的顏色數目，例如：max-color-index:256
8）scan：指定電視的掃描模式，包括值progressive和interlace
9）grid：指定設備的類型，支持的值為0和1（1代表網格型設備，使用固定的網格顯示內容）
link元素
用來在HTML文檔和外部資源（如CSS樣式表）之間建立聯(lián)系。link元素包含6個局部屬性，如下：
1）href：指定link元素指向的資源的URL；
2）hreflang：說明所關聯(lián)資源使用的語言；
3）media：說明所關聯(lián)的內容用于哪種設備，同style中的media屬性；
4）rel：說明文檔與所關聯(lián)資源的關系類型，值的范圍如下：
—alternate：鏈接到文檔的替代版本，比如另一種語言的譯本；
—author：鏈接到文檔的作者；
—help：連接到當前文檔的說明文檔；
—icon：指定圖標資源；
—license：鏈接到當前文檔的相關許可證；
—pingback：指定一個回探（pingback）服務器，從其他網站鏈接到博客的時候它能自動得到通知；
—prefetch：預先獲取一個資源；
—stylesheet：載入外部樣式表。
5）sizes：指定圖標的大??；
6）type：指定所關聯(lián)資源的MIME類型，如text/css、image/x-icon。
載入外部樣式表
<link rel="stylesheet" type="text/css" href="styles.css"/>
可以使用多個link元素載入多個外部資源。
為頁面定義網站標志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
瀏覽器載入HTML頁面時，會加載并顯示網站標志。
注：如果網站標志文件位于/favicon.ico（即Web服務器的根目錄），那就不必用到link元素，大多數瀏覽器在載入頁面時都會自動請求這個文件，就算沒有l(wèi)ink元素也是如此。
預先獲取資源
可以要求瀏覽器預先獲取預計很快就要用到的資源。
<link rel="prefetch" href="/page2.html"/>
注：目前不是所有瀏覽器都支持該功能。
script元素
用于在頁面中加入腳本，可以直接在文檔中定義腳本和引用外部文件中的腳本。該元素支持的局部屬性如下：
1）type：表示所引用或定義的腳本的類型，對于JavaScript腳本這個屬性可以省略
2）src：指定外部腳本文件的URL
3）defer async（HTML5新增）：設定腳本的執(zhí)行方式，這兩個屬性只能與src屬性一同使用
4）charset：說明外部腳本文件所用字符編碼，該屬性只能與src屬性一同使用
定義文檔內嵌腳本
<script> document.write("This is from the script"); </script>
默認情況下，瀏覽器在頁面中一遇到腳本就會執(zhí)行。
載入外部腳本庫
可以將腳本放到單獨的文件中，然后用script元素載入HTML文檔。
<script src="simple.js"></script>
推遲腳本的執(zhí)行
使用async和defer屬性可以對腳本的執(zhí)行方式加以控制，defer屬性告訴瀏覽器要等頁面載入和解析完成后才能執(zhí)行腳本：
<script defer src="simple2.js"></script>
由于html遇到腳本就會執(zhí)行，如果你的腳本需要使用到html腳本中的內容，通常你需要將腳本放到相應的html腳本后，但在html5中，使用defer屬性就能達到同樣的目的。
瀏覽器遇到script元素時的默認行為是在加載和執(zhí)行腳本的同時暫停處理頁面，各個script元素依次同步執(zhí)行。async屬性可以在瀏覽器解析HTML文檔時異步加載和執(zhí)行腳本，如果運用得當，可以大大提高整體加載性能。
<script async src="simple2.js"></script>
noscript元素
noscript元素用來向禁用了JavaScript或瀏覽器不支持JavaScript的用戶顯示一些內容。
<noscript> <h1>JavaScript is required!</h1> <p>You cannot use this page without JavaScript</p> </noscript>
還有一種選擇是在瀏覽器不支持JavaScript時將其引至另一個URL。
<noscript> <meta http-equiv="refresh" content="0;www.apress.com"/> </noscript>
