﻿# 關於各瀏覽器對網頁與文字編碼的處理規則研究整理

文字編碼 (Text Encoding) 是一個頗為複雜的議題，現在的開發人員很幸福，只要遇到不懂的編碼問題就用 UTF-8 編碼解決，想當初我在開發[多奇中文繁簡轉換大師](http://www.miniasp.com/tsc_introduction.php)產品時遇到的編碼問題百百種，可說是養成了對於文字編碼的敏感度，之後遇到編碼問題就比較容易能理解與解決問題，今天我來分享「各瀏覽器」對於文字編碼的處理細節，由於這些資訊在網路上又多又雜，似乎不易整理，以下部分內容是我親自實驗並研究出來的心得，如有謬誤之處敬請告知。

**瀏覽器對 "網址列" (**[**Address bar**](http://en.wikipedia.org/wiki/Address_bar)**) 的編碼處理**

請先閱讀 [講解 URL 結構與分享幾個相對路徑與絕對路徑的開發技巧](/post/2008/10/19/URL-URI-Description-and-usage-tips) 文章瞭解網址結構，如下圖：

![網址結構](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b6516afac29a33362edc-image_3.png "網址結構")

**1\. 當在 “網址列” 直接手動輸入含有「中文」的網址時**

-   path 部分預設會以 UTF-8 編碼送出!

-   Internet Explorer、Firefox、Google Chrome 行為皆如此

-   query 部分一律會以 **系統區域** (System locale) 設定為主

-   若為 "**繁體中文(台灣)**" 就會自動以 Big5 碼送出文字!
-   若為 "**簡體中文(中國)**" 就會自動以 GB2312 碼送出文字!
-   此規則只有 Google Chrome 為例外，Google Chrome 會一律用 UTF-8 編碼送出文字。

**補充說明**

-   在 \[網際網路選項\] 的 \[進階\] 頁籤中有個 \[永遠將 URL 傳送成 UTF-8\] 選項，預設為勾選的狀態。如果你 \[取消勾選\] 這個選項，在 path 部分就會改以 System locale (系統區域) 指定的字集編碼送出。 ( 如下圖示 )  
    ![在 \[網際網路選項\] 的 \[進階\] 頁籤中有個 \[永遠將 URL 傳送成 UTF-8\] 選項](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/d71b10aacdebde881729-image.png "在 [網際網路選項] 的 [進階] 頁籤中有個 [永遠將 URL 傳送成 UTF-8] 選項")
-   若要變更**系統區域**設定，可從 \[控制台\] 的 \[地區及語言選項\] 修改，請參考下圖:  
    ![\[控制台\] 的 \[地區及語言選項\] ](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b7f794fef576128c8a3c-image.png "[控制台] 的 [地區及語言選項] ")  
      
    ![Region and Language](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9fe2577c1b173f89be35-image.png "Region and Language")

**2\. 從網頁「點擊」超連結(Hyperlink)且連結中包含「中文」時**

-   path 部分預設會以 UTF-8 編碼送出!

-   Internet Explorer、Firefox、Google Chrome 行為皆如此

-   query 部分當「沒有利用 UrlEncode 編碼」時，一律會以「該網頁的編碼」為主送出文字。

-   若你現在讀取的是 Big5 編碼的網頁，在點擊連結時就會自動以 Big5 編碼送出文字
-   若你現在讀取的是 GB2312 編碼的網頁，在點擊連結時就會自動以 GB2312 編碼送出文字
-   若你現在讀取的是 UTF-8 編碼的網頁，在點擊連結時就會自動以 UTF-8 編碼送出文字

**補充說明**

-   經測試，若透過 JavaScript 進行轉址 ( location.href ) 時，瀏覽器對文字編碼的行為與透過超連結點擊的行為一模一樣。
-   當你需要**跨字集**連結網頁時，務必採用 UrlEncode 對參數進行編碼！

-   例如：從 UTF-8 編碼的網頁設定連結到 Big5 編碼的網頁，如果網址的 QueryString 包含中文字時，請務必記得要將參數 ( Key & Value ) 進行 UrlEncode 編碼。

**瀏覽器對 "網頁文字"** **的編碼處理**

對於文字編碼沒有感覺的網頁開發人員一般來說都不會在 HTTP Header 的地方明確指定網頁字集，雖然瀏覽器一般來說都具備自動判斷網頁字集的能力，但也不是每次都會判斷正確，最好的網站建置還是明確指定編碼字集來的好。

**1\. 在伺服器回應網頁要求時告知瀏覽器應顯示的字集**

最簡單的作法就是明確指定 Content-Type 這個HTTP Header，這時瀏覽器就會依照指定的字集 (Charset) 顯示網頁文字，如下程式範例。

**ASP.NET**

<%@ Page Language\="C#" ResponseEncoding\="BIG5" %>

**ASP.NET ( Code Behind 或 HTTP Handler ) / C#**

Response.Charset = "big5"**;**

**ASP**

<% Response.CharSet = "big5" %>

**PHP**

<?php header("Content-Type”, "text/html; charset=big5" ?>

**Perl**

print "Content-type: text/html; charset=big5\\n\\n";

**2\. 在網頁 HTML 中加入 META 標籤，明確指定 Content-Type 與字集**

這是在當你無法控制伺服器指定字集時才會使用這個 meta 標籤進行宣告，另一個使用情境會在下一段落 \[**瀏覽器對 "表單內容送出" 的編碼處理**\] 用到。設定範例如下：

<meta http-equiv\="Content-Type" content\="text/html; charset=big5" />

注意事項：這個 meta 標籤一定要放在 <head> 標籤中，而且一定要在 <body> 標籤之前出現。

**瀏覽器對 "表單內容送出"** **的編碼處理**

由於 Windows 作業系統核心都是以 Unicode 字集處理，所以你所在螢幕上看到的文字基本上都一定是先透過 Unicode 處理過才顯示出來的，所以當你打算從網頁中送出表單時，你在表單中輸入的所有文字會依照你「網頁編碼」的定義先進行**轉碼**動作。

例如你的網頁是以 Big5 進行編碼，網頁表單要送出的文字就會嘗試從 Unicode 轉換成 Big5 編碼，至於無法轉換成 Big5 編碼的文字全部都會以 HTML Entities 語法表示 ( 例如: &#26356; )。

當你的網頁編碼為 Big5 字集，但你需要表單送出時用 GB2312 字集送出的話，就可以利用以下步驟完成此任務：

1\. 伺服器回應網頁要求時明確指定瀏覽器應顯示的字集

```
Response.ContentType = "text/html; charset=big5";
```

2\. 在網頁 HTML 中加入 META 標籤，明確指定 Content-Type 與字集

```
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
```

額外補充說明請參考我另一篇文章：[一個常用又不知道是做什麼用的 META 設定](/post/2007/11/11/Explain-A-frequently-used-META-content-type)

**※ 2009/9/14 更新**

網友 chihwen 提供了一條關於 **瀏覽器對 "表單內容送出"** **的編碼處理** 的線索，經我詳細測試下發現各瀏覽器之間的確還是有不同的處理規則，我補充說明於另一篇文章: [關於各瀏覽器對【表單內容送出】的編碼處理補充說明](/post/2009/09/14/How-browser-handle-web-character-encoding-part-2-form-accept-charset)。

**相關連結**

-   [Character encodings in HTML](http://en.wikipedia.org/wiki/Character_encodings_in_HTML)
-   [Unicode and HTML - Wikipedia, the free encyclopedia](http://en.wikipedia.org/wiki/Unicode_and_HTML)
-   [The Definitive Guide to Web Character Encoding](http://www.sitepoint.com/article/guide-web-character-encoding/)
-   [EntityCode - A Clear and Quick Reference to HTML Symbol Entities Codes](http://www.entitycode.com/)
-   [Character Set Recognition](http://msdn.microsoft.com/en-us/library/aa752010\(VS.85\).aspx)
-   [\[asp\]让你知道codepage的重要](http://www.blueidea.com/tech/program/2004/2351.asp)
