HTML - Entities
Xin chào các bạnfuture web developers! Là một giáo viên máy tính ở khu phố gần bạn, tôi rất vui mừng được带领你们踏上一段迷人的旅程, 探索HTML实体的世界。别担心如果你是编程新手 - 我们将从基础知识开始，逐步学习。在本教程结束时，你们将成为HTML实体的专家！
What are HTML Entities? (HTML 实体是什么？)
在我们深入了解之前，让我们理解一下HTML实体是什么。把它们想象成特殊的代码，代表在HTML中可能难以显示的字符。这就像是为你的网页拥有一种秘密语言！
Why do we need HTML entities? (为什么我们需要HTML实体？)
想象一下，你想要在HTML中显示小于符号（<）。如果你直接输入它，浏览器可能会认为它是一个新的HTML标签的开始！这就是实体派上用场的地方。它们允许我们能够显示这些特殊字符而不混淆浏览器。
HTML Character Entities Name and Code (HTML 字符实体名称和代码)
让我们从一些最常见的HTML实体开始。我们将查看它们的名称和数字代码。
| Character | Entity Name | Numeric Code |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
让我们看看这些是如何工作的：
<p>I love to use <strong> tags to make text <strong>bold</strong>!</p>
<p>The ampersand symbol (&) is used for HTML entities.</p>在这个例子中，我们使用 < 和 > 来显示实际的标签，使用 & 来显示和号。尝试去掉这些实体，看看会发生什么！
HTML Non Breaking Spaces Name and Code (HTML不间断空格名称和代码)
现在，让我们来谈谈一个非常有用的特殊实体：不间断空格。
| Character | Entity Name | Numeric Code |
|---|---|---|
| (space) |
不间断空格就像是一个超级英雄空格 - 它可以防止你在不希望的地方出现换行。例如：
<p>I love HTML entities!</p>这确保了"HTML"和"entities"始终保持在同一行。
Example of HTML Entities (HTML实体的例子)
让我们用一个小例子来测试我们的知识：
<p>I'm learning HTML & it's <em>amazing</em>!</p>
<p>Copyright © 2023 by John Doe</p>在这个例子中，我们使用 & 作为和号，< 和 > 来显示 <em> 标签，© 作为版权符号，以及 来保持"John"和"Doe"在一起。
ISO 8859-1 Symbol Entities Name and Code (ISO 8859-1符号实体名称和代码)
HTML还提供了用于各种符号的实体。以下是一些常见的：
| Symbol | Entity Name | Numeric Code |
|---|---|---|
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
让我们在实际情况中使用这些：
<p>Our company, Web Wizards™, accepts payments in € and £.</p>
<p>All content is © 2023 Web Wizards®.</p>ISO 8859-1 Character Entities Name and Code (ISO 8859-1字符实体名称和代码)
有时，你可能需要显示带有重音或其他变音符号的字符。HTML实体再次派上用场：
| Character | Entity Name | Numeric Code |
|---|---|---|
| à | à | à |
| é | é | é |
| ñ | ñ | ñ |
| ü | ü | ü |
以下是如何使用它们的方法：
<p>In Spanish, "hello" is "hola" and "goodbye" is "adiós".</p>
<p>The French word for "beach" is "plage" (pronounced "plâzh").</p>Other Entities Supported by Browsers (浏览器支持的其他实体)
现代浏览器支持广泛的实体，包括数学符号、箭头，甚至是表情符号！以下是一些有趣的：
| Symbol | Entity Name | Numeric Code |
|---|---|---|
| ∞ | ∞ | ∞ |
| ♥ | ♥ | ♥ |
| → | → | → |
| ☺ | ⌣ | ☺ |
让我们用这些来创建一条有趣的信息：
<p>I have ∞ love for HTML! ♥</p>
<p>Let's move forward → and keep learning! ⌣</p>记住，虽然这些实体很有趣，但是要谨慎使用。过度使用实体会使你的HTML更难阅读和维护。
Conclusion (结论)
恭喜你！你已经深入探讨了HTML实体的世界。从显示特殊字符到添加有趣的符号，你现在拥有了强大的网络开发工具。
在我们结束之前，让我分享一段我的教学经验：我曾经有一个学生，因为他的网页上的和号不断消失而感到沮丧。当我向他展示HTML实体时，他的脸上露出了像发现了隐藏宝藏一样的光芒。这就是学习的魔力 - 总有解决问题的方法等着被发现！
记住，熟能生巧。尝试将这些实体整合到你的HTML项目中，很快它们就会变得习以为常。快乐编码，愿你的网页充满完美渲染的字符和符号！
Credits: Image by storyset