IT兄弟連 HTML5教程 HTML文檔頭部元素head
- 2019 年 10 月 11 日
- 筆記
版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/ITXDL123/article/details/101511351
HTML頭部標記是<head>，主要包括頁面的一些基本描述語句，以及CSS和JavaScript，一般都可以定義在頭部元素中。它用於包含當前文檔的有關資訊，例如網頁標題和關鍵字等。通常位於頭部的內容都不會在網頁上直接顯示，而是通過另外的方式起作用。在<head>標記中可以使用的標記不多，包含一些常見的如<title>、<base>、<link>和<meta>等標記。<head>與</head>之間必須有<title>。
<title>元素
瀏覽器會以特殊的方式來使用標題，並且通常把它放置在瀏覽器窗口的標題欄或狀態欄上。編寫每個頁面時，應該給其指定一個標題。HTML文件的標題使用<title>元素，<title>是<head>元素的子元素，用於將內容顯示在瀏覽器的標題欄中，用以說明文件的用途，當把文檔加入用戶的鏈接列表或者收藏夾或書籤列表時，標題將成為該文檔鏈接的默認名稱。每個HTML文檔都應當有標題，在瀏覽者保存該網頁後成為保存後網頁的文件名。另外，搜索引擎在收錄該頁面時，將網頁標題作為搜索的關鍵字，並將其在搜索引擎頁面中作為標題顯示。基本語法格式如下所示：
<title> 兄弟連IT教育：HTML5學科</title> <!– 在頭部定義的標題標記 –>
使用實際描述站點內容的標題是非常重要的。例如，站點的主頁面不應當只使用「網站首頁」標註，而是應當採用能夠描述站點內容的語句，通常都是「公司名稱+公司產品」。對於優秀的頁面標題，訪問者在閱讀它之後就應當能夠了解該頁面的內容，而不需要查看頁面的實際內容。
注意
一個文檔只能使用一個<title>元素，<title>元素中只能包含關於頁面標題的文本，而不能包含其他任何元素。另外，<title>標籤是<head>標籤中唯一要求包含的東西。
<base>元素
在頁面中使用<a>、<img>、<link>、<form> 標籤，都需要指定URL。通常情況下，如果在URL中使用相對路徑，瀏覽器會從當前文檔的URL中提取相應的元素來填寫相對URL路徑中的空白。而<base> 標籤為頁面上的所有鏈接規定默認地址或默認目標，瀏覽器隨後將不再使用當前文檔的URL，而使用指定的基本URL來解析所有的相對URL。在網頁文檔中，所有的相對地址形式的URL都是相對於這裡定義的基URL而言的。例如，如果在<base>中指定基URL為http://www.itxdl.cn，那麼在網頁中出現的相對鏈接「test.html」將對應http://www.itxdl.cn/ test.html的頁面。因此，如果網頁位置發生變化，可以通過修改<base>來適應這一變化。一篇文檔中的<base>標記最多只能有一個，而且必須放於頭部，並且應該在任何包含URL地址的語句之前。基本語法格式如下所示：
<base href="http://www.itxdl.cn/h5/" target="_blank" /> <!– base標籤使用方法 –>
在<base>標籤中href是必需的屬性，規定頁面中所有相對鏈接的基準URL。而target是可選屬性，設置在何處打開頁面中所有的鏈接。
<link>元素
<link>標籤定義文檔與外部資源的關係，最常見的用途是鏈接樣式表。該元素始終是空元素，它僅包含屬性，瀏覽器會分析<link>中的內容，自動讀取並載入相應的文件。基本語法格式如下所示：
<link rel="stylesheet" type="text/css" href="style.css" /> <!– 在頭部鏈接CSS文件位置 –>
<link>元素只能存在於head部分，不過它可出現任何次數。關於<link>元素的應用將在CSS一章中詳細介紹。
<meta>元素
<meta>元素可提供有關頁面的元資訊（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞，也能夠提供文檔的作者、描述、編碼和語言等多種元資訊，但不包含任何內容。該標籤位於文檔的頭部，可以包含任意數量的<meta>標記。該標籤的屬性定義了與文檔相關聯的名稱/值對，來定義文件資訊的名稱、內容等。這個標記是實現元數據的主要標記，通過該標記中的http-equiv、name、content屬性，可以建立多種多樣的效果和功能。基本語法格式如下所示：
<meta name="某個設置值" content="對該設置值進行具體補充說明的資訊" />
<meta http-equiv="某個設置值" content="對該設置值進行具體補充說明的資訊" />
下例給出一段包含<head>標記的源程式碼，以兄弟連IT教育官方網站為例。登錄http://www.itxdl.cn後，通過查看源文件的方式即可找到以下的頭部資訊。
以上是頭部資訊的一些基本用法，其中最重要的就是<title>標記及<meta>中的keywords和description屬性的設定。因為這兩個語句可以讓搜索引擎更準確地發現你的站點，吸引更多的人訪問。根據現在流行搜索引擎的工作原理，搜索引擎先派機器人自動在WWW上搜索。當發現新的網站時，便會檢索頁面中的keywords和description，並將其加入到自己的資料庫，然後再根據關鍵詞的密度對網站進行排序。在HTML5中可以使用對<meta>元素直接追加charset屬性的方式來指定字元編碼，從HTML5開始，對於文件的字元編碼推薦使用UTF-8。如下所示：
<meta charset= "UTF-8 "> <!– HTML5 –>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!– HTML以前版本 –>
