造成網頁亂碼的根本原因是什麼-html教學-PHP中文網

首頁

web前端

html教學

造成網頁亂碼的根本原因是什麼

一个新手

Oct 12, 2017 am 10:42 AM

亂碼原因

先看段代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页编码</title>
</head>
<body>
</body>
</html>

    HTML代码中的指定了网页的编码为utf-8。
    网页编码涉及的知识点比较多，总的说来它也是一个历史遗留问题。
    第一台计算机（ENIAC）于1946年2月诞生于美国，当时美国只考虑自己使用，并在计算机诞生后的几年里制定了一套ASCII码标准（American Standard Code for Information Interchange，美国信息交换标准代码），它是基于拉丁字母的一套电脑编码系统，主要用于显示现代英语和其他西欧语言。
    ASCII码使用8位二进制数组合来表示256种可能的字符（2的8次方=256），包含了大小写字母，数字0到9，标点符号，以及在美式英语中使用的特殊控制字符。一个字符占1个字节。ASCII码表部分编码如下：

HTML的转义符（字符实体），比如符号“ 我们使用转义符做个试验：

    美国制定ASCII码的意思是：ASCII码可以满足在计算机领域所有字符和表示上的需要。不过这只是美国自己的意思，毕竟所有的英文单词都可以拆分来自26个英文字母，ASCII码表能表达256个字符，确实足够美国使用。
    后来世界各地也都开始使用计算机，很多国家的语言文字并不是英文，这些国家的文字都没被包含在ASCII码表里。以我们中国为例，汉字近10万个，根本无法排进ASCII码表。于是我们国家对ASCII码表进行拓展并形成自己的的一套标准，在标准中一个汉字占2个字节，新的码表可以表达65536个汉字。但一开始并没有将码表全部填充使用完，只收录了常用的6000多个汉字、英文及其它符号，这套标准称为GB2312（信息交换用汉字编码字符集，GB是“国家标准”的简化词“国标”的拼音首字母缩写，2312是国标序号）。后来又制定了一套收录更多汉字的标准（收录的汉字有2万多个），称为GBK（汉字编码扩展规范，K是“扩”的拼音首字母）。
    在GB2312或GBK里，许多标点符号都使用2个字节进行了重新编码，这类占2个字节的标点符号称为“全角”字符（“全角”也称“全形”或“全宽”或“全码”），原来ASCII码表中占1个字节的标点符号则称为“半角”字符（“半角”也称“半形”或“半宽”或“半码”）。全角的逗号、括号、句号等与半角是不一样的：

    在中文輸入法下，預設的標點符號是全角字元；在英文輸入法下，標點符號則是半角字元。
    我們接著說故事：隨著使用電腦的國家越來越多，各國製定自己的電腦編碼標準的情況也越來越多，導致的結果是：各國電腦的編碼互不支持、認識。例如在美國的電腦裡要顯示漢字，就必須安裝漢字系統才可以，否則中文檔案在美國系統的電腦中開啟便是亂碼。
    就這樣，在這個時期催生出了一個叫ISO的國際組織（International Organization for Standardization，國際標準化組織），著手解決各國的程式設計問題。 ISO統一製作了一個稱為UNICODE（統一碼、萬國碼、單一碼，Universal Multiple-Octet Coded Character Set，又簡稱為UCS）的編碼方案，用於收錄地球上所有文字和符號。 UNICODE字符分為17組編排，每組編排稱為平面（Plane），每個平面擁有65536個碼位，共計可以收錄1114112個字符（111萬個字符，足夠大的容量）。 UNICODE編碼統一一個字元佔2個位元組。
    但UNICODE在很長一段時間內無法推廣，直到網路的出現，資料的傳輸與交換使各國之間的編碼進行統一化成為迫切的需要。但早期的硬碟和網路流量都非常昂貴，UNICODE編碼裡的每個字元卻佔用了2個位元組的容量，於是為了節省檔案儲存時所佔的硬碟空間，也為了節省字元在網路傳輸過程中所佔用的網路流量，也制定了基於UNICODE、面向傳輸的眾多標準，這些面向傳輸的標準統稱為UTF（UCS Transfer Format）。 UNICODE編碼與UTF編碼並不是直接的一一對應，而是要透過一些演算法和規則來轉換。 UNICODE與UTF的關係有：UNICODE是根本、基礎、目的，而UTF只是實現UNICODE的手段、方法、過程。
    常見的UTF格式有：UTF-8，UTF-16，UTF-32。其中UTF-8是網路上使用最廣的一種UNICODE的實作方式，它是專為傳輸而設計。正因為UTF-8是基於UNICODE而設計的傳輸實作方式，所以它能讓編碼無國界，任意國家的文字都能在任意國家的電腦瀏覽器中正常顯示。 UTF-8最大的一個特點是：它是一種變長的編碼方式，它可以使用1~4個位元組表示一個符號，根據不同的符號而變化位元組長度，當能夠使用1位元組表示一個符號時，便使用1個位元組來表示，如果需要2位元組才能表示的符號，便使用2個位元組來表示，類推，直到4個位元組，從而節省硬碟儲存空間和網路流量。
    所以我們的網站在開發時如果使用GB2312或GBK編碼，當別的國家的電腦不支援漢字編碼，那麼看到的將是亂碼，顯示出來類似這樣：口口口口。而網站如果使用UTF-8編碼，則任意國家的電腦在開啟網站時其內容會自動轉換成UNICODE編碼，並且由於現在的電腦都支援UNICODE編碼，從而能正常顯示任意文字！
    但是國內許多的網站仍然使用GB2312或GBK編碼，這類網站通常只面對國內用戶提供服務，面對國內用戶不會有顯示上的問題。只是如果面對其他國家的瀏覽者，這類網站被打開時很大程度上將呈現亂碼。
    為了網站的高相容性與國際化，建議網站使用UTF-8編碼，而不是使用GB2312或GBK編碼。
    指定網頁為UTF-8、GB2312和GBK的標籤分別為：

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

那么有一个问题出现了：网页各种编码的区别，仅仅是在于这一行meta标签的设置差别吗？仅仅是“utf-8”这5个字符换成“gb2312”这6个字符之类的这种“小差别”吗？
不是的，差别不仅仅是这几个字符的差别。当网页指定meta标签中的编码为utf-8后，DreamWeaver在保存网页时会自动将网页文件保存为utf-8的编码格式（二进制码使用utf-8的编码格式），meta标签中的utf-8编码是为了告诉浏览器：这个网页用的是utf-8编码，请在显示时使用utf-8编码的格式解析并呈现出来；而如果meta标签中指定编码为gb2312，DreamWeaver在保存网页时会自动将网页文件保存为gb2312的编码格式（二进制码使用gb2312的编码格式），同样，meta标签中的gb2312编码只是为了告诉浏览器：这个网页用的是gb2312编码，请在显示时使用gb2312编码的格式解析并呈现出来。我们做个试验，将一个文本文件分别保存为utf-8格式（打开记事本新建文本文件，输入内容后，选择菜单：文件→另存为，编码选择为UTF-8）和gb2312格式（另存时编码选择为ANSI，ANSI代表当前操作系统的默认编码，在简体中文Windows操作系统中，ANSI 编码代表 GBK 编码；在繁体中文Windows操作系统中，ANSI编码代表Big5；在日文Windows操作系统中，ANSI 编码代表 Shift_JIS 编码，类推），对比其二进制数据。这里使用UltraEdit-32文件编辑器对文本文件进行16进制查看，即使用16进制查看文件的二进制数据：

从上图中可以看到，使用utf-8编码和使用gb2312编码保存的文件，其二进制数据是不一样的，即这两个文件的二进制数据内容是不一样的。记事本软件在打开文本文件时，会尝试识别文件的编码并进行解析和显示，即文字保存在记事本里，无论保存成utf-8编码还是gb2312编码，通常情况下记事本都能正常识别和显示，不需要在文件里额外记录数据以告知记事本该文件是什么编码。但很多软件却无法做到智能识别文本文件的编码，这就要求文本文件在保存时，必须附带一些特殊的内容（额外的数据）以告知该文件是什么编码。UNICODE规范中有一个BOM（Byte Order Mark）的概念，就是字节序标记，在文件头部开始位置写入三个字节（EF BB BF）以告知该文件是utf-8编码格式。但这个BOM又带出了新的问题：不是所有的软件或处理程序都支持BOM，即不是所有的软件或处理程序都能识别文件开头的（EF BB BF）这三个字节。当不支持识别时，这三个字节又会被当成文件的实际数据内容。早期的火狐不支持对BOM的识别，当遇到BOM时会对这三个字节显示出特殊的乱码符号；而到目前为止，PHP处理程序仍然不支持BOM，即当一个PHP文件保存为utf-8时，如果附带了BOM，那么PHP处理程序会将BOM解析为PHP文件的实际数据内容而导致出错！在DreamWeaver中，选择软件头部菜单：修改→页面属性（也可以直接按快捷键ctrl+j），在弹出的页面属性面板中点选“标题/编码”，即可看到可供选择的编码。通常在改变网页的编码时，使用这种方式改变。如下图：

所以：当我们在meta标签中设置为utf-8编码格式时，网页文件就必须要存储为utf-8格式，这样浏览器才能正常显示网页而不是显示乱码。如果在meta标签中设置utf-8编码格式，网页文件却保存为gbk或其它格式，那么在打开网页时浏览器会接到网页meta标签中格式的通知：使用utf-8编码格式来解析和显示网页，而网页的二进制码（数据内容）却为gbk编码或其它格式，显示出来就会是乱码！这好比相亲时，红娘手里的资料有误，错误的告知男方：女方讲英语（meta标签中设置为utf-8编码）。结果女方却不懂英语（文件却不是utf-8编码）。男方开口一句“Hello”就让女方不知所谓了（乱码）。
我们来实验一下，网页指定meta标签中的编码为utf-8，文件却保存为gbk格式：我们先用DreamWeaver编辑一个utf-8格式的网页并保存，然后再用记事本打开该网页，另存为，编码选择为ANSI。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>中文</title>
</head>
<body>
本文件使用dreamweaver保存后，再使用记事本打开，并另存为ANSI编码。
</body>
</html>

在浏览器中的执行结果如下：

綜上所述：網頁開發時，盡量使用utf-8編碼格式，並且在儲存檔案時，儲存為utf-8編碼。 （dreamweaver在儲存網頁檔案時，會根據所指定的編碼自動儲存為正確的對應編碼，但如果使用其它網站代碼編輯器，例如記事本、Editplus等，就需要注意，在儲存檔案時要選擇為正確的編碼）。

以上是造成網頁亂碼的根本原因是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles