HTML - 字符編碼

歡迎，有志於網頁開發的各位！今天，我們將進入HTML中字符編碼的迷人世界。作為你們友善的鄰居計算機老師，我在這裡用清晰的解釋、大量的範例和一點幽默來指導你們這次旅程。所以，拿起你的虛擬筆記本，我們開始吧！

HTML - Character Encodings

HTML 字符集屬性

在我們深入各種字符集之前，讓我們先來討論我們如何告訴我們的網頁使用哪種編碼。這就是HTML字符集屬性發揮作用的地方。

字符集屬性通常放置在HTML文件的<head>部分中的<meta>標籤內。以下是一個例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的超棒網頁</title>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
</body>
</html>

在這個例子中，我們告訴瀏覽器使用UTF-8編碼（稍後會詳細介紹）。可以把這想像成給你的網頁一副特別的眼鏡來正確閱讀文字。

ASCII 字符集

現在，讓我們從ASCII開始我們的字符集之旅，ASCII是它們所有人的曾祖父母。ASCII代表美國標準信息交換碼。它就像字符編碼中的Model T——古老但基礎。

ASCII使用7位來表示128個字符，包括：

大寫字母（A-Z）
小寫字母（a-z）
數字（0-9）
基本標點符號

以下是一個只使用ASCII字符的簡單HTML範例：

<p>Hello, World! 123</p>

這行文字使用ASCII編碼會完美顯示，因為它只包含基本的拉丁字符和數字。

ANSI 字符集

ANSI（美國國家標準協會）字符集就像ASCII的更酷、更多樣化的表親。它將ASCII擴展到使用8位，允許256個字符。這個額外的空間用於各種語言特定的字符。

然而，ANSI不是一個單一的標準——它根據計算機的語言設置而有所不同。這可能會導致一些有趣的情況。想像一下用ANSI發送一封情書，而你愛人的計算機使用不同的ANSI碼頁，將其顯示為亂碼！

ISO-8859-1 字符集

ISO-8859-1，也稱為Latin-1，就像字符集中的歐洲導遊。它是一個8位編碼，包括西歐語言使用的字符。

以下是一個使用超出ASCII範圍字符的例子：

<p>Café Français</p>

如果你使用ISO-8859-1編碼，這將正確顯示帶有重音標記的文字。但請謹慎——如果你使用不同的編碼，你可能會得到"CafÃ© FranÃ§ais"！

UTF-8 字符集

現在我們來到了字符編碼的超級英雄——UTF-8。它就像字符集中的瑞士軍刀，能夠編碼你所能想到的几乎所有字符。

UTF-8使用可變數量的字节來表示字符。這意味著它可以高效地處理簡單的ASCII字符（只使用一個字节）和其他書寫系統中的複雜字符（使用多個字节）。

以下是一個展現UTF-8多功能的例子：

<p>Hello, नमस्ते, こんにちは, مرحبا</p>

使用UTF-8編碼，這一行將正確顯示英語、印地語、日語和阿拉伯語的"Hello"！

ISO 字符集

ISO為不同的語言群開發了各種字符集。可以把這些看作是為特定地區專門設計的工具包。以下是一些常見的ISO字符集表格：

字符集	描述
ISO-8859-1	西歐語言
ISO-8859-2	中歐和東歐語言
ISO-8859-3	南歐語言
ISO-8859-4	北歐語言
ISO-8859-5	西里爾字母
ISO-8859-6	阿拉伯語
ISO-8859-7	希臘語
ISO-8859-8	希伯來語

UTF 字符集

UTF（Unicode轉換格式）是字符編碼的現代解決方案。它就像字符集中的聯合國，將世界上所有書寫系統的字符聚集在一起。

主要有三種UTF編碼：

UTF-8：可變寬度編碼，與ASCII向后兼容。
UTF-16：對大多數常用字符使用16位，對其他字符使用更多位。
UTF-32：对所有字符使用32位。

以下是一個比較表格：

編碼	特點	最適用於
UTF-8	可變寬度（1-4字节）	網頁，ASCII兼容的環境
UTF-16	可變寬度（2或4字节）	操縱系統，Java
UTF-32	固定寬度（4字节）	快速字符訪問至关重要的情況

在我多年的教學經驗中，我發現UTF-8是最常見且推薦給網頁開發的編碼。它在字符編碼的世界中就像"統治他們全部的一個戒指"。

最後，讓我們看一個如何在HTML中使用UTF-8的實際例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多語種問候</title>
</head>
<body>
<h1>歡迎來到我們的國際頁面！</h1>
<p>英語: Hello</p>
<p>西班牙語: Hola</p>
<p>法語: Bonjour</p>
<p>德語: Guten Tag</p>
<p>俄語: Здравствуйте</p>
<p>中文: 你好</p>
<p>日語: こんにちは</p>
<p>阿拉伯語: مرحبا</p>
</body>
</html>

這個頁面將正確顯示多種語言的問候，這要歸功於UTF-8編碼。

記住，選擇正確的字符編碼就像為旅程選擇合適的鞋子。UTF-8就像一雙舒適的運動鞋，可以帶你去任何地方，而其他編碼可能對某些地形有更專業的適用性。

在我們結束這個課題時，我希望你們對HTML中的字符編碼有了堅實的理解。持續練習，保持好奇心，並不要害怕嘗試不同的字符集。開心編程！

Credits: Image by storyset