HTML文檔頭部
在聲明文檔類型之後，HTML文檔的下一部分為<html>標簽，告知瀏覽器應將括在<html>...</html>內的所有內容解析為HTML。然後是HTML文檔的兩個主要部分：<head>和<body>。<head>將包含有關頁面的常規信息和元數據，本文將詳細介紹HTML的文檔頭部<head>
概述
<head>大部分不可見，描述了文檔的一些基本的屬性和信息(可以呈現的是title和icon)。<head>元素下的子元素主要包括<meta>、<title>、<base>
<link>、<style>和<script>這六個元素
meta
<meta>標簽(meta-information)用於提供頁面有關的元數據，除了提供文檔字符集、使用語言、作者等基本信息外，還涉及對關鍵詞和網頁等級的設定。通過設置不同的屬性，元數據可以分為以下幾種:
如果設置了charset，即將對網頁使用的字符集作出聲明HTML5
如果設置了name，它是一個文檔級的元數據，將附著在整個頁面上
如果設置了http-equiv，它是一個編譯指令，即由服務器提供的來指示頁面應如何加載
如果設置了itemprop，將定義一個用戶自定義的元數據(未實現)
1、charset
charset聲明聲明當前文檔所使用的字符編碼，但該聲明可以被任何一個元素的lang特性的值覆蓋。文檔的編碼一定要與文件本身的編碼保持一致，否則會出現亂碼，推薦使用UTF-8編碼
[註意]字符編碼必須寫在<head>元素的最開始，如果位於<title>標簽之後，那麽<title>標簽很可能會亂碼
<meta charset="utf-8"/>
2、name
【關鍵詞】
<meta name="keywords" content="HTML, CSS, XML" />
【描述】
<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" />
【作者】
<meta name="author" content="littlematch">
【版權】
<meta name="copyright" content="本頁版權歸小火柴所有">
【視口(移動端使用)】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
3、http-equiv
【定時跳轉】
讓網頁多少秒刷新，或跳轉到其他網頁
<meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com">
【緩存過期時間】
可以用於設定網頁的到期時間，一旦過期則必須到服務器上重新調用。需要註意的是必須使用GMT時間格式
<meta http-equiv="Expires" Content="0"><meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">
【禁止緩存】
用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，用戶無法脫機瀏覽
<meta http-equiv="Pragma" Content="No-cach">
【獨立頁面】
強制頁面在當前窗口中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用
<meta http-equiv="windows-Target" content="_top">
【兼容模式】
Edge模式告訴IE以最高級模式渲染文檔，也就是說，什麽版本IE就用什麽版本的標準模式渲染；chrome模式表示強制IE使用Chrome Frame渲染。Google官方提供了對Google Frame插件安裝情況的檢測，這裏直接調用方法即可，如果檢測到IE並未安裝Google Frame，則彈出對話框提示安裝。使用此插件，用戶可以通過IE的用戶界面，以Chrome內核的渲染方式瀏覽網頁
下面表示如果當前瀏覽器版本是小於等於IE8的，則使用chrome，如果不是，則使用IE標準模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">
[註意]關於<meta>元素的更多信息移步至此
title
<title>元素定義文檔的標題，顯示在瀏覽器的標題欄或標簽頁上。它只可以包含文本，若是包含有標簽，則包含的任何標簽都不會被解釋
<title>元素詳細來說，有以下三個作用：1、定義瀏覽器工具欄中的標題；2、提供頁面被添加到收藏夾時顯示的標題；3、顯示在搜索引擎結果中的頁面標題
[註意]在所有HTML文檔中，<title>都是必須的
<title>About Me</title>
base
<base>用於指定文檔裏所有相對URL地址的基礎URL，為頁面上所有鏈接規定默認地址和默認打開方式。文檔中的基礎URL可以使用document.baseURI進行查詢
[註意]一份文檔最多一個<base>元素。如果指定了多個<base>`元素，只會使用第一個href和target值，其余都會被忽略
<base href="http://cnblogs.com" target="_blank">
link
<link>指定了外部資源與當前文檔的關系，具有屬性href、rel、media、hreflang、type和sizes。其中href和rel是常用的，href指定了鏈接的資源的地址(url)，而rel指定了資源的類型
【rel屬性】
alternate 指示鏈接到該文檔的另一個版本 author 指示鏈接到當前文檔的作者主頁help 指向一個跟網站或頁面相關的幫助文檔 icon 引入代表當前文檔的圖標，新的sized屬性與這個屬性結合使用，指定鏈接圖片的寬高 license 鏈接到當前的文檔的版權聲明next 指示鏈接到文檔是一組文檔中的下一份 pingback 處理當前文檔被引用情況的服務器地址 prefetch 指明需要緩存的目標資源 prev 標明了上一個文檔search 鏈接到可以用於搜索當前頁面和相關頁面的資源 sidebar 鏈接到可以作為附屬上下文的文檔 stylesheet 引入樣式表 tag 創建應用於當前文檔的標簽
【media屬性】
screen 計算機屏幕 tty 終端 tv 電視 projection 投影儀 handheld 手持設備print 打印的頁面 braille 盲文設備 aural 語音合成器all 所有
【sizes屬性】
sizes屬性規定被鏈接資源的尺寸，且只有當被鏈接資源是圖標時，才可使用該屬性
<link rel="icon" href="demo.gif" type="image/gif" sizes="16x16" />
【引入圖標】
<link rel="shortcut icon" href="ico.ico"/>
【引入外部樣式表】
<link rel="stylesheet" type="text/css" href="mystyle.css" />
[註意]關於<link>元素的更多信息移步至此
style
<style>元素包含了文檔的樣式化信息或者文檔的一部分，常用於引入內部CSS樣式
<style> body{background-color: red;}</style><style>主要包含以下屬性
【type】
該屬性以MIME類型(不應該指定字符集)定義樣式語言。如果該屬性未指定，則默認為‘text/css‘
【media】
指定哪個媒體應該應用該樣式
【title】
指定可選的樣式表
【disabled】
如果指定該屬性，關閉(不應用)樣式規則到文檔中的元素。
【scoped】
使用scoped屬性，可以在頁面任意位置添加CSS樣式。但是這樣就違背了結構與樣式分離的原則，要小心使用。如果該屬性存在，則樣式應用於其父元素；如果不存在，則應用於整個文檔。該屬性只有chrome和firefox支持
<article>
<div>The scoped attribute</div>
<p>This text should be black</p>
<section>
<style scoped>
p { color: red; } </style>
<p>This should be red.</p>
</section></article>
script
<script>的作用是在HTML或XHTML文檔中嵌入或引用可執行的腳本。沒有async或defer屬性的腳本和內聯腳本會在瀏覽器繼續解析剩余文檔前被獲取並立刻執行
【src】
這個屬性定義引用外部腳本的URI，這可以用來代替直接在文檔中嵌入腳本。有src屬性的script元素標簽內不應該再有嵌入的腳本
【type】
該屬性定義script元素包含或src引用的腳本語言。屬性的值為MIME類型，支持的MIME類型包括text/javascript, text/ecmascript, application/javascript和application/ecmascript。如果沒有定義這個屬性，腳本會被視作JavaScript。如果MIME類型不是JavaScript類型(上述支持的類型)，則該元素所包含的內容會被當作數據塊而不會被瀏覽器執行
如果type屬性為module，代碼會被當作JavaScript模塊
<!-- HTML4 and (x)HTML --><script type="text/javascript" src="javascript.js"><!-- HTML5 --><script src="javascript.js"></script>
【defer】
這個布爾屬性定義該腳本是否會延遲到文檔解析完畢後才執行
【async】
async屬性是HTML5新增的屬性，IE9-瀏覽器不支持。該布爾屬性指示瀏覽器是否在允許的情況下異步執行該腳本。該屬性對於內聯腳本無作用(即沒有src屬性的腳本）
javascript加載
正常情況下，當瀏覽器在解析HTML源文件時如果遇到外部的script，那麽解析過程會暫停，並發送請求來下載script文件，只有script完全下載並執行後才會繼續執行DOM解析
<script src="myBlockingScript.js"></script>
在下載過程中瀏覽器是被阻止做其他有用的工作的，包括解析HTML，執行其他腳本，以及展示CSS布局。雖然Webkit預加載掃描程序可以探測性地在下載階段進行多線程下載，但是某些頁面仍然存在很大的網絡延遲
當前有很多技術來提升頁面顯示速度，但都需要額外的代碼以及針對特定瀏覽器的技巧。現在，script可以通過添加async或者defer屬性來讓腳本不必同步執行
<script async src="myAsyncScript.js" onload="myInit()"></script> <script defer src="myDeferScript.js" onload="myInit()"></script>
async和defer標註的script都不會暫停HTML解析就立刻被下載，兩者都支持onload事件回調來解決需要該腳本來執行的初始化
兩者的區別在於執行時的不同：async腳本在script文件下載完成後會立即執行，並且其執行時間一定在window的load事件觸發之前。這意味著多個async腳本很可能不會按其在頁面中的出現次序順序執行；與此相對，瀏覽器確保多個defer腳本按其在HTML頁面中的出現順序依次執行，且執行時機為DOM解析完成後，document的DOMContentLoaded事件觸發之前
[註意]如果同時設置async和defer，和只設置async屬性的效果一致
下面展示的是一個需要1秒來下載，以及1秒來解析執行其他操作的例子，整個頁面載入花了大約2秒鐘
同樣的例子，但這次我們指定了script的defer屬性.因為當defer腳本下載的時候，其他操作可以並行執行，所以大概快了1倍
HTML文檔頭部