一、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>有完整的關閉標簽。