趣談字符編碼

在瀏覽器上查看網(wǎng)頁,偶爾會看到一些網(wǎng)站出現(xiàn)亂碼的情況塞赂。關(guān)于瀏覽器展示亂碼,這里做個簡單的介紹。

認識幾種編碼方式

ASCII

全稱美國標準信息交換代碼(American Standard Code for Information Interchange)的縮寫, 為美國英語通信所設(shè)計吕嘀。它由128個字符組成,包括大小寫字母贞瞒、數(shù)字0-9偶房、標點符號、非打印字符(換行符军浆、制表符等4個)以及控制字符(退格棕洋、響鈴等)組成,每個字符占7位(1字節(jié)是8位)乒融。

ISOLatin-1

可以認為ASCII是美國發(fā)明針對英語設(shè)計的掰盘,但歐洲人在用的時候出現(xiàn)了問題。對于一些特殊的拉丁字符赞季,比如法文德文里某些字符愧捕,ASCII字符集就不包括。于是歐洲人發(fā)明了一種8位字符集是ISO 8859-1Latin 1申钩,也簡稱為ISOLatin-1次绘。它對ASCII做了個擴充,對于0-127之間的字符還使用ASCII里的字符不變撒遣, 把位于128-255之間的字符表示拉丁字母表中特殊語言字符邮偎。

UNICODE

后來計算機不斷發(fā)展擴展到亞洲非洲,如何用計算機使用的二進制表示這些語言又成了問題义黎。ISOLatin-1的8位字符集只能表示256個字符禾进,而僅漢語就有80000以上個字符。如何把地球上絕大多數(shù)語言用一種編碼方式表示出來呢轩缤? 于是發(fā)明了UNICODE編碼命迈,只用2個字節(jié)(16位)就可以編碼地球上幾乎所有地區(qū)的文字。
但是火的,UNICODE只是理論上的編碼方式壶愤,相當于給世界上每個文字打了個編號,但這編號具體如何在計算機里面存儲馏鹤,可以有多種實現(xiàn)方式征椒。比如utf-8和gbk。

前面說了UNICODE只是給每個文字打了個編號湃累,為啥不把這個編號直接轉(zhuǎn)化成二進制存儲在計算機里面呢勃救? 比如英文字母s的編號是115, 用二進制表示是00000000 1110011, 中文的編號是26085 (16進制是65e5) 碍讨,二進制是11001011 1100101。老外才沒那么傻蒙秒,對于老外這種日常純粹是用英文字符的人來說明明之前1個字節(jié)就能存儲一個字母勃黍,現(xiàn)在為了全球大一統(tǒng)非要存儲為2個字節(jié),相當于一個之前一個1M的文檔晕讲,現(xiàn)在變?yōu)?M覆获。于是老外耍了賴,英文字母s115沒錯瓢省,但我就用1個字節(jié)1110011表示弄息,而你中文26085號也沒錯,但是你不能在使用2個表示勤婚,而是用2個甚至6個字節(jié)表示摹量。(為了英文的特權(quán),犧牲其他語言的存儲空間的便利)馒胆,這個編碼方式就是UTF-8缨称。

UTF-8

utf-8(8-bit Unicode Transformation Format)是一種針對Unicode的可變長度字符編碼,又稱萬國碼国章。UTF-8用1到6個字節(jié)編碼UNICODE字符具钥。用在網(wǎng)頁上可以同一頁面顯示中文簡體繁體及其它語言(如英文豆村,日文液兽,韓文)。

那GBK又是如何產(chǎn)生的呢掌动?

GBK

這時候中國不干了四啰,為啥你制定了全球大一統(tǒng)的規(guī)則,卻為了自己的便利又破壞規(guī)則粗恢,把方便留給自己不便留給別人呢柑晒? 明明用2個字節(jié)就能表示中文一個漢字,現(xiàn)在UTF-8編碼中文竟然需要2個甚至4個字節(jié)來表示眷射。于是中國制定一套自己的規(guī)則匙赞,于是用2個字節(jié)來表示一個漢字,總共可以覆蓋2萬多個文字妖碉。 對于英文涌庭,好吧讓一步,還保留和你UTF-8同樣的方式使用一個字節(jié)來表示欧宜。

記鬃堋:UNICODE只是給字符一個代號,而GBK和UTF-8使用不同的規(guī)則來表示同一個代號冗茸。

網(wǎng)頁亂碼如何產(chǎn)生

下面這個流程是我們寫入文件到展示文件的簡單描述:

  1. 我們使用編輯器編寫 HTML 文件
  2. 保存編寫的HTML文件
  3. 使用瀏覽器打開HTML文件
  4. HTML文件在瀏覽器展示

亂碼產(chǎn)生的根源就在與第2步驟和第4步席镀。

在第2步保持文件時會把我們寫入的文字使用瀏覽器默認的編碼方式進行保存匹中。如果大家使用的是Sublime編輯器,默認的編碼方式是utf-8豪诲。當然也可以安裝GBK Encoding support插件顶捷,在保存文件時可選擇保存為GBK

屏幕快照 2016-01-17 上午12.35.57.png

在第4步瀏覽器打開網(wǎng)頁時,它并不知道你的這個文件是使用什么編碼方式屎篱,于是自作主張使用了默認解碼方式焊切。如下圖所示,文件保存為GBK格式芳室,在Chrome打開時默認使用 ISO -8859的解碼方式专肪,導(dǎo)致編碼和解碼不匹配,產(chǎn)生亂碼堪侯。

屏幕快照 2016-01-17 上午12.38.50.png

那如何規(guī)避這個問題呢嚎尤?即如何通知瀏覽器用什么方式解碼呢炎滞?

首頁扳埂,在文件保存的時候你自己要清楚是用哪種編碼方式保存的(sublime默認保存方式是utf-8芋齿,如果安裝了插件也可另存為gbk寺旺,其它IDE可以做設(shè)置保存格式)笔宿。如果你的文件是保存為utf-8格式戚揭,那么一定要在html 的 <head>里添加<meta charset="utf-8">扯饶,這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了悯姊,直接用utf-8去解碼卖毁。 同理揖曾,如果你的文件保存為gbk格式,一定在文件里添加<meta charset="gbk">亥啦。

記住炭剪,

  1. 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
  2. 亂碼一般是英文以外的字符才會出現(xiàn)翔脱。

為啥純粹的英文不會出現(xiàn)亂碼問題奴拦,即使編碼方式和解碼方式不一致?那是因為前面講過了 utf-8届吁、gbk對英文都是采用1個字節(jié)的編碼方式错妖,并且使用了相同的碼字。

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疚沐,一起剝皮案震驚了整個濱河市暂氯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌濒旦,老刑警劉巖株旷,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡晾剖,警方通過查閱死者的電腦和手機锉矢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來齿尽,“玉大人沽损,你說我怎么就攤上這事⊙罚” “怎么了绵估?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長卡骂。 經(jīng)常有香客問我国裳,道長,這世上最難降的妖魔是什么全跨? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任缝左,我火速辦了婚禮,結(jié)果婚禮上浓若,老公的妹妹穿的比我還像新娘渺杉。我一直安慰自己,他們只是感情好挪钓,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布是越。 她就那樣靜靜地躺著,像睡著了一般碌上。 火紅的嫁衣襯著肌膚如雪倚评。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天绍赛,我揣著相機與錄音蔓纠,去河邊找鬼辑畦。 笑死吗蚌,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的纯出。 我是一名探鬼主播蚯妇,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼暂筝!你這毒婦竟也來了箩言?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤焕襟,失蹤者是張志新(化名)和其女友劉穎陨收,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡务漩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年拄衰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片饵骨。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡翘悉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出居触,到底是詐尸還是另有隱情妖混,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布轮洋,位于F島的核電站制市,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏弊予。R本人自食惡果不足惜息堂,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望块促。 院中可真熱鬧荣堰,春花似錦、人聲如沸竭翠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽斋扰。三九已至渡八,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間传货,已是汗流浹背屎鳍。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留问裕,地道東北人逮壁。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像粮宛,于是被迫代替她去往敵國和親窥淆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容