（注1：如果有問題歡迎留言探討生巡，一起學習！轉(zhuǎn)載請注明出處见妒，喜歡可以點個贊哦９氯佟）
（注2：更多內(nèi)容請查看我的目錄。）
1. 概覽
人體由各個器官部分組成须揣，比如大的類別劃分有頭腦盐股，身軀，四肢耻卡，小的有鼻子疯汁，眼睛，手指卵酪，每個器官都有自己的名字和作用幌蚊。html網(wǎng)頁與人體構(gòu)成一樣谤碳，只不過它是由一個個標簽組成。大到head溢豆，body蜒简，小到p，span漩仙，每個標簽都有其特性和功能搓茬。首先，我們來認識三個最基本的標簽：html队他，head和body卷仑。這是一個html文件不可或缺的三個標簽。
1.1 <html>標簽
<html>
</html>
這是一個html文件最重要也是最容易忽略的標簽麸折，瀏覽器如何識別是html锡凝，還是xml或是其他類型的文件呢？就像你如何知道你身邊的生物是一個人而不是其他種類的動物呢垢啼？不是通過后綴私爷，而是這個標簽html。html標簽用來標識一個html文檔膊夹，告訴瀏覽器用html的規(guī)則來進行解析衬浑，<html> 與 </html> 標簽限定了文檔的開始點和結(jié)束點。
那么如果你的文件只寫了這一段代碼放刨，保存后用瀏覽器運行工秩，會是怎樣的呢？一片空白进统≈遥可如果進入開發(fā)者模式，查看頁面的元素類型螟碎。你會發(fā)現(xiàn)html標簽內(nèi)部增加了head和body兩個標簽眉菱。是的，正如人需要有頭腦和身軀一樣掉分。html必須要有head和body俭缓。
1.2 <head>標簽
<html >
<head>
</head>
</html>
<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器酥郭。<head> 中的元素可以引用腳本华坦、指示瀏覽器在哪里找到樣式表、提供元信息等等不从。
文檔的頭部描述了文檔的各種屬性和信息惜姐，包括文檔的標題、在 Web 中的位置以及和其他文檔的關(guān)系等椿息。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者歹袁。
下面這些標簽可用在 head 部分：base,link,meta,script,style,title坷衍。稍后我們會詳細講解各標簽的具體作用。
1.3 <body>標簽
<html >
<head>
</head>
<body>
</body>
</html>
body 元素定義文檔的主體条舔。
body 元素包含文檔的所有內(nèi)容（比如文本惫叛、超鏈接、圖像逞刷、表格和列表等等。）
2. 標簽
2.1 為何有這么多標簽
一個網(wǎng)頁已經(jīng)有三個標簽了妻熊，尤其是head和body標簽夸浅，為什么不把所有的內(nèi)容都堆在這兩個標簽，而要創(chuàng)作那么多的標簽呢扔役？想象一下帆喇，你是用嘴喝水，用眼睛看東西亿胸，用手拿東西坯钦，用腳走路，那么我們?yōu)楹螞]有統(tǒng)一稱為用腦袋看東西侈玄，用腦袋吃東西呢婉刀，用身體拿東西，用身體走路序仙？這么說是否會讓你感覺奇怪突颊，雖然這種表述沒有錯誤，但是最大的缺點就是不夠精確潘悼。比如律秃，我需要你眨一下眼睛，我該怎么表述呢治唤，腦袋眨一下嗎棒动？顯然不可能。我們需要定義精細的標簽來操縱具體的部位宾添，瀏覽器也一樣船惨。
標簽是嵌套的，正如腦袋上有嘴巴缕陕，嘴巴有牙齒一樣掷漱。但是有的部位只能出現(xiàn)在特定的地方，比如嘴巴在腦袋上榄檬，有的卻可以存在在任何地方卜范，比如你的牙齒和你的手指頭都有骨骼。那么對于html而言鹿榜，哪些標簽是特定出現(xiàn)在某些地方的海雪，哪些又是可以存在于多個地方的呢锦爵？
2.2 head標簽能嵌套的標簽
head標簽里除了title以外的內(nèi)容不會顯示，這一點使大多數(shù)人都忽略了head標簽的重要性奥裸。很可能學習了前端很久的人险掀，讓他說清楚head里面具體能包含哪些標簽，以及這些標簽的作用的時候湾宙，大多數(shù)人能想到的就是樟氢，title，script侠鳄，link埠啃，style，還有一部分人會想到meta伟恶，但是極少數(shù)人能說清楚meta標簽的具體作用碴开。至于base，能說出這個的真的是很棒了博秫。當然它用得少潦牛，說不出來情有可原，但是頭部的標簽本就不多挡育，了解他們能使你對head的理解更加全面深入巴碗。
2.2.1 <title>標簽
用來定義網(wǎng)頁的標題。瀏覽器會以特殊的方式來使用標題即寒，并且通常把它放置在瀏覽器窗口的標題欄或狀態(tài)欄上良价。同樣，當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時蒿叠，標題將成為該文檔鏈接的默認名稱明垢。如圖所示：
2.2.2 <base>標簽
<base> 標簽為頁面上的所有鏈接規(guī)定默認地址或默認目標。
通常情況下市咽，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白痊银。
使用 <base> 標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的 URL施绎，而使用指定的基本 URL 來解析所有的相對 URL溯革。這其中包括 <a>、<img>谷醉、<link>致稀、<form> 標簽中的 URL。
另外俱尼，base標簽內(nèi)可以設(shè)置在何處打開頁面中所有的鏈接抖单。
如圖，大家不妨點一下頁面中的鏈接，然后去掉base看一下效果矛绘。
這里說一下base標簽中的屬性：（大多數(shù)標簽的屬性耍休，尤其是一些公共屬性，我會放到專門的章節(jié)去講货矮，特殊的屬性我會直接在標簽里面說明）
- href即為指定的基準URL羊精。
- target屬性規(guī)定在何處打開頁面上的所有鏈接，包括值：
- _blank：在新窗口中打開被連接文檔囚玫；
- _self：默認喧锦，在相同的框架中打開被鏈接文檔；
- _parent：在父框架打開被鏈接文檔抓督；
- _top：在整個窗口中打開被鏈接文檔燃少；
- framename：在指定框架中打開被鏈接文檔。
2.2.3 <meta>標簽
meta標簽可謂是head標簽內(nèi)部最重要的標簽了本昏，其擁有眾多的屬性，由于篇幅所限枪汪，這里簡單介紹一下涌穆。詳細了解可以參考這篇文章Http meta詳解。當然雀久，我說過再好的的東西那是別人的宿稀，自己理解下來并且重演一遍，才會收獲屬于自己的赖捌，下一篇我將專門講解這個標簽祝沸。
meta元素用來定義文檔的各種元數(shù)據(jù)，meta元素可以有多種用途越庇，但每個meta元素只能用于一種用途罩锐，如果需要使用不止一種，就需要在head元素中添加多個meta元素卤唉。下面來看一下其用途：
- 指明文件的編碼屬性涩惑，如：
<meta charset="utf-8" />
- 把 content 屬性關(guān)聯(lián)到一個名稱。如：
<meta name="author" content="Your Name"/>
- 把 content 屬性關(guān)聯(lián)到 HTTP 頭部桑驱。如：
<meta http-equiv="Refresh" content="5;url=http://www.reibang.com/u/7a62ab344c39" />
5秒后會定義到我的簡書主頁竭恬。
- scheme 屬性設(shè)置或返回用于解釋 content 屬性的值的格式。
<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />
2.2.4<style>標簽
<style> 標簽用于為 HTML 文檔定義樣式信息熬的。詳細的樣式信息今后會慢慢講到痊硕。
2.2.5link標簽
<link> 標簽定義文檔與外部資源的關(guān)系。<link> 標簽最常見的用途是鏈接樣式表押框，除此以外還有其他的用途岔绸。
- 鏈接外部樣式表
<link rel="stylesheet" type="text/css" href="theme.css" />
- 為頁面定義網(wǎng)站標志
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
瀏覽器載入HTML頁面時，會加載并顯示網(wǎng)站標志。
注：如果網(wǎng)站標志文件位于/favicon.ico（即Web服務器的根目錄）亭螟，那就不必用到link元素挡鞍，大多數(shù)瀏覽器在載入頁面時都會自動請求這個文件，就算沒有l(wèi)ink元素也是如此预烙。shortcut icon墨微，特指瀏覽器中地址欄左側(cè)顯示的圖標，一般大小為16x16扁掸，后綴名為.icon翘县。
- 預先獲取資源
可以要求瀏覽器預先獲取預計很快就要用到的資源。
<link rel="prefetch" href="/page2.html"/>
注：目前不是所有瀏覽器都支持該功能谴分。
2.2.6 <script>標簽
<script> 標簽用于定義客戶端腳本锈麸，比如 JavaScript。
script 元素既可以包含腳本語句牺蹄，也可以通過 src 屬性指向外部腳本文件忘伞。
2.3 body標簽能嵌套的標簽
body 元素定義文檔的主體。
body 元素包含文檔的所有內(nèi)容（比如文本沙兰、超鏈接氓奈、圖像、表格和列表等等鼎天。）
除了title舀奶，base，meta標簽必須位于head斋射，其余標簽均可位于body育勺，但是style和link標簽最好位于head，因為html解析順序是從上到下罗岖，可以防止閃屏涧至。另外，這也是一種約定俗成桑包，就像如果你拜托別人為你拿一杯水化借，你是希望對方用手遞給你，還是用嘴叼給你呢捡多？雖然效果一樣蓖康，但肯定用手會更方便，感覺更好垒手。
參考
W3school-HTML教程
HTML5: 理解head
其他參考鏈接在文中已給出蒜焊。
