隨便打開一個網頁，右擊查看網頁源代碼，總能看到<head>…</head>封閉標籤，在裏面通常會包含5類標籤：title、link、script、meta、style。這5類標籤看着都挺熟悉的哈，那麼在web前端技術中具體要怎麼使用，規則是什麼，在我學習的時侯，我做了筆記整理，希望有幫助。
1. title 標籤
title是一個封閉標籤，在head中是成對出現。也就是<title>…</title>。在打開一個網頁時，網頁上方的文字就是title部分。
Title是對整個頁面的核心思想的總結，也是seo非常重要的設置部分。Title部分儘量要多次出現關鍵詞：核心關鍵詞和長尾關鍵詞。具體怎麼寫title部分，根據需求而定。這個沒有標準。
2. link 標籤
Link標籤放置在<head>…</head>中，作用是鏈接外部css文件和收藏夾圖標。最常用的用法是鏈接外部樣式表，也就是css文件。link寫法是“<link … />”
例如：
引入外部css樣式：<link rel=”stylesheet” type=”text/css” href=”http://www....... /style.css” />
設置網站小圖標（收藏圖標）：<link rel=”shortcut icon” type=”image/x-icon” href="http://....../favicon.ico" />
Rel：定義的是該文檔與被鏈接文檔之間是什麼關係“這裏是外部css樣式表，即stylesheet。”
type：規定外部鏈接文檔是什麼打開類型，link中的css 這樣寫法“type=”text/css”。”link中的網站小圖標寫法“ type=”image/x-icon” 。”
href：是外部css地址。
3. script標籤
用在頭部head標籤內，作用是調用外部js文件。該標籤是一個封閉標籤，寫法和div標籤一樣。另外，該標籤不僅僅可以在頭部head標籤內使用，在body標籤內部任何位置都可以使用。最終實現的效果都是一樣的，通常是用在head標籤內。
例如：<script src=”http://www...../index.js” type=”text/javascript”></script>
Src中是調用js文件地址。Type規定調用js文件的打開方式。
4. meta標籤
Meta標籤的作用通常是用作網頁關鍵詞、網頁描述、作者、網頁編碼、robots、自動跳轉等說明性標籤。這樣寫法隨處可見，任何一個網頁中都有meta標籤的使用。
http-equiv
http-equiv相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
| 值 | 描述 | 例子 |
| content-type | 設定頁面使用的字符集 |
<meta http-equiv="content-Type" content="text/html; charset=utf-8"> GB2312時，代表說明網站是採用的編碼是簡體中文； ISO-8859-1時，代表說明網站是採用的編碼是英文； UTF-8時，代表世界通用的語言編碼； PS：html5頁面的做法是直接使用<meta charset="utf-8"/> |
| X-UA-Compatible | IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分兼容問題。 |
<meta http-equiv="X-UA-Compatible" content="IE=7">以上代碼告訴IE瀏覽器，無論是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。 <meta http-equiv="X-UA-Compatible" content="IE=8">以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。 <meta http-equiv="X-UA-Compatible" content="IE=edge">以上代碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame. PS：谷歌添加一個插件：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器。 |
| expires | 設定網頁的過期時間。 |
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> PS：必須使用GMT的時間格式 |
| refresh | 自動刷新並指向新頁面。 |
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> PS：2代表頁面停留2秒後跳轉到後面的網址上 |
| set-cookie | 如果網頁過期，那麼自動刪除本地cookie。 |
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> PS：必須使用GMT的時間格式。 |
| windows-target | 強制頁面在當前窗口中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用 |
<meta http-equiv="Window-target" content="_top"> |
| cache-control | 緩存機制 |
<meta http-equiv="cache-control" content="no-cache"> Public：指示響應可被任何緩存區緩存。 Private：指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。 no-cache：指示請求或響應消息不能緩存。 no-store：用於防止重要的信息被無意的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。 max-age：指示客戶機可以接收生存期不大於指定時間（以秒爲單位）的響應。 min-fresh：指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。 max-stale：指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那麼客戶機可以接收超出超時期指定值之內的響應消息。 |
name
name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
| 值 | 描述 | 例子 |
| author | 標註網頁的作者 |
<meta name="author" content="dashen" /> |
| keywords | 頁面關鍵詞，用於被搜索引擎收錄 |
<meta name="keywords" content="新聞,新聞中心, 新聞頻道"> |
| description | 頁面描述，用於搜索引擎收錄 |
<meta name="description" content="新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站"> |
| viewport | 用於控制頁面縮放 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">適應移動端 |
| renderer | 指定雙核瀏覽器默認以何種方式渲染頁面。 |
<meta name="renderer" content="webkit">//默認webkit內核 <meta name="renderer" content="ie-comp">//默認IE兼容模式 <meta name="renderer" content="ie-stand">//默認IE標準模式 PS：360瀏覽器支持 |
| generator | 說明網站的採用的什麼軟件製作 |
<meta name="generator" content="Microsoft"/> |
| revised | 網頁文檔的修改時間 |
<meta name="revised" content="設計網, 6/24/2015"/> |
| robots | 用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 |
<meta name="robots" content="none"/> 取值：all|none|index|noindex|follow|nofollow, 默認all all：文件將被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索，但頁面上的鏈接可以被查詢； nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。 |
| copyright | 網站版權信息 |
<meta name="copyright" content="本頁版權XXX所有。All Rights Reserved" /> |
5. style標籤
常見Style標籤作爲放置CSS樣式與放置javascript（js）代碼標籤。
首先<style></style>是一對有開始與結束的閉合標籤。
5.1 放置CSS樣式
<style type="text/css">…</style>中間用於放CSS樣式代碼。
在HTML中CSS代碼只有放置在其<style type="text/css">標籤內才能生效。
5.2 放置JS代碼
<style type="text/javascript">…</style>
在HTML中JS代碼一般放入<style type="text/javascript">標籤內。