HTML文檔頭部

標籤：item   投影儀   dem   head   版本   ring   基本   lang   外掛程式安裝   

前面的話

??在聲明文件類型之後，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文檔頭部