HTML 頭部元素
HTML <head> 元素
#<head> 元素是所有頭部元素的容器。在head元素標(biāo)籤內(nèi)容中,包含<title>、<base>、<link>、<meta>、<script> 以及 <style>。除<title>標(biāo)籤的內(nèi)容會(huì)顯示外,其餘的標(biāo)籤內(nèi)容都為隱藏訊息。
<title> 元素標(biāo)籤定義文件的標(biāo)題。
<base>元素標(biāo)籤:為頁(yè)面上的所有連結(jié)規(guī)定預(yù)設(shè)位址或預(yù)設(shè)目標(biāo)(target)。
<link>元素標(biāo)籤定義文件與外部資源之間的關(guān)係。最常用於連接樣式表。
<script>元素標(biāo)籤用於定義客戶端腳本,如JavaScript。
<style>元素標(biāo)籤用於為HTML文件定義樣式資訊。
<meta>標(biāo)籤用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文件的隱藏訊息,例如作者、日期和時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵字、頁(yè)面刷新等。 meta主要分為HTTP頭標(biāo)資訊(http-equiv)和頁(yè)面描述資訊(name)。頭標(biāo)資訊包括文件類型、字元集、語(yǔ)言等瀏覽器正確顯示網(wǎng)頁(yè)的資訊及處理動(dòng)作;頁(yè)面描述如內(nèi)容的關(guān)鍵字、摘要、作者和定義robots行為等,為搜尋引擎索引提供資訊。 (某些搜尋引擎會(huì)利用meta 元素的name 與content 屬性來(lái)索引頁(yè)。)
? ? ??<meta>所支援的屬性:
? ? ? ? ? ? ??? ?content=""指定特性值
? ? ? ? ? ? ? ? ? ? ?scheme="" 命名一個(gè)解釋特性值的方案
? ? ? ? ? ? ??? ? ? ? ?lang="" 指定語(yǔ)言訊息
? ? ? ? ? ? ? ? ? ? ?dir ="" 指定文字方向?
知識(shí)點(diǎn)一:頭部資訊設(shè)定網(wǎng)頁(yè)的基底網(wǎng)址基底網(wǎng)址的實(shí)質(zhì)是統(tǒng)一設(shè)置超級(jí)連結(jié)的屬性,基底網(wǎng)址標(biāo)籤是</base>,它有兩個(gè)屬性,href和_target。 href用於設(shè)定基底網(wǎng)址的路徑,_target用於設(shè)定超級(jí)連結(jié)的開(kāi)啟方式。
透過(guò)基底網(wǎng)址的添加,頁(yè)面中所有的相對(duì)網(wǎng)站根目錄位址可轉(zhuǎn)換成絕對(duì)位址。當(dāng)瀏覽器瀏覽頁(yè)面時(shí),透過(guò)<base>標(biāo)記將相對(duì)網(wǎng)站跟目錄位址附加在基底網(wǎng)址路徑的後面,從而轉(zhuǎn)換成絕對(duì)位址。我們先建立一個(gè)base.htm,寫(xiě)HTML程式碼如下:
<html> <head> <title>基底網(wǎng)址的設(shè)置</title> <base href="<a href="http://ipnx.cn">http://ipnx.cn</a>" _target="_blank" /> </head> <body> </body> </html>
透過(guò)以上程式碼對(duì)基底網(wǎng)址的設(shè)定。 Base.htm頁(yè)面中的任何超級(jí)連結(jié)的位址,都會(huì)在其前面加上"http://ipnx.cn",即轉(zhuǎn)換為絕對(duì)位址。並且,頁(yè)面中的超級(jí)連結(jié)開(kāi)啟方式都是開(kāi)啟新視窗。
知識(shí)點(diǎn)二:頭部資訊的元資訊標(biāo)籤
元資訊標(biāo)籤是頭部資訊的基本標(biāo)籤,專業(yè)網(wǎng)頁(yè)代碼中都對(duì)元資訊有詳細(xì)設(shè)定。元資訊標(biāo)籤為</meta>,為單一標(biāo)籤。 Meta元素提供的資訊對(duì)於瀏覽使用者是不可見(jiàn)的,一般用於定義頁(yè)面資訊的名稱,關(guān)鍵字,作者等。在HTML頁(yè)面中,一個(gè)meta標(biāo)籤內(nèi)就是一個(gè)meta內(nèi)容,而在一個(gè)HTML頭頁(yè)中可以有多個(gè)meta元素。
meta標(biāo)籤屬性分為兩種:頁(yè)面描述屬性(name)和http標(biāo)題資訊(http-equiv)。
name屬性
name屬性主要用於描述網(wǎng)頁(yè)的內(nèi)容,用於對(duì)搜尋引擎的最佳化,必須專注於掌握。正確設(shè)定name屬性,以便搜尋引擎(例如google,baidu)的搜尋機(jī)器人查找,分類,搜尋引擎一般都會(huì)自動(dòng)查找meta值來(lái)給網(wǎng)頁(yè)分類。 name的取值如下:
<1>keywords。即關(guān)鍵字,用於說(shuō)明網(wǎng)頁(yè)所包含的關(guān)鍵字等信息,從而提高被搜尋引擎搜尋到的機(jī)率。編寫(xiě)格式為<meta name="keywords" content =「關(guān)鍵字」/>,content屬性的值為使用者設(shè)定的具體關(guān)鍵字。 (一般可設(shè)定多個(gè)關(guān)鍵字,他們之間用英文半角的逗號(hào)分開(kāi),搜尋引擎都限制關(guān)鍵字的數(shù)量,所以關(guān)鍵字內(nèi)容要簡(jiǎn)潔精練)
<2>description。中文意思是"描述",用來(lái)描述網(wǎng)頁(yè)的主要內(nèi)容、主題等,合理設(shè)定也可以提高被搜尋引擎搜尋到的機(jī)率。格式為<meta name="description" content =「對(duì)頁(yè)面的描述」/>,content屬性值為使用者所設(shè)定的頁(yè)面具體描述的內(nèi)容,最多容納1024個(gè)字符,但搜尋引擎一邊只顯示約前175個(gè)字元。
<3>author。作者,用來(lái)設(shè)定網(wǎng)站作者的名稱,比較專業(yè)的網(wǎng)站常用到。格式為<meta name="author" content =「作者名稱」/>
#http-equiv屬性
http-equiv屬性的取值具體如下:
<1>content-type,內(nèi)容類別,用於設(shè)定頁(yè)面的類別和語(yǔ)言字元集。寫(xiě)格式<meta http-equiv=“content-type” context=“text/html”;charset=“gb2312”/>,content屬性的值代表頁(yè)面採(cǎi)用HTML程式碼輸出,字元集為gb2312(簡(jiǎn)體中文) ,國(guó)際化網(wǎng)站開(kāi)發(fā)的話,為了字符統(tǒng)一,建議charset採(cǎi)用utf-8.
<2>refresh。刷新,用於設(shè)定多長(zhǎng)時(shí)間內(nèi)網(wǎng)頁(yè)自己刷新一次,或用一段時(shí)間自動(dòng)跳到其他頁(yè)面,第一種編寫(xiě)格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒刷新一次,第二種寫(xiě)格式<meta http-equiv=“refresh” context=“30;url=www.google.com”/>,表示30秒後頁(yè)面自動(dòng)跳到www.google. com網(wǎng)站
知識(shí)點(diǎn)三:頭部資訊實(shí)作與CSS及JavaScript混編
CSS負(fù)責(zé)HTML網(wǎng)頁(yè)的樣式,JaveScript負(fù)責(zé)HTML網(wǎng)頁(yè)的動(dòng)態(tài)行為。 CSS和JaveScript最常用的融合方式是寫(xiě)入頭部資訊部分。
<1>加入CSS只需在頭部資訊中加入<style type=“text/css”></style>標(biāo)籤對(duì)。範(fàn)例程式碼如下
<html> <head> <title>CSS的設(shè)置</title> <style type=“text/css”> CSS具體內(nèi)容 </style> </head> <body> </body> </html>
<2>加入JavaScript只需要在頭部資訊加入<script type=“text/javascript”>< /script>標(biāo)籤對(duì)。範(fàn)例程式碼如下:
<html> <head> <title>CSS的設(shè)置</title> <style type=“text/css”> CSS具體內(nèi)容 </style> <script type=“text/javascript”> JavaScript具體內(nèi)容 </script> </head> <body> </body> </html>