[心得] head 裡面該放什麼？怎麼放？

看板Web_Design作者tonilin (小強)時間13年前 (2012/11/05 21:10)推噓4(4推 0噓 10→)

留言14則, 7人參與討論串1/1

網誌版：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

11/05 21:14, , 1^F

11/05 21:14, 1^F

推

awashharp

11/05 21:14, , 2^F

11/05 21:14, 2^F

推

LPH66

11/05 21:59, , 3^F

11/05 21:59, 3^F