HTML - Entities

您好，未來的網頁開發者們！作為你們友好的鄰居電腦老師，我很興奮帶領你們進入HTML實體的迷人世界。別擔心你們是編程新手——我們會從基礎開始，逐步學習。在本教程結束時，你們將成為HTML實體的專家！

HTML - Entities

What are HTML Entities?

在我們深入探討之前，讓我們了解什麼是HTML實體。把它們當作代表可能在HTML中難以顯示的字符的特殊代碼。這就像為你的網頁擁有一種秘密語言！

想像一下，你想在你的HTML中顯示小於符號（<）。如果你直接輸入，你的瀏覽器可能會認為它是新的HTML標籤的開始！這就是實體派上用場的地方。它們讓我們能夠在不讓瀏覽器混淆的情況下顯示這些特殊字符。

讓我們從一些最常見的HTML實體開始。我們將看看它們的名稱和數字代碼。

讓我們看看它們在實際中的應用：

<p>I love to use &lt;strong&gt; tags to make text <strong>bold</strong>!</p>
<p>The ampersand symbol (&amp;) is used for HTML entities.</p>

在這個例子中，我們使用 < 和 > 來顯示實際的標籤，以及 & 來顯示和號。試著移除這些實體，看看會發生什麼！

現在，讓我們來討論一個非常有用的特殊實體：不換行空格。

字符	實體名稱	數字代碼
(空格)

不換行空格就像一個超級英雄空格——它阻止了你不希望出現換行的位置。例如：

<p>I love HTML&nbsp;entities!</p>

這確保了"HTML"和"entities"始終保持在同一行。

讓我們通過一個有趣的例子來測試我們的知識：

<p>I'm learning HTML &amp; it's &lt;em&gt;amazing&lt;/em&gt;!</p>
<p>Copyright &copy; 2023 by John&nbsp;Doe</p>

在這個例子中，我們使用 & 為和號，< 和 > 來顯示 <em> 標籤，© 為版權符號，以及   來保持"John"和"Doe"在一起。

HTML還為各種符號提供了實體。以下是一些常見的：

讓我們在實際例子中使用這些：

<p>Our company, Web Wizards&trade;, accepts payments in &euro; and &pound;.</p>
<p>All content is &copy; 2023 Web Wizards&reg;.</p>

有時候，你可能需要顯示帶有重音或其他變音符號的字符。HTML實體再次派上用場：

以下是如何使用它們的例子：

<p>In Spanish, "hello" is "hola" and "goodbye" is "adi&oacute;s".</p>
<p>The French word for "beach" is "plage" (pronounced "pl&acirc;zh").</p>

現代瀏覽器支持廣泛的實體，包括數學符號、箭頭，甚至表情符號！以下是一些有趣的：

讓我們用這些來創造一個有趣的訊息：

<p>I have &infin; love for HTML! &hearts;</p>
<p>Let's move forward &rarr; and keep learning! &smile;</p>

記住，雖然這些實體很有趣，但使用它們時要謹慎。過度使用實體會使你的HTML更難閱讀和維護。

恭喜你們！你們剛剛深入探討了HTML實體的世界。從顯示特殊字符到添加有趣的符號，你們現在擁有了網頁開發工具包中的一個強大工具。

在我們結束時，這裡有一個來自我教學經驗的小故事：我曾經有一個學生，他對於他的和號從他的網頁上消失感到沮喪。當我向他展示HTML實體時，他的臉亮了起來，就像他發現了隱藏的寶藏一樣。這就是學習的魔法——總有一個解決方案等著被發現！

記住，熟練使人完美。試著在你們的HTML專案中融入這些實體，很快它們就會變得習以為常。快樂編碼，願你的網頁充滿完美渲染的字符和符號！

Credits: Image by storyset