HTML 頭部元素

HTML <head> 元素

#<head> 元素是所有頭部元素的容器。在head元素標籤內容中,包含<title>、<base>、<link>、<meta>、<script> 以及 <style>。除<title>標籤的內容會顯示外,其餘的標籤內容都為隱藏訊息。

<title> 元素標籤定義文件的標題。
<base>元素標籤:為頁面上的所有連結規定預設位址或預設目標(target)。
<link>元素標籤定義文件與外部資源之間的關係。最常用於連接樣式表。
<script>元素標籤用於定義客戶端腳本,如JavaScript。
<style>元素標籤用於為HTML文件定義樣式資訊。
<meta>標籤用來描述一個HTML網頁文件的隱藏訊息,例如作者、日期和時間、網頁描述、關鍵字、頁面刷新等。 meta主要分為HTTP頭標資訊(http-equiv)和頁面描述資訊(name)。頭標資訊包括文件類型、字元集、語言等瀏覽器正確顯示網頁的資訊及處理動作;頁面描述如內容的關鍵字、摘要、作者和定義robots行為等,為搜尋引擎索引提供資訊。 (某些搜尋引擎會利用meta 元素的name 與content 屬性來索引頁。)

      <meta>所支援的屬性:
                 content=""指定特性值
                     scheme="" 命名一個解釋特性值的方案
                       lang="" 指定語言訊息
                     dir ="" 指定文字方向 

知識點一:頭部資訊設定網頁的基底網址基底網址的實質是統一設置超級連結的屬性,基底網址標籤是</base>,它有兩個屬性,href和_target。 href用於設定基底網址的路徑,_target用於設定超級連結的開啟方式。

透過基底網址的添加,頁面中所有的相對網站根目錄位址可轉換成絕對位址。當瀏覽器瀏覽頁面時,透過<base>標記將相對網站跟目錄位址附加在基底網址路徑的後面,從而轉換成絕對位址。我們先建立一個base.htm,寫HTML程式碼如下:

<html> 
<head> 
<title>基底网址的设置</title> 
<base href="<a href="//m.sbmmt.com">//m.sbmmt.com</a>" _target="_blank" /> 
</head> 
<body> 
</body> 
</html>

透過以上程式碼對基底網址的設定。 Base.htm頁面中的任何超級連結的位址,都會在其前面加上"//m.sbmmt.com",即轉換為絕對位址。並且,頁面中的超級連結開啟方式都是開啟新視窗。

知識點二:頭部資訊的元資訊標籤

元資訊標籤是頭部資訊的基本標籤,專業網頁代碼中都對元資訊有詳細設定。元資訊標籤為</meta>,為單一標籤。 Meta元素提供的資訊對於瀏覽使用者是不可見的,一般用於定義頁面資訊的名稱,關鍵字,作者等。在HTML頁面中,一個meta標籤內就是一個meta內容,而在一個HTML頭頁中可以有多個meta元素。

meta標籤屬性分為兩種:頁面描述屬性(name)和http標題資訊(http-equiv)。

name屬性

name屬性主要用於描述網頁的內容,用於對搜尋引擎的最佳化,必須專注於掌握。正確設定name屬性,以便搜尋引擎(例如google,baidu)的搜尋機器人查找,分類,搜尋引擎一般都會自動查找meta值來給網頁分類。 name的取值如下:

<1>keywords。即關鍵字,用於說明網頁所包含的關鍵字等信息,從而提高被搜尋引擎搜尋到的機率。編寫格式為<meta name="keywords" content =「關鍵字」/>,content屬性的值為使用者設定的具體關鍵字。 (一般可設定多個關鍵字,他們之間用英文半角的逗號分開,搜尋引擎都限制關鍵字的數量,所以關鍵字內容要簡潔精練)

<2>description。中文意思是"描述",用來描述網頁的主要內容、主題等,合理設定也可以提高被搜尋引擎搜尋到的機率。格式為<meta name="description" content =「對頁面的描述」/>,content屬性值為使用者所設定的頁面具體描述的內容,最多容納1024個字符,但搜尋引擎一邊只顯示約前175個字元。

<3>author。作者,用來設定網站作者的名稱,比較專業的網站常用到。格式為<meta name="author" content =「作者名稱」/>

#http-equiv屬性

http-equiv屬性的取值具體如下:

<1>content-type,內容類別,用於設定頁面的類別和語言字元集。寫格式<meta http-equiv=“content-type” context=“text/html”;charset=“gb2312”/>,content屬性的值代表頁面採用HTML程式碼輸出,字元集為gb2312(簡體中文) ,國際化網站開發的話,為了字符統一,建議charset採用utf-8.

<2>refresh。刷新,用於設定多長時間內網頁自己刷新一次,或用一段時間自動跳到其他頁面,第一種編寫格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒刷新一次,第二種寫格式<meta http-equiv=“refresh” context=“30;url=www.google.com”/>,表示30秒後頁面自動跳到www.google. com網站

知識點三:頭部資訊實作與CSS及JavaScript混編

CSS負責HTML網頁的樣式,JaveScript負責HTML網頁的動態行為。 CSS和JaveScript最常用的融合方式是寫入頭部資訊部分。
<1>加入CSS只需在頭部資訊中加入<style type=“text/css”></style>標籤對。範例程式碼如下

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> CSS具体内容 </style> 
</head> 
<body> 
</body> 
</html>

<2>加入JavaScript只需要在頭部資訊加入<script type=“text/javascript”>< /script>標籤對。範例程式碼如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
<script type=“text/javascript”> 
JavaScript具体内容 
</script> 
</head> 
<body> 
</body> 
</html>


#
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Ståle Refsnes"> <meta charset="UTF-8"> </head> <body> <p>本文档的 meta 属性描述了该文档和它的关键词。</p> </body> </html>