作者tonilin (小強)
看板Web_Design
標題[心得] head 裡面該放什麼？怎麼放？
時間Mon Nov 5 21:10:10 2012
網誌版：
http://blog.roachking.net/blog/2012/11/05/html5-HEAD-/
因為是自己的心得，所以可能會有錯誤。
如果有看到錯誤的話麻煩跟我講一聲或是拿出來討論，大家一起進步XDD
HTML 裡的 <head> 以前一直讓我很困惑，從小時候開始學 HTML，
坊間的書和中文的教學網站，在這邊通常都是草草帶過，
而小時候又不求甚解，反正瀏覽器容錯性這麼高，寫錯還是跑得出來，
長大以後，對一些小細節就有特別去注意，也看得懂原文的網站，
所以在這邊整理一些 <head> 該放什麼東西，以及順序該怎麼排。
<title>
<head> 裡面有一個必要的標籤，那就是<title>
所以一開始看起來應該會像這樣：
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
如果不打 <title> 呢？ 瀏覽器不會跟你說你錯了，但是會自動幫你填入<title>，
至於填入什麼，不同的瀏覽器有不同的填法。但是因為這行是必要的，
所以送到 W3C HTML validation，它會跟你說你錯了。
Encoding
一般不指定 Encoding 時，瀏覽器會根據伺服器送過來的 header
或是用其他方法來判定。 但是這個判定不一定會是正確的，
所以我們會在 <head> 告訴瀏覽器，我們使用的 Encoding 方式。
至於要用什麼編碼方式，在以往 UTF-8 還沒出現的時候，
網路上的編碼非常亂， 甚至現在有一些比較老牌的網站還是在用那些 Encoding，
網頁上如果出現其他語言，就非常可能變成亂碼。 所以在現代的網頁裡，
幾乎都是使用 UTF-8。
那位置要放在哪呢？為了避免 IE 的安全性因素，
編碼必須出現在最前面的1024 bytes。所以我們把它放在最前面。
所以看起來應該會像：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World!</title>
</head>
PS1:如果你的編碼選擇 UTF-8 ，那你的文件在存檔的時候記得存成
UTF-8 without BOM
PS2:你可能看過各式各樣的寫法，但是在 HTML5 裡面你只需要像上面這樣
簡潔有力就可以了！
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
為了萬惡 IE ，我們加了這行，這行做了兩件事情：
1. 告訴 IE 要用最新的版本！
2. 如果用戶有安裝 Google Chrome Frame，就使用 Google Chrome Frame！
這是一個 IE 外掛，可以讓 IE 使用 Chrome 的 render 引擎。
不過加上這行可能會在一些需要認證的網站出現錯誤，所以建議讓伺服器
用 header 的方式來送出。
如果你不介意，那加上去會是這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World!</title>
</head>
Description
<meta name="description" content="網站的描述。。。">
這是一個描述這個網站的標籤，搜尋引擎或是一些 spider 會用到這個資訊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World!</title>
<meta name="description" content="網站的描述。。。">
</head>
VIEWPORT
<meta name="viewport" content="width=device-width">
現在行動裝置盛行，但是行動裝置為了瀏覽方便，所以在瀏覽器寬度的設置上，
會讓沒有支援行動裝置的網站看起來比較舒服， 如果你的網站有做
Responsive Design ，記得加上這行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World!</title>
<meta name="description" content="網站的描述。。。">
<meta name="viewport" content="width=device-width">
</head>
Favicon
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
接著我們會放入 Favicon ，也就是網址列上面那個小 icon 。
一般瀏覽器就算你不寫這行，瀏覽器還是會去根目錄下尋找 favicon.ico 。
而且不管有沒有找到，瀏覽器通常不會再找第二次。
所以如果你有更新 Favicon ，記得加上這行，並改檔名，
讓每個瀏覽器都能抓到最新版本。
在這裡你還可以放一些專屬於 APPLE 裝置的 icon。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World!</title>
<meta name="description" content="網站的描述。。。">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
Javascript 和 CSS
接著我們會告訴瀏覽器要載入那些 CSS 和 Javascript 檔案。
先載入 CSS 還是先載入 Javascript？
由於 <script> 標籤如果沒加上 async 屬性，會 block 住瀏覽器，
瀏覽器得讀完這個 script 才會繼續下一個動作，
而 <link> 標籤則沒有這個問題，所以先讀 CSS 再讀Javascript，
就可以讓瀏覽器同時下載 CSS 和 Javascript！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Hello World!</title>
<meta name="description" content="網站的描述。。。">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/your-style.css">
<script src="js/your-script.js"></script>
</head>
如果要讓 Script 同步下載呢？
async 雖然可以讓 script 同步下載，但是如果沒管理好相依性是很可怕的！
譬如說：
你寫了一段 script 用到 jquery 的 ready 方法，但是因為加了 async ，
瀏覽器還沒把 jquery.js 讀進來， 這個時候就會出錯了！
解決的方法就是使用一些延後讀取 Javascript 的套件，像 head.js 或是 require.js。
參考資料：
HTML5 ★ BOILERPLATE
The HTML5 spec
Google Page Speed
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.129.57
※ 編輯: tonilin 來自: 175.180.129.57 (11/05 21:11)
→ ducksteven:沒有特別需求的話script應該要放在</body>的前面 11/05 21:14
推 awashharp:推！很不錯的教學兼boilerplate！ 11/05 21:14
推 LPH66:我記得以前看過不知哪裡的文章說建議 charset 放在 title 前 11/05 21:59
→ LPH66:因為 title 是文字 好像 IE 會根據這些文字猜編碼不理meta 11/05 22:00
推 johnny94:超實用! 11/05 22:46
→ Rplus:想請教， X-UA-Compatible 這有必要加嗎? 或問:什麼情況該加 11/05 23:48
→ tonilin:建議加比較好，建議用server送出header的方式加 11/05 23:48
→ tonilin:之前在用IE測試網頁的時候，發現明明兩台電腦都是IE9 11/05 23:49
→ tonilin:但是跑出來的不一樣，後來才發現其中一台不是用ie9的引擎 11/05 23:50
→ tonilin:如果要避免這情形，就要加這一行 11/05 23:50
推 davidsky:X-UA-Compatible有的超蠢的bug是如果不是放在head之下的 11/06 00:28
→ davidsky:第一個項目的話IE會當作沒看到....偉哉IE 11/06 00:29