網站開發中常見的編碼和亂碼問題的解決?

大家在做網頁的時候也許會發現,辛辛苦苦寫好的程式碼,在瀏覽器中預覽時卻顯示一大堆亂碼,這個時候開始頭痛了,怎麼解決呢,如果去網上搜索的話,一大堆關於編碼的知識弄得越來越糊塗,回頭一看程式碼寫的沒錯啊,但是為什麼呢?其實本人也是遇到了這個問題,然後研究了一段時間,所以現在分享出來,希望給大家一個清晰的思路,然後在這個基礎之上放心做網站,本文簡單介紹了UTF-8編碼和gb2312編碼的基本區別,然後通過兩款優秀的網頁程式碼編輯軟體Sublime Text2和Notepad++進行比較,提供一個比較好的解決方案,適用於做HTML、asp、php等型別的網頁時出現的編碼問題,下面開始吧!

工具/原料

電腦

Sublime Text、Notepad++等軟體

Sublime Text2的網頁編碼設定

首先介紹Sublime Text,這是一款優秀的程式碼編輯工具,最新版是Sublime Text2,功能非常多我就不多說了,業界的評價也是非常高,那麼我們首先來在電腦桌面上新建一個文字文件,來演示網頁程式設計中出現的問題。文字文件建好後,將"新建文字文件.txt"重新命名為靜態網頁檔案"wangye.html",這是彈出提示點選"確定"即可,這個時候電腦一定要設定好顯示副檔名。如下圖所示:

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

此時我們用Sublime Text2將這個wangye.html開啟。如圖所示就是Sublime Text2的環境介面,此時在裡面可以寫程式碼,這裡指出Sublime Text不支援gbk中文編碼。我們依次用gb2312編碼和utf-8編碼進行測試。

網站開發中常見的編碼和亂碼問題的解決

首先我們寫入簡單的網頁編碼如下圖所示,特別注意這段程式碼 這說明網頁是用gb2312也就是中文簡體進行編碼,此時瀏覽器也會用gb2312進行顯示�

網站開發中常見的編碼和亂碼問題的解決

我們將上面的內容儲存,按快捷鍵"Ctrl+S"即可儲存,我們用瀏覽器開啟預覽一下看有什麼結果�

網站開發中常見的編碼和亂碼問題的解決

結果我們看到了,網頁標題和內容都是亂碼,只有英文hello可以正確顯示,這是為什麼呢,這裡強調一下,Sublime Text預設編碼是UTF-8,通俗來講UTF-8是世界通用性的編碼,用途也是最廣泛的,而gb2312僅僅適用於中國。這個時候我們如果確實想用gb2312編碼怎麼辦呢,我們點�"檔案",然後找�"儲存編碼",單�"UTF-8包含BOM",這時關閉Sublime Text之後,再次開啟網頁會發現一切正常了。看下圖�

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

如果我們做網站的時候不用gb2312編碼,我們改成utf-8會怎麼樣呢,看下圖:

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

這個時候我們發現,� 標籤裡面的改成utf-8後,我們不管怎麼設定UTF-8還是UTF-8包含BOM顯示出來都很正常。下面我們總結一下用Sublime Text2編寫網頁的時候到底該如何編碼,編碼設定方法就是第五步的方法�

Sublime Text2不支援中文編碼,如果我們用gb2312進行編碼,需要設定編碼為UTF-8包含BOM,如果我們用utf-8進行編碼,設定UTF-8或者設定成UTF-8包含BOM都可以,但是推薦用UTF-8,就是不含BOM的純UTF-8。這是兩種編碼的相應設定方法。下面簡單介紹一下Notepad++這款軟體�

Notepad++下的網頁編碼設定

我們還是和前面一樣建立網頁檔案,在Notepad++環境下開啟。先用gb2312編碼並預覽,如圖所示:

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

我們發現沒有任何亂碼,一切正常。然後我們把gb2312改為utf-8儲存後試試看。看下面的圖�:

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

我們會發現,仍然顯示正常,這到底是為什麼呢,我們可以開啟編碼設定來看一下,我們看下面的圖片。單�"格式"就可以看到預設編碼�

網站開發中常見的編碼和亂碼問題的解決

我們看到預設編碼的選擇格式�"以UTF-8格式編碼",但是我們開始設定的是gb2312呀,其實注意了,在Notepad++和Sublime Text不一樣,Notepad++中,預設UTF-8編碼已經包含BOM,我們看到選擇項裡面還有一�"以UTF-8無BOM格式編碼",這一項才是純UTF-8格式的編碼,我們改成這一項試試。並把程式碼改為gb2312

網站開發中常見的編碼和亂碼問題的解決

網站開發中常見的編碼和亂碼問題的解決

我們會發現,這個時候網頁顯示也是亂碼,這是因為網頁程式碼的編碼和Notepad++中設定的實際編碼不同,所以瀏覽器按照gb2312解析時會出現錯誤。由此我們總結一下用Notepad++編寫網頁程式碼是,編碼的設定方法�

如果我們使用gb2312編碼,那麼相應的Notepad++中的格式編碼要設定為UTF-8這個是包含BOM的,一般預設即可不用設定。如果我們使用UTF-8編碼,那麼Notepad++中的格式設定�"以UTF-8格式編碼"或�"以UTF-8無BOM格式編碼"都可以,就是說我們預設就可以,但是推薦使用UTF-8無BOM格式編碼,這樣的話更符合國際標準�

注意事項

那麼以上就是我對於編碼問題所採取的方法,不僅侷限與以上兩款軟體,包括Dreamweaver這樣的大軟體設定也基本相同�

我們需要抓住的一箇中心就�:讓程式碼中的編碼與軟體設定的編碼格式相一致,程式� 標籤中的編碼是讓瀏覽器識別的,而軟體中設定的編碼是整個頁面的真實編碼。只有相一致瀏覽器才會正確解析出正常網頁�

如果我們自己做網站的話,如果只針對於國內那麼可以用gb2312進行編碼,如果我們製作的網站面向國內和國外還是推薦使用UTF-8進行編碼,以為這種編碼對於全球的瀏覽器顯示都不會出錯,這也是未來發展的一個趨勢,目前國內的大網站都是使用UTF-8編碼,預計使用UTF-8編碼的網站還在增多。所以應該根據自己開發網站的實際情況客觀的選擇編碼�

本文簡單淺顯的介紹了兩種用的比較多的編碼方法,希望能幫助大家解決亂碼的疑惑,也希望大家能在這個基礎上將網站做的更加出色!

相關問題答案