深入解析head標籤中常用的頭部標籤

HTML 中的 <head> 標籤是所有頭部標籤的容器，這些頭部標籤用來定義有關 HTML 檔案的後設資料（描述資料的資料）以及所需資源的參照（例如 CSS 樣式檔案、JavaScript 指令碼檔案），對檔案能夠在瀏覽器中正確顯示起到了非常重要的作用。根據我們的需求，可以在 HTML 頭部定義大量的後設資料，也可以定義很少或者根本就不定義。雖然頭部標籤是 HTML 檔案的一部分，但其中的內容並不會顯示在瀏覽器中。

在 <head> 標籤中可以使用的頭部標籤有 <title>、<base>、<link>、<style>、<meta>、<script> 和 <noscript> 等，下面就來簡單介紹一下它們。

1、<title> 標籤

<title> 標籤用來定義 HTML 檔案的標題，只有包含 <title> 標籤的檔案才算是一個有效的 HTML 檔案。另外，一個 HTML 檔案中僅允許存在一個 <title> 標籤，並且 <title> 標籤必須放置在 <head> 標籤中。

注意，在 <title> 標籤內部僅允許包含純文字內容，不能包含其他 HTML 標籤。

<title> 標籤的主要作用如下所示：

在瀏覽器標題列或者工作列中顯示標題；
當將頁面新增到收藏夾（書籤）時提供標題；
在搜尋結果中顯示頁面標題。

下面的範例演示瞭如何在 HTML 檔案中使用 <title> 標籤：

<head>
    <meta charset="utf-8">
    <title>TW511.COM-教學_手冊_視訊-免費php線上學習平臺</title>
</head>

<title> 標籤的內容必須與當前檔案有關，並且不應該過長，中文頁面請儘量控制在 30 個字元（包括空格）以內。

2、<base> 標籤

<base> 標籤用於為頁面中所有相對連結指定一個基本連結，當您設定了基本連結後，當前頁面中的所有相對連結都會使用這個基本連結作為字首，如下例所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>&lt;base&gt;標籤演示</title>
    <base href="https://www.php.cn/">
</head>
<body>
    <ul>
        <li><a href="course.html">視訊教學</a></li>
        <li><a href="course/type/3.html">入門教學</a></li>
    </ul>
</body>
</html>

上面的範例中第一個 <li> 標籤中的超連結會被解析為「https://www.php.cn/course.html」，第二個 <li> 中的超連結會被解析為「https://www.php.cn/course/type/3.html」。

注意，HTML 檔案中的 <base> 標籤必須出現在任何參照外部資源的標籤之前，而且一個 HTML 檔案中僅允許定義一個 <base> 標籤。

3、<link> 標籤

<head>
    <title>此處書寫標題</title>
    <link rel="stylesheet" href="common.css">
</head>

HTML <head> 標籤中可以包含任意數量的 <link> 標籤。

擴充套件：參照外部 CSS 樣式表有兩種，link和@import

@import在<style>標籤中進行宣告的

<style type="text/css">
  @import url("css檔案路徑");
</style>

簡單範例：

css外部樣式表 style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

HTML檔案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link標籤或@import的應用</h1>
		<p>外部定義CSS樣式表以.CSS為擴充套件名檔案，然後在頁面中通過link標籤或@import連結到頁面中。</p>
	</body>
</html>

實現效果：

link和@import的區別：

1、從屬關係區別

@import是 CSS 提供的語法規則，只有匯入樣式表的作用；link是HTML提供的標籤，不僅可以載入 CSS 檔案，還可以定義 RSS、rel 連線屬性等。

2、載入順序區別

載入頁面時，link標籤引入的 CSS 被同時載入；@import引入的 CSS 將在頁面載入完畢後被載入。

3、相容性區別

@import是 CSS2.1 才有的語法，故只可在 IE5+ 才能識別；link標籤作為 HTML 元素，不存在相容性問題。

4、DOM可控性區別

可以通過 JS 操作 DOM ，插入link標籤來改變樣式；由於 DOM 方法是基於檔案的，無法使用@import的方式插入樣式。

4、<style>標籤

使用 <style> 標籤可以在 HTML 檔案中嵌入 CSS 樣式，需要注意的是在 <style> 標籤中定義的樣式僅對當前 HTML 檔案有效。範例程式碼如下：

<head>
    <title>此處書寫標題</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

注意：對於檔案中的唯一樣式可以使用 <style> 標籤，但對於在多個檔案中通用的樣式，使用外部樣式表更為合適。

5、<meta> 標籤

1) 定義字元集

<meta charset="UTF-8">

charset 屬性用來指定 HTML 檔案的字元編碼，上面的範例中，我們將檔案的字元編碼設定為了「UTF-8」。

2) 定義頁面描述

<meta name="description" content="TW511.COM提供大量免費、原創、高清的php視訊教學，並定期舉行公益php培訓！可邊學習邊線上修改範例程式碼，檢視執行效果！php從入門到精通，一站式php自學平臺！">

定義頁面的描述資訊有利於搜尋引擎的搜尋。

<title> 標籤定義檔案標題，name="description" 定義檔案描述，描述的長度通常大於標題。

3) 定義關鍵字

<meta name="keywords" content="php教學,php入門教學,php視訊教學,php原始碼下載,php手冊">

關鍵字用於為搜尋引擎提供與頁面有關的資訊。

4) 定義頁面作者

<meta name="author" content="PHP中文網">

通過某些內容管理系統可以自動提取作者資訊。

5) 重新整理頁面

<meta http-equiv="refresh" content="30">

上例中的程式碼用於向瀏覽器傳送一個指令，使瀏覽器在經過指定的時間間隔（30 秒）後自動重新整理頁面。在 content 屬性中除了可以指定時間間隔外，還可以再指定一個連結，這時頁面將在指定的時間後重定向到連結所指向的頁面，如下例所示：

<meta http-equiv="refresh" content="10; url=https://www.php.cn/">

6、<script> 標籤

通過script標籤嵌入JavaScript 指令碼程式碼或鏈入指令碼檔案

範例程式碼如下：

<head>
    <title>PHP中文網</title>
    <script>
        document.write("PHP中文網")
    </script>
</head>

<head>
    <script src="js/test.js"></script>
</head>

7、<noscript> 標籤

當使用者的瀏覽器不支援 JavaScript 指令碼或者禁用 JavaScript 指令碼時，可以在 <noscript> 標籤中定義一些內容來替代不能執行的 JavaScript 指令碼或者給使用者一些提示。除了 <script> 標籤外，在 <noscript> 標籤中可以包含任何 HTML 元素，如下例所示：

<head>
    <title>PHP中文網</title>
    <noscript>
        <p>您的瀏覽器不支援 JavaScript 或者您禁用了 JavaScript，請<a href="https://www.php.cn/">點選這裡</a>瞭解如何啟用 JavaScript。</p>
    </noscript>
</head>