HTML中head標籤內的使用標籤詳解
一、head包含元素簡介
<head>元素包含了所有的頭部標籤元素，在head中你可以插入指令碼（scripts）,樣式檔案（CSS）,及各種meta資訊，可以新增到頭部區域的元素為
<title> 定義網頁的標題(瀏覽器工具欄標題，搜素引擎結果頁面標題，收藏夾標題)
<meta> 用來定義頁面的特殊資訊（頁面關鍵字，頁面描述） ，描述了一些基本的元資料
<link> 定義了文件與外部資源之間的關係，通常用來引入外部樣式（css檔案）
<style>用來定義元素的css樣式
<script> 用來定義頁面的JavaScript 程式碼 也可用來引入檔案
<base> 可以用來統一設定當前頁面上的超連結的跳轉方式 使用了 <base> 標籤，則必須具備 href 屬性或者 target 屬性或者兩個屬性都具備
<noscript>是一個相當古老的標籤，其被引入的最初目的是幫助老舊瀏覽器的平滑升級更替，因為早期的瀏覽器並不能支援 JavaScript。noscript 標籤在不支援JavaScript 的瀏覽器中顯示替代的內容。這個元素可以包含任何 HTML 元素。這個標籤的用法也非常簡單：
<noscript>
<p>本頁面需要瀏覽器支援（啟用）JavaScript</p> </noscript>
二、詳解 1、<title>
定義文件的標題，它是 head 部分中唯一必需的元素。
<html>
<head>
<title>我的第一個HTML頁面</title>
</head>
<body>
<p>body 元素的內容會顯示在瀏覽器中。</p>
<p>title 元素的內容會顯示在瀏覽器的標題欄中。</p>
</body>
</html>
瀏覽器會以特殊的方式來使用標題，並且通常把它放置在瀏覽器視窗的標題欄或狀態列上。同樣，當把文件加入使用者的連結列表或者收藏夾或書籤列表時，標題將成為該文件連結的預設名稱。
2、<base>
<base>標籤為頁面上的所有連結規定預設地址或預設目標。
通常情況下，瀏覽器會從當前文件的URL中提取相應的元素來填寫相對URL中的空白。
使用<base>標籤可以改變這一點。瀏覽器隨後將不再使用當前文件的URL，而使用指定的基本URL來解析所有的相對URL。這其中包括 <a>、<img>、<link>、<form>標籤中的 URL。
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>影象的地址為相對地址。由於我們已經在 head 部分規定了一個基準 URL，瀏覽器將在如下地址尋找圖片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>請注意，連結會在新視窗中開啟，即使連結中沒有 target="_blank" 屬性。這是因為 base 元素的 target 屬性已經被設定為 "_blank" 了。</p>
</body>
</html>
<base>必需的屬性：href
href，值為URL，規定頁面中所有相對連結的基準URL。
<base>可選的屬性：target
target，值為_blank、_parent、_self、_top、framename等，表明在何處開啟頁面中所有的連結。比如”_blank”意為在新視窗中開啟。
3、<link>
<link>連結一個外部樣式表。屬於在HTML中插入CSS樣式表的三種方法之一。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<link>的主要屬性：href，rel，type，charset
charset，指明被連結文件的字符集，如UTF-8。但是幾乎沒有主流瀏覽器支援 link標籤的charset 屬性。
在下面的例子中，charset 屬性指示被連結文件是用英文編寫的：
<head>
<link href="shanghai.htm" rel="parent" charset="en" />
</head>
href，規定被連結文件的位置（URL）。
這個不解釋了。
rel 屬性指示被連結的文件是一個樣式表。它的屬性值只有 “stylesheet” 得到了所有瀏覽器的支援。其他值只得到了部分地支援。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
type 屬性規定被連結文件的 MIME 型別。該屬性最常見的 MIME 型別是 “text/css”，該型別描述樣式表。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
4、<script>
<script> 標籤用於定義客戶端指令碼，比如 JavaScript。
script 元素既可以包含指令碼語句，也可以通過 src 屬性指向外部指令碼檔案。
必需的 type 屬性規定指令碼的 MIME 型別。
JavaScript 的常見應用時影象操作、表單驗證以及動態內容更新。
直接包含指令碼語句
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
通過 src 屬性指向外部指令碼檔案
<script type="text/javascript" src="myscripts.js"></script>
<script>必需的屬性：type
type，規定指令碼的 MIME 型別。
對於不支援指令碼的瀏覽器：
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>不支援 JavaScript 的瀏覽器將顯示 noscript 元素中的文字。</p>
</body>
</html>
5、<style>
<style> 標籤用於為 HTML 文件定義樣式資訊。
在HTML中插入CSS樣式表的另外兩種方法都是通過style完成的——內部樣式表、內聯樣式。只不過內部樣式表用的是style標籤<style>，內聯樣式用的是style屬性。
內聯樣式
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
內部樣式表
<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>
也可以通過“id選擇器”和“class選擇器”進行：
id選擇器
<!DOCTYPE html>
<html>
<head>
<style>
#liuhaibo
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="liuhaibo">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
class選擇器
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標題居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
你也可以指定特定的HTML元素使用class。
在以下例項中, 所有的 p 元素使用 class=”center” 讓該元素的文字居中，而h1則不可以。
<!DOCTYPE html>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
<style>必需的屬性：type
type，唯一可能的值是“text/css”，規定樣式表的 MIME 型別。
也可以通過style標籤建立一個沒有下劃線的連結：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">
這是一個連結！
</a>
</body>
</html>
6、<meta>
<meta>元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。元資料總是以“名稱/值”的形式被成對傳遞的。
<meta>標籤位於文件的頭部，不包含任何內容。<meta>標籤的屬性定義了與文件相關聯的“名稱/值”對。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
</head>
<meta>必需的屬性：content
content，值為一些文字，定義了與http-equiv或name屬性相關的元資訊。元資料總是以名稱/值的形式被成對傳遞的。
eg：
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta>主要的可選屬性：http-equiv、name
http-equiv，值為content-type、expires、refresh、set-cookie等，把 content 屬性關聯到 HTTP 頭部。
http-equiv 屬性為“名稱/值”對提供了名稱。並指示伺服器在傳送實際的文件之前先在要傳送給瀏覽器的報文頭部包含“名稱/值”對。
eg：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
重定向（用於網頁搬家）：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
描述關鍵詞：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
name，值為author、description、keywords、generator、revised、others等，把 content 屬性關聯到一個名稱。
HTML 和 XHTML 標籤都沒有指定任何預先定義的 名稱。通常情況下，您可以自由使用對自己和源文件的讀者來說富有意義的名稱。
“keywords” 是一個經常被用到的名稱。它為文件定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文件進行分類。
eg：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="Refresh" Content="3">-->
<!--自動重新整理 每過一秒重新整理-->
<!--<meta http-equiv="Refresh" Content="2; Url=https://www.baidu.com">-->
<!--自動跳轉-->
<meta name="keywords" content="帥帥，小哥哥，大帥">
<!--關鍵字-->
<meta name="description" content="我叫帥帥，我的代號是1111，二十歲的窮逼青年">
<!--頁面描述-->
<!--預設開啟的瀏覽器的版本-->
<!--<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;IE=IE7">-->
<title>Title</title>
<!--小圖示-->
<link rel="shortcut icon" href="icon.jpg">
</head>
只有title標籤<title>、script標籤<script>和style標籤<style>有完整的關閉標籤。