HTML - ASCII 代碼：初学者的全面指南

Hello there, future web developers! Today, we're going to embark on an exciting journey into the world of ASCII codes and their role in HTML. Don't worry if you've never heard of ASCII before – by the end of this tutorial, you'll be an ASCII pro!

HTML - ASCII Codes

什麼是 ASCII？

ASCII stands for American Standard Code for Information Interchange. It's like a secret code that computers use to understand letters, numbers, and symbols. Imagine you're passing notes in class, but instead of writing words, you use numbers to represent each letter. That's kind of what ASCII does for computers!

HTML 代碼 - ASCII 字符和符號表

Let's start with a fun fact: Did you know that every character you type on your keyboard has a unique ASCII code? It's true! Here's a table showing some common ASCII codes:

字符	ASCII 代碼
A	65
a	97
0	48
空格	32

In HTML, we can use these codes to display characters. Here's how:

<p>The letter A: &#65;</p>
<p>The letter a: &#97;</p>
<p>The number 0: &#48;</p>

When you view this in a browser, it will display:

The letter A: A The letter a: a The number 0: 0

Cool, right? It's like we're speaking computer language!

Why Use ASCII Codes in HTML？

You might be wondering, "Why bother with these codes when I can just type the letter?" Great question! Sometimes, certain characters might not display correctly on all devices or browsers. Using ASCII codes ensures that your content appears exactly as you intend, regardless of the user's system.

ASCII 裝置控制字符

Now, let's talk about some special ASCII characters that you can't see but are super important. These are called Device Control Characters, and they help control how text is displayed or processed.

For example:

ASCII 10 ( ) is a Line Feed
ASCII 13 ( ) is a Carriage Return

Here's how you might use them:

<p>This is line 1.&#10;This is line 2.</p>

This will display as:

This is line 1. This is line 2.

可打印 ASCII 字符

Printable ASCII characters are the ones you can actually see on your screen. They include letters, numbers, punctuation marks, and some symbols. Let's look at a few examples:

<p>Exclamation mark: &#33;</p>
<p>Dollar sign: &#36;</p>
<p>Percentage sign: &#37;</p>

This will display as:

Exclamation mark: ! Dollar sign: $ Percentage sign: %

一個有趣的 ASCII 藝術示例

Want to see something cool? We can use ASCII characters to create simple graphics! Check this out:

<pre>
___________
/           \
/   ASCII Art  \
\    is fun!   /
\___________/
</pre>

This will create a simple speech bubble in your browser. Neat, huh?

Extended ASCII Codes

Now, let's dive a little deeper. Extended ASCII codes allow us to represent even more characters, including accented letters and special symbols. These codes range from 128 to 255.

Here's an example:

<p>Copyright symbol: &#169;</p>
<p>Euro sign: &#8364;</p>
<p>Registered trademark: &#174;</p>

This will display as:

Extended ASCII 的實際用途

Imagine you're creating a website for a café in Paris. You might use extended ASCII codes to properly display French words with accents:

<p>Caf&#233; au lait</p>
<p>Cr&#232;me br&#251;l&#233;e</p>

This ensures that "Café au lait" and "Crème brûlée" display correctly, even if the user's system doesn't support French characters.

結論

And there you have it, folks! We've journeyed through the fascinating world of ASCII codes in HTML. From basic letters to fancy symbols, you now know how to use these codes to ensure your web content displays correctly and creatively.

Remember, practice makes perfect. Try creating a simple HTML page and experiment with different ASCII codes. You might be surprised at what you can create!

Before we wrap up, here's a quick challenge for you: Can you create a smiley face using only ASCII codes? Hint: You'll need ☺ (☺).

Happy coding, and may your web pages always display exactly as you intend!

Credits: Image by storyset