今天做了兩個靜態html頁面，在瀏覽器中測試的時候，發現其中一個html頁面的頂部多出了些許空白，而另一個頁面顯示正常。在瀏覽器中進行了審查對比，發現有空白的那個頁面的head標簽裡面的元素全部跑到了body裡面，而且body中還多出了一個，當把這個東西刪除之後就正常了。然後又在編輯器中，對比了一下 ...
今天做了兩個靜態html頁面，在瀏覽器中測試的時候，發現其中一個html頁面的頂部多出了些許空白，而另一個頁面顯示正常。在瀏覽器中進行了審查對比，發現有空白的那個頁面的head標簽裡面的元素全部跑到了body裡面，而且body中還多出了一個
，當把這個東西刪除之後就正常了。然後又在編輯器中，對比了一下這兩個頁面的源碼，發現head部分完全一樣，body中的代碼也沒有什麼異常。最後通過查閱相關資料，才發現原來是編碼的問題。
頁面的編碼如果是UTF-8 + BOM，會在body開頭處加入一個可見的控制符，導致頁面頭部會出現一個空白。這種編碼方式一般會在windows操作系統中出現，比如記事本編輯器，在保存一個以UTF-8編碼的文件時，會在文件開始的地方插入三個不可見的字元（0xEF 0xBB 0xBF，即BOM）。它是一串隱藏的字元，用於讓記事本等編輯器識別這個文件是否以UTF-8編碼。對於一般的文件，這樣並不會產生什麼麻煩。但對於html來說，BOM是個大麻煩。因為瀏覽器在解析html頁面時，並不會忽略BOM，所以在解析html文件時，會把BOM作為該文件開頭正文的一部分，這串字元也將會被直接執行（在頁面中並不顯示）出來。由此造成即使頁面的 top或者padding 設置為0，也無法讓整個網頁緊貼瀏覽器頂部，因為在html一開頭有這3個隱藏字元！
解決辦法：
在各種編輯器中，都有相應的保存utf-8編碼的方法，我用的是sublime text，點擊file—>save with Encoding 選擇utf-8就可以了，詳細步驟如下圖所示：
