HTML - URL Encoding

你好，未來的網頁開發者們！今天，我們將要深入探索URL編碼的迷人世界。如果你是新手，不必擔心；我們會從基礎開始，逐步學習。在本教程結束時，你將能像專家一樣進行URL編碼！

HTML - URL Encoding

URL編碼是什麼？

在我們進入範例之前，讓我們先了解URL編碼是什麼，以及它的重要性。

URL編碼是一種將字符轉換為可以在互聯網上傳輸的格式的方法。這就像給你的文本一個特殊的護照，讓它能在網絡上安全旅行！

這樣想：假設你試圖發送一封含有符號和空格的複雜地址的信。郵政服務可能會感到困惑！URL編碼就像將那個地址重新寫成每個郵政員工（或者在我們的例子中，每個網絡服務器）都能理解的格式。

讓我們從一個簡單的範例開始：

https://www.example.com/my file.html

這個URL中有一個空格，這可能會引起問題。當我們進行編碼時，它會變成：

https://www.example.com/my%20file.html

看到那個%20了嗎？那就是空格的URL編碼版本。酷吧？

現在，讓我們來談談ASCII控制字符。這些是控制文本如何被處理的特殊字符。在URL編碼中，我們需要對這些字符特別小心。

這裡是一張一些常見的ASCII控制字符及其編碼版本的表格：

例如，如果你需要在URL中包含NUL字符（儘管這很稀少），你會使用%00。

非ASCII字符是那些標準ASCII集合之外的字符，如帶重音的字母或其他字母表的符號。這些也需要特別處理。

讓我們看一個範例：

https://www.example.com/café

編碼後，這會變成：

https://www.example.com/caf%C3%A9

é被替換成了%C3%A9。這樣可以確保世界各地的服務器能夠正確解釋這個字符。

有些字符在URL中有特殊含義。我們稱這些字符為預留字符，如果我們想將它們作為普通字符使用，就需要編碼。

這裡是一張預留字符及其編碼版本的表格：

讓我們看一個範例：

https://www.example.com/search?q=fish&chips

這個URL使用&作為參數之間的分隔符。如果我們真的想搜索"fish & chips"，我們需要這樣編碼：

https://www.example.com/search?q=fish%26chips

現在服務器知道我們正在尋找"fish & chips"，而不是兩個分開的搜索詞！

最後，讓我們來談談不安全字符。這些是可能被各種系統誤解的字符，應該總是被編碼。

這裡是一張一些不安全字符的表格：

讓我們在範例中使用它們：

https://www.example.com/search?q=C++ Programming

正確編碼後，這會變成：

https://www.example.com/search?q=C%2B%2B%20Programming

我們編碼了+符號和空格，以確保它們被正確解釋。

現在我們已經涵蓋了所有這些類型的編碼，讓我們試試一個更複雜的範例：

https://www.example.com/search?q=Where's the café? (It's urgent!)

完全編碼後，這會變成：

https://www.example.com/search?q=Where%27s%20the%20caf%C3%A9%3F%20%28It%27s%20urgent%21%29

哇，看起來不一樣了！但現在它可以安全地在互聯網上傳輸，而不會有任何被誤解的風險。

好了，各位！你們已經開始踏上了URL編碼世界的第一步。記住，雖然起初可能看起來複雜，但這一切都是為了確保你的URL無論何時何地都能被正確解釋。

將URL編碼視為互聯網的通用翻譯器。它幫助你的URL與全世界的服務器清晰地通信，無論它們包含什麼特殊字符或空格。

隨著你繼續在網頁開發的道路上前進，你會發現理解URL編碼非常有益。它將幫助你創建堅固的鏈接，安全地處理用戶輸入，甚至調試棘手的URL相關問題。

繼續練習，很快URL編碼將會是你的第二天性。快樂編碼，願你的所有URL都能在網絡上安全旅行！

Credits: Image by storyset