1. 程式人生 > ><head>標簽和它的小夥伴們

<head>標簽和它的小夥伴們

容器 hello script charset content 不同 基本 介紹 tro

head標簽是HTML文檔中最基本的必須元素之一(body:對,還有我):

<html>

<head>
  <title>文檔的標題</title>
</head>

<body>
  文檔的內容... ...
</body>

</html>

<head> 標簽用於定義文檔的頭部,它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪裏找到樣式表(link)、提供元信息(meta)等等。文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

<head>可以包含6個元素小夥伴:<title><meta><link><style><script>和<base>。其中<title>是和它同生共死的摯友,它是 head 部分中唯一必需的元素。也就是一個HTML文檔必須包含標題。

—— * —— * —— * —— * —— * ——

下面分別介紹一下這六個標簽元素,包括定義、屬性和用法:

鐵桿兒小夥伴1: <title> 可定義文檔的標題。瀏覽器會以特殊的方式來使用標題,並且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。同樣,當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時,標題將成為該文檔鏈接的默認名稱。

屬性(全部不常用):dir/lang/xml:lang

用法:

<html>
 
  <head>
    <title>XHTML Tag Reference</title>
  </head>

  <body>
    The content of the document......
  </body>

</html>

小夥伴2:<base> 為頁面上的所有鏈接規定默認地址或默認目標。通常情況下,瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。使用 <base> 標簽可以改變這一點。瀏覽器隨後將不再使用當前文檔的 URL,而使用<base>標簽指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。

屬性:href:URL 規定頁面中所有相對鏈接的基準 URL

   target:_blank/_parent/_self/_top/framename 在何處打開頁面中所有的鏈接

用法:

<head>
  <base href="http://www.w3school.com.cn/i/" />
  <base target="_blank" />
</head>

<body>
  <img src="eg_smile.gif" />
  <a href="http://www.w3school.com.cn">W3School</a>
</body>

小夥伴3:<meta> 提供有關頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關鍵詞。位於文檔的頭部,不包含任何內容。其屬性定義了與文檔相關聯的名稱(http-equiv/name)/值(content)對。

屬性:content(必需):some_text 定義與 http-equiv 或 name 屬性相關的元信息

   name:author/description/keywords/generator/revised(修訂)/others 把 content 屬性關聯到一個名稱

name 屬性提供了名稱/值對中的名稱。HTML 和 XHTML 標簽都沒有指定任何預先定義的 <meta> 名稱。通常情況下,您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。"keywords" 是一個經常被用到的名稱。它為文檔定義了一組關鍵字。某些搜索引擎在遇到這些關鍵字時,會用這些關鍵字對文檔進行分類。類似這樣的 meta 標簽可能對於進入搜索引擎的索引有幫助:

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果沒有提供 name 屬性,那麽名稱/值對中的名稱會采用 http-equiv 屬性的值。

http-equiv:content-type/expires/refresh/set-cookie 把 content 屬性關聯到 HTTP 頭部

http-equiv 屬性為名稱/值對提供了名稱。並指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。

當服務器向瀏覽器發送文檔時,會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對,但是所有服務器都至少要發送一個:content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。

使用帶有 http-equiv 屬性的 <meta> 標簽時,服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。例如,添加:

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

這樣發送到瀏覽器的頭部就應該包含:

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

當然,只有瀏覽器可以接受這些附加的頭部字段,並能以適當的方式使用它們時,這些字段才有意義。

  content:提供了名稱/值對中的值。該值可以是任何有效的字符串。始終要和 name 屬性或 http-equiv 屬性一起使用。

  scheme:用於指定要用來翻譯屬性值的方案。此方案應該在由 <head> 標簽的 profile 屬性指定的概況文件中進行了定義。

小夥伴4:<link> 定義文檔與外部資源的關系。最常見的用途是鏈接樣式表。

屬性:rel:stylesheet... 規定當前文檔與被鏈接文檔之間的關系

   type:MIME_type 規定被鏈接文檔的 MIME 類型

   href:URL 規定被鏈接文檔的位置

用法:

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

小夥伴5:<style> 用於為 HTML 文檔定義樣式信息。在 style 中,您可以規定在瀏覽器中如何呈現 HTML 文檔。type 屬性是必需的,定義 style 元素的內容。唯一可能的值是 "text/css"。style 元素位於 head 部分中。

屬性:type:text/css 規定樣式表的 MIME 類型

   media:為樣式表規定不同的媒介類型

<html>
<head>
<style type="text/css">
  h1 {color:red}
  p {color:blue}
</style>
</head>

<body>
  <h1>Header 1</h1>
  <p>A paragraph.</p>
</body>
</html>

小夥伴6:<script> 用於定義客戶端腳本,比如 JavaScript。既可以包含腳本語句,也可以通過 src 屬性指向外部腳本文件。必需的 type 屬性規定腳本的 MIME 類型。

屬性:type(必需):text/javascript 指示腳本的 MIME 類型

   src:URL 規定外部腳本文件的 URL

<script type="text/javascript">
    document.write("Hello World!")
</script>

以上就是head標簽和它的小夥伴們~經常見到用到卻經常被我們忽略,有時一些問題可能不是出在文檔的內容上,而是在head部分沒有設置好。

參考:http://www.w3school.com.cn/tags/tag_head.asp

<head>標簽和它的小夥伴們