今天做了两个静态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就可以了，详细步骤如下图所示：
