HTML頭部

head元素用于定義文檔的頭部信息，出現(xiàn)在 head ... /head 標(biāo)簽之間的內(nèi)容，是文檔的頭部信息。頭部定義的內(nèi)容不會(huì)在瀏覽器窗口的正文部分顯示出來(lái)。

head元素比較特殊，只有一些特定的標(biāo)簽才允許放在 head 標(biāo)簽內(nèi)，它們分別是 title 、 base 、 meta 、 scirpt 、 link 、 style ，接下來(lái)對(duì)這些標(biāo)簽進(jìn)行分別介紹。

title 標(biāo)簽

title 標(biāo)簽的唯一作用，就是定義頁(yè)面的標(biāo)題，標(biāo)題是對(duì)當(dāng)前頁(yè)面核心內(nèi)容的一個(gè)簡(jiǎn)短的、概括性描述。如：

title Hello world! /title

在大多數(shù)瀏覽器中，頁(yè)面的標(biāo)題被顯示在瀏覽器窗口或標(biāo)簽頁(yè)的標(biāo)題欄，還會(huì)出現(xiàn)在訪問(wèn)者瀏覽歷史列表和書簽中。

更重要的是，搜索引擎會(huì)通過(guò)頁(yè)面的標(biāo)題來(lái)大致了解頁(yè)面的內(nèi)容，并將頁(yè)面的標(biāo)題作為搜索結(jié)果中每一個(gè)條目的鏈接文本，也是判斷搜索結(jié)果中頁(yè)面相關(guān)度的重要因素。因此，頁(yè)面標(biāo)題是SEO的重要內(nèi)容，一個(gè)好的頁(yè)面標(biāo)題可以提升搜索引擎的結(jié)果排名，并能獲得更好的用戶體驗(yàn)。

base 標(biāo)簽

base 標(biāo)簽是一個(gè)單標(biāo)簽，它為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址和默認(rèn)目標(biāo)窗口，并通過(guò) href 屬性設(shè)置默認(rèn)URL地址，通過(guò) target 屬性設(shè)置默認(rèn)目標(biāo)窗口。

規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)窗口后，點(diǎn)擊頁(yè)面上的任何鏈接時(shí)：對(duì)未帶http的鏈接，瀏覽器會(huì)在地址前插入base中 href 設(shè)置的URL地址；對(duì)未設(shè)置 target 屬性的鏈接，會(huì)按base中 target 設(shè)置的目標(biāo)打開(kāi)窗口。如：

 !DOCTYPE html  html  head  base href= http://www.abc.wcom body  a href= http://www.abc.com/ 首頁(yè) /a  a href= bbs/index.html target= _self 論壇 /a  /body  /html 

上述代碼中，表示在新窗口打開(kāi)鏈接。

“首頁(yè)”的鏈接帶有http，未設(shè)置target，會(huì)在新窗口打開(kāi)新網(wǎng)站。“論壇”的鏈接未帶http，但設(shè)置了target屬性，會(huì)在地址前插入http://www.abc.com/

base 標(biāo)簽的主要作用，是確保網(wǎng)頁(yè)中所有的相對(duì)URL都可以被解析為正確的地址，以便在文檔被移動(dòng)的情況下，所有的相對(duì)URL都能夠被正確解析。

meta 標(biāo)簽

meta 標(biāo)簽又叫“元數(shù)據(jù)標(biāo)簽”，是網(wǎng)頁(yè)頭部的一個(gè)輔助性標(biāo)簽，用于為網(wǎng)頁(yè)定義元數(shù)據(jù)（metadata）信息，一般用來(lái)定義頁(yè)面的關(guān)鍵字、頁(yè)面的描述等。

meta 標(biāo)簽提供的信息對(duì)用戶不可見(jiàn)，也不會(huì)顯示在頁(yè)面上，但卻對(duì)搜索引擎可見(jiàn)，可以方便搜索引擎蜘蛛搜索到這個(gè)頁(yè)面上的信息。因此，這些信息都是SEO的重要內(nèi)容，可以大大提高網(wǎng)站被搜索引擎搜索到的可能性。

meta 標(biāo)簽共有兩個(gè)重要屬性，分別是 name 屬性和 http-equiv 屬性，并通過(guò) name 或 http-equiv屬性來(lái)指定元數(shù)據(jù)的類型，通過(guò) content 來(lái)指定元數(shù)據(jù)的內(nèi)容，不同的元數(shù)據(jù)實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。

1、name屬性

name屬性主要用于描述網(wǎng)頁(yè)，最常見(jiàn)的就是描述網(wǎng)頁(yè)的關(guān)鍵字、網(wǎng)頁(yè)內(nèi)容描述、搜索引擎向?qū)А⒆髡摺鏅?quán)聲明等，以便搜索引擎對(duì)網(wǎng)頁(yè)的信息進(jìn)行查找和分類。如：

 head  meta name= keywords content= HTML, CSS, RWD /  meta name= description content= Study HTML, CSS, RWD for free /  meta name= robots content= all /  meta name= author content= 歪脖網(wǎng), www.waibo.wang /  meta name= copyright content= 創(chuàng)意共享，只要保持署名和非商用，可以自由轉(zhuǎn)載 /  /head 

name屬性的主要取值及功能見(jiàn)表 1?1：

表 1?1 name屬性的取值及功能

2、http-equiv屬性

顧名思義，http-equiv 就相當(dāng)于HTTP頭部的作用，用于向?yàn)g覽器提供一些有用的信息，以幫助瀏覽器正確和精確地顯示網(wǎng)頁(yè)內(nèi)容。

http-equiv屬性主要用定義網(wǎng)頁(yè)的編碼字符集、刷新頻率、網(wǎng)頁(yè)的有效期等：

1）網(wǎng)頁(yè)的編碼字符集

在HTML4中，通過(guò)Content-Type屬性值來(lái)指定文件的媒體格式類型（MIME類型）和所使用的編碼字符集，瀏覽器將以此來(lái)決定以什么形式、什么編碼來(lái)讀取這個(gè)文件，并顯示文件的內(nèi)容。

HTML文件的MIME類型固定為text/html，而編碼字符集可以根據(jù)需要來(lái)指定。如：

 meta http-equiv= Content-Type content= text/html; charset=utf-8 /  meta http-equiv= Content-Type content= text/html; charset=gb2312 

到了HTML5，一切化繁為簡(jiǎn)，只需在 meta 元素中，直接使用 charset 屬性來(lái)定義網(wǎng)頁(yè)所使用的編碼字符集即可。如：

 meta charset= utf-8 / 

在HTML5中，上述兩種方式均有效，但只能使用一種，不能同時(shí)混合使用兩種方式。并且，推薦使用 utf-8 編碼字符集。

2）刷新頻率Refresh

通過(guò) refresh 屬性值來(lái)指定讓網(wǎng)頁(yè)多長(zhǎng)時(shí)間（秒）刷新自己，或在多長(zhǎng)時(shí)間后自動(dòng)跳轉(zhuǎn)到指定的網(wǎng)頁(yè)。如，讓網(wǎng)頁(yè)在當(dāng)前頁(yè)面停留 5 秒后，自動(dòng)跳轉(zhuǎn)到 http://www.abc.com/：

 meta http-equiv= refresh content= url=http://www.abc.com/ / 

3）網(wǎng)頁(yè)的有效期

通過(guò)Expires屬性值來(lái)指定網(wǎng)頁(yè)在緩存中的過(guò)期時(shí)間，一旦網(wǎng)頁(yè)過(guò)期，必須從服務(wù)器上重新加載。時(shí)間必須使用GMT格式（格林威治時(shí)間格式）。如：

meta http-equiv= Expires content= Mon, 20 Jul 2099 23:00:00 GMT /

說(shuō)明：

網(wǎng)頁(yè)頭部的這些元素中，title、keywords、description的作用非常重要，因?yàn)樗阉饕娴?a href='http://www.survivalescaperooms.com/tag/jiqiren_5964_1.html' target='_blank'>機(jī)器人會(huì)自動(dòng)檢索頁(yè)面的keywords和decription，并將其加入到自己的數(shù)據(jù)庫(kù)，再根據(jù)關(guān)鍵詞的密度對(duì)網(wǎng)站進(jìn)行排序。

對(duì)于任何站長(zhǎng)而言，可能都有同樣的感受，無(wú)論網(wǎng)站做得再精彩，在浩如煙海的網(wǎng)絡(luò)世界中，也如一葉扁舟，不為人知。

人們往往忙于在搜索引擎中提交自己的網(wǎng)站，或在知名網(wǎng)站加入自己網(wǎng)站的鏈接，或在各大論壇中發(fā)帖子宣傳自己的網(wǎng)站，忙得不亦樂(lè)乎，卻忽視了 meta 標(biāo)簽的強(qiáng)大功效。

因此，要讓網(wǎng)站獲得很好的排名，必須充分利用 meta標(biāo)簽，設(shè)置好每個(gè)頁(yè)面的 keywords 和 decription，來(lái)增加網(wǎng)站對(duì)各大搜索引擎的曝光率，提高網(wǎng)站的訪問(wèn)量，進(jìn)而提升網(wǎng)站的收益。

樣式表

樣式表，即CSS（Cascading Style Sheet層疊樣式表），用它來(lái)控制網(wǎng)頁(yè)的表現(xiàn)，如果要讓網(wǎng)站看起來(lái)很吸引人，就離不開(kāi)CSS。

在HTML文檔的頭部，可以通過(guò)兩種方式來(lái)為網(wǎng)頁(yè)定義樣式：

(1) 使用link元素

在HTML文檔的頭部，可以通過(guò)link元素鏈接到外部樣式表，讓網(wǎng)頁(yè)應(yīng)用該外部樣式表定義的樣式規(guī)則。

在link 標(biāo)簽中，通過(guò)的 rel 屬性來(lái)定義本HTML文檔與被鏈接文檔之間的關(guān)系，rel = stylesheet 表明引入的文件是樣式表；通過(guò)href屬性定義外部資源（即CSS文件）的URL地址，URL可以是相對(duì)路徑，也可以是相對(duì)路徑，相對(duì)路徑是相對(duì)于本HTML文檔而言的。

可以在一個(gè)HTML文檔中添加多個(gè) link 元素，讓它們分別指向不同的樣式文件，就可以給一個(gè)網(wǎng)頁(yè)添加多個(gè)樣式表。

由于 link 元素為空元素，它只有開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽，所以，要在開(kāi)始標(biāo)簽的結(jié)尾處加上 / 來(lái)結(jié)束該元素。如：

 link rel= stylesheet href= reset.css / 

上述代碼表示，為本文檔引入文件名稱為 reset.css 的外部樣式表，該樣式表文件與本文檔位于相同目錄下。

(2) 使用style元素

可以在HTML文檔的頭部插入一個(gè) style 元素，讓網(wǎng)頁(yè)應(yīng)用該 style 元素中定義的樣式規(guī)則。如：

 style body { background-color:yellow; }p { color:blue; } /style 

上述代碼表示，指定本HTML文檔的背景顏色為黃色（yellow）、本HTML文檔中的所有段落的文本顏色為藍(lán)色（blue）。

腳本

在HTML文檔中，可以通過(guò)Javascript 腳本主要用來(lái)定義特殊的行為，但Javascript并不是必需的。

大多數(shù)情況下，Javascript 都是在由HTML和CSS 構(gòu)建的核心體驗(yàn)的基礎(chǔ)上，增強(qiáng)訪問(wèn)者的體驗(yàn)，主要用來(lái)增強(qiáng)頁(yè)面的交互性，如實(shí)現(xiàn)表單驗(yàn)證、動(dòng)態(tài)顯示隱藏內(nèi)容、加載數(shù)據(jù)并動(dòng)態(tài)地更新頁(yè)面、操作 audio 和 video 元素控件等等。

HTML文檔中，有兩個(gè)用于標(biāo)識(shí)腳本的元素，它們是 script 元素和 noscript 元素：

1、script 元素

script 元素既可以直接在頁(yè)面中嵌入Javascript腳本，也可以從外部文件加載腳本。

(1) 嵌入腳本

就是直接在 script 元素中書寫Javascript代碼。如：

 script  alert( Hello, world!  /script 

一個(gè)HTML文檔，也支持多個(gè) script 元素。這種方式定義的腳本，只對(duì)本文檔有效，并且腳本代碼需要放在HTML文件，而不是腳本文件中，腳本通常會(huì)散落在多個(gè)地方，不便于維護(hù)，也容易出錯(cuò)。所以，不推薦使用這種方法。

(2) 加載外部腳本

通過(guò) script 元素的 src 屬性指定外部腳本文件的URL，可以把外部腳本加載到本HTML文檔中。URL可以是絕對(duì)路徑，也可以是相對(duì)路徑。相對(duì)路徑是相對(duì)本HTML文檔而言的。

在一個(gè)HTML文檔中，可以添加多個(gè) script 元素，讓它們分別指向不同的腳本文件，就可以為一個(gè)網(wǎng)頁(yè)載入多個(gè)腳本文件。當(dāng)加載外部腳本時(shí)，script 元素必須是空元素，即在開(kāi)始和結(jié)束標(biāo)簽之間不得有任何內(nèi)容。如：

 script src= engine.js /script 

上述代碼表示，文檔會(huì)載入外部腳本，腳本文件名稱是engine.js，腳本文件與本HTML文檔位于相同目錄下。

這種方式是最好的引入的腳本方法，多個(gè)頁(yè)面可以加載同一個(gè)腳本文件。并且，腳本存放在單獨(dú)的文件中，需要對(duì)腳本進(jìn)行修改時(shí)，只需編輯一個(gè)文件，而不是在各個(gè)頁(yè)面中更新相似的腳本，維護(hù)起來(lái)極其方便。

2、noscript 元素

noscript 元素是一個(gè)檢測(cè)工具，當(dāng)檢測(cè)到 script 中的腳本內(nèi)容無(wú)法執(zhí)行時(shí)，即如果瀏覽器不支持Javascript或用戶禁用了Javascript時(shí)，就會(huì)顯示 noscript 元素中的文本。如：

 noscript 您的瀏覽器不支持Javascript /noscript 

注意：

默認(rèn)情況下，瀏覽器會(huì)按照腳本在HTML中出現(xiàn)的順序，依次對(duì)每個(gè)腳本進(jìn)行下載（對(duì)于外部腳本）、解析和執(zhí)行。

在處理腳本的過(guò)程中，瀏覽器既不會(huì)下載該 script 元素后面出現(xiàn)的內(nèi)容，也不會(huì)呈現(xiàn)這些內(nèi)容，這稱為阻塞行為（blocking behavior）。

這條規(guī)則對(duì)嵌入腳本和外部腳本都有效。可以想象，阻塞行為會(huì)影響頁(yè)面的呈現(xiàn)速度，影響的程度取決于腳本的大小和它執(zhí)行的動(dòng)作。

因此，建議最好在頁(yè)面的最末尾加載腳本，即應(yīng)該盡可能地將腳本元素放在 /body 的前面，而不是放在 head 元素中。

以上就是HTML之head頭部的實(shí)現(xiàn)的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。