Перевод на русский язык (ru)

HTML - Сущности

Здравствуйте, будущие веб-разработчики! Как ваш доброжелательный соседский учитель компьютера, я рад помочь вам отправиться в увлекательное путешествие в мир HTML-сущностей. Не беспокойтесь, если вы новички в программировании - мы начнем с основ и будем продвигаться вверх. К концу этого урока вы将成为 экспертом по HTML-сущностям!

Что такое HTML-сущности?

Прежде чем мы углубимся, давайте поймем, что такое HTML-сущности. Представьте их как особые коды, представляющие символы, которые могут быть трудными для отображения в HTML. Это как secret language для ваших веб-страниц!

Why do we need HTML entities? (Why do we need HTML entities?)

Представьте, что вы хотите отобразить символ "меньше" (<) в вашем HTML. Если вы просто наберете его напрямую, ваш браузер может решить, что это начало нового HTML-тега! Вот где на помощь приходят сущности. Они позволяют нам отображать эти особые символы, не confounding браузер.

HTML Character Entities Name and Code (HTML Character Entities Name and Code)

Давайте начнем с некоторых из самых распространенных HTML-сущностей. Мы рассмотрим как их имена, так и их числовые коды.

Символ	Название сущности	Числовой код
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'

Давайте увидим, как это работает:

<p>Я люблю использовать &lt;strong&gt; теги, чтобы сделать текст <strong>жирным</strong>!</p>
<p>Символ и (&amp;) используется для HTML-сущностей.</p>

В этом примере мы используем < и > для отображенияactual тегов, и & для отображения и. Попробуйте убрать эти сущности и увидите, что произойдет!

HTML Non Breaking Spaces Name and Code (HTML Non Breaking Spaces Name and Code)

Теперь давайте поговорим о особой сущности, котораяочень полезна: неразрывный пробел.

Символ	Название сущности	Числовой код
(пробел)

Неразрывный пробел как супергеройский пробел - он предотвращает разрывы строк там, где вы их не хотите. Например:

<p>Я люблю HTML&nbsp;сущности!</p>

Это обеспечивает, чтобы "HTML" и "сущности" всегда оставались на одной строке.

Пример использования HTML-сущностей (Example of HTML Entities)

Давайте проверим наши знания с забавным примером:

<p>Я учусь HTML &amp; это &lt;em&gt;невероятно&lt;/em&gt;!</p>
<p>Авторские права &copy; 2023 г. Джон&nbsp;Доу</p>

В этом примере мы используем & для и, < и > для отображения тегов <em>, © для символа авторского права, и   для удержания "Джон" и "Доу" вместе.

ISO 8859-1 Symbol Entities Name and Code (ISO 8859-1 Symbol Entities Name and Code)

HTML также предоставляет сущности для различных символов. Вот некоторые из них:

Символ	Название сущности	Числовой код
©	©	©
®	®	®
™	™	™
€	€	€
£	£	£

Давайте используем их в практическом примере:

<p>Наша компания, Веб-волшебники&trade;, принимает платежи в &euro; и &pound;.</p>
<p>Все содержимое защищено авторскими правами &copy; 2023 г. Веб-волшебники&reg;.</p>

ISO 8859-1 Character Entities Name and Code (ISO 8859-1 Character Entities Name and Code)

Иногда вам может потребоваться отображение символов с акцентами или другими дифтонгами. HTML-сущности снова приходят на помощь:

Символ	Название сущности	Числовой код
à	à	à
é	é	é
ñ	ñ	ñ
ü	ü	ü

Вот как вы можете использовать их:

<p>На испанском "привет" это "hola" и "пока" это "adi&oacute;s".</p>
<p>Французское слово для "пляж" это "plage" (произносится "pl&acirc;zh").</p>

Другие сущности, поддерживаемые браузерами (Other Entities Supported by Browsers)

Modern browsers support a wide range of entities, including mathematical symbols, arrows, and even emojis! Here are a few fun ones: (Современные браузеры поддерживают широкий спектр сущностей, включая математические символы, стрелки и даже emoji! Вот несколько забавных примеров:)

Символ	Название сущности	Числовой код
∞	∞	∞
♥	♥	♥
→	→	→
☺	⌣	☺

Давайте используем их для создания игривого сообщения:

<p>Я люблю HTML &infin; &hearts;</p>
<p>Давайте продвигаться вперед &rarr; и продолжать учиться! &smile;</p>

помните, что despite these entities are fun, it's important to use them judiciously. Overusing entities can make your HTML harder to read and maintain. (Хотя эти сущности забавны, важно использовать их с умом. Слишком частое использование сущностей может сделать ваш HTML сложнее для чтения и поддержки.)

Заключение (Conclusion)

Поздравляю! Вы только что погрузились в мир HTML-сущностей. От отображения специальных символов до добавления забавных символов, теперь у вас есть мощный инструмент в вашем арсенале веб-разработчика.

Заканчивая, вот небольшая история из моего teaching experience: (Заканчивая, вот небольшая история из моего опыта преподавания:)

Я однажды имел студента, который был расстроен, потому что его и消失了 с его веб-страницы. Когда я showed him HTML entities, его лицо осветилось, как будто он нашел спрятанный клад. Это магия обучения - всегда есть решение, которое ждет, чтобы его открыть!

Помните, что практика делает perfect. Попробуйте использовать эти сущности в ваших HTML-проектах, и вскоре они将成为 для вас вторымnature. Счастливого кодирования, и пусть ваши веб-страницы будут наполнены идеально отображаемыми символами и знаками!

Credits: Image by storyset