- HTML5+ CSS3+JavaScript 網頁設計實戰（視頻教學版）
- 常新峰
- 1543字
- 2019-12-12 17:09:06
2.3 head標簽
本節繼續介紹head標簽元素的概念及用法，其在HTML網頁中有著非常重要的作用。
2.3.1 基本概念
head標簽元素用于定義HTML網頁的頭部，其是所有頭部標簽元素的容器。在head標簽元素中，可以加入元信息（meta）描述、添加CSS層疊樣式表（CSS）、引用外部JavaScript腳本文件（可選），定義HTML網頁標題以及與其他文檔關系等功能。另外，絕大部分在HTML網頁頭部定義的數據都不會在頁面內容中進行顯示。
2.3.2 功能作用
head標簽元素位于HTML網頁的頭部，是以<head>作為開始標記，并以</head>作為結束標記之間的內容。一般來講，head頭部中包含meta、base、link、script、title等常用標簽元素，這些標簽元素的詳細說明如下：
- meta標簽元素可以定義的內容十分廣泛，譬如HTML網頁介紹、HTML網頁關鍵字、HTML網頁編碼、頁面作者、自動跳轉定義以及robots協議等內容，均可以放置在其中。
- base標簽元素是定義HTML網頁默認打開方式的聲明。
- link標簽元素用于定義目標文件鏈接，包括對外部層疊樣式表（CSS）文件的引用、對外部腳本（JS）文件的引用以及對favicon.ico圖標的引用等。
- script標簽元素既可以用于引入外部腳本（JS）文件，也可以定義嵌入HTML網頁內部的腳本代碼。
- style標簽元素則用于定義直接嵌入網頁的層疊樣式表（CSS）代碼。
- title標簽元素用于定義HTML網頁的唯一標題。
2.3.3 使用方法
下面是一個使用head標簽元素的HTML 5示例代碼（詳見源代碼ch02/ch02-html-head.html文件）。
【代碼2-2】
【代碼解析】
第03～19行代碼就是使用head標簽元素的方法。為了便于讀者全面地了解head標簽元素的使用方法，該代碼段將HTML網頁頭部可能用到的標簽元素盡可能地包含了進去。下面逐一對這些標簽元素進行介紹。
第04～10行代碼是對meta標簽元素的使用，meta是HTML網頁頭部的一個輔助性標簽元素。meta標簽元素共有兩個屬性，分別是http-equiv屬性和name屬性。其中，http-equiv屬性相當于HTTP協議文件頭的作用，通過該屬性可以向瀏覽器回傳數據信息，以幫助準確地顯示網頁內容，其屬性值放置在與之對應的content屬性中。而name屬性主要用于描述網頁，包括分類信息的內容以及便于搜索引擎robots協議查找的內容，其屬性值同樣放置在與之對應的content屬性中。
第04行代碼中http-equiv屬性定義為"Content-Type"，Content-Type表示設定的顯示字符集，本示例代碼中對應的content屬性定義為"text/html; charset=utf-8"，表明本HTML網頁設定的顯示字符集為"utf-8"，為通用的Unicode編碼格式（utf-8編碼支持中英文字符，相比于傳統gb2312中文編碼更通用）。
第05行代碼中http-equiv屬性定義為"Content-Language"，Content-Language表示HTML網頁所設定的頁面語言，本示例代碼中對應的content屬性定義為"zh-cn"，表明本HTML網頁設定的頁面語言為簡體中文，如果使用繁體中文則為"zh-tw"，而使用"en-us"則表示英語（美國）。
第06行代碼中name屬性定義為"author"，author表示網頁作者，本示例代碼中對應的content屬性定義為"king"。
第07行代碼中name屬性定義為"revised"，revised表示網頁最后一次更改的作者及時間，本示例代碼中對應的content屬性定義為"king,01/15/2017"。
第08行代碼中name屬性定義為"generator"，generator表示創建和編輯網頁使用的工具軟件，本示例代碼中對應的content屬性定義為"WebStorm 10.0.4"。
第09行代碼中name屬性定義為"description"，description表示對網頁功能、內容的相關描述，是屬于比較重要的一個meta屬性，本示例代碼中對應的content屬性定義為"HTML 5文檔head標簽元素使用"。
第10行代碼中name屬性定義為"keywords"，keywords表示網頁的關鍵詞，本示例代碼中對應的content屬性定義為"HTML 5, CSS, JavaScript"。
第11行代碼是對link標簽元素的使用，link用于定義文檔與外部資源的關系，最常見的用法就是定義外部鏈接層疊樣式表（CSS）。在本行代碼中定義了保存在css目錄下的外部樣式表，文件名稱為"style.css"。
第12～14行代碼是對style標簽元素的使用，script用于定義直接嵌入網頁的層疊樣式表（CSS）代碼。先不管這段代碼具體實現了什么功能，只要知道第13行代碼是對<h1>標簽元素進行了樣式定義就可以了。
第15～17行代碼是對script標簽元素的使用，script用于引入外部JavaScript腳本文件或內部定義的JavaScript腳本代碼。其中，第16行代碼定義了一行腳本代碼，用于在頁面主體中輸出一行文本信息。
第18行代碼使用<title>標簽元素定義了網頁標題是“HTML 5之網頁標題”。
下面運行頁面，如圖2.2所示。
圖2.2 head標簽