HTML / HTML entity-ууд

HTML entity-ууд

HTML-д зарим тэмдэгт тусгай утгатай байдаг. Жишээ нь < тэмдэгтийг шууд бичвэл хөтөч үүнийг tag-ийн эхлэл гэж үзнэ. Тэгвэл энэ тэмдэгтийг агуулга болгон хэрхэн харуулах вэ? Үүний тулд HTML entity ашигладаг.

Entity-ийн синтакс

Entity нь & тэмдэгтээр эхэлж, ; тэмдэгтээр дуусдаг. Дунд нь нэр эсвэл тоон код орно:

код
&нэр;        ← нэрт entity  (жишээ: &amp;)
&#тоо;       ← 10-т тоон код (жишээ: &#38;)
&#xтоо;      ← 16-т тоон код (жишээ: &#x26;)

Зайлшгүй entity-ууд

HTML бичихэд заавал entity ашиглах шаардлагатай тэмдэгтүүд:

html
<!-- < тэмдэгт — tag нээлт болгохгүйн тулд -->
<p>5 &lt; 10 гэдэг нь үнэн.</p>

<!-- > тэмдэгт — ихэвчлэн шууд бичиж болох ч entity хэрэглэх нь найдвартай -->
<p>10 &gt; 5 гэдэг нь үнэн.</p>

<!-- & тэмдэгт — entity эхлэл болгохгүйн тулд -->
<p>Компани нэр: Мөнх &amp; Болд ХХК</p>

<!-- " тэмдэгт attribute дотор — attribute утгыг хаахгүйн тулд -->
<p title="&quot;Сайн уу&quot; гэсэн үг">Hover хийнэ үү</p>

Дэлгэцэнд харагдах үр дүн:

  • 5 < 10 гэдэг нь үнэн.
  • 10 > 5 гэдэг нь үнэн.
  • Компани нэр: Мөнх & Болд ХХК

Нийтлэг entity-ууд

| Entity | Тэмдэгт | Тайлбар | |--------|---------|---------| | &nbsp; | (зай) | Таслагддаггүй зай (non-breaking space) | | &lt; | < | Less than | | &gt; | > | Greater than | | &amp; | & | Ampersand | | &quot; | " | Давхар хашилт | | &apos; | ' | Нэг хашилт | | &copy; | © | Copyright | | &reg; | ® | Registered trademark | | &trade; | ™ | Trademark | | &mdash; | — | Em dash (урт зураас) | | &ndash; | – | En dash (дунд зураас) | | &hellip; | … | Цэгцэг (ellipsis) | | &laquo; | « | Зүүн давхар хашилт | | &raquo; | » | Баруун давхар хашилт |

&nbsp; — тусгай зай

&nbsp; (non-breaking space) нь энгийн зайнаас хоёр талаараа ялгаатай:

  1. Таслагддаггүй — мөрийн эхэнд шинэ мөр үүсгэхгүй
  2. Нийлдэггүй — хөтөч хэдэн &nbsp; дараалсан ч бүгдийг харуулна (энгийн зайнуудыг нэг зай болгодог)
html
<!-- Нэр овог нэг мөрт байх ёстой гэж шаардах -->
<p>Д.&nbsp;Болд</p>

<!-- Нэгжтэй тоог таслахгүй байлгах -->
<p>100&nbsp;</p>
<p>25&nbsp;°C</p>

Анхаарах зүйл: Зай авахын тулд &nbsp; дараалан олноор бичих нь зөв арга биш. Зайг CSS-ийн margin, padding-ээр тохируулах нь зөв.

Math болон тусгай тэмдэгтүүд

html
<p>Талбай: a&sup2; + b&sup2; = c&sup2;</p>
<!-- a² + b² = c² -->

<p>Температур: 37&deg;C</p>
<!-- 37°C -->

<p>Үнэ: 15&thinsp;000&nbsp;</p>
<!-- 15 000 ₮ — нимгэн зай тоог 3-оор бүлэглэнэ -->

<p>Харьцаа: &frac12; ба &frac14;</p>
<!-- ½ ба ¼ -->

Код блок дотор

Хуудсанд HTML кодыг жишээ болгон харуулахдаа <pre> болон <code> элементтэй хослуулан entity ашиглана:

html
<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="mn"&gt;
  &lt;body&gt;
    &lt;p&gt;Сайн уу!&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

Дэлгэцэнд:

код
<!DOCTYPE html>
<html lang="mn">
  <body>
    <p>Сайн уу!</p>
  </body>
</html>

Unicode тэмдэгт шууд бичих

Өнөөдөр charset="UTF-8" тохируулсан бол ихэнх тэмдэгтийг entity хэрэглэхгүйгээр шууд бичиж болно:

html
<!-- Entity ашиглах шаардлагагүй — шууд бичнэ -->
<p>Үнэ: 15 000 ₮</p>
<p>© 2024 Ulaanbaatar.app</p>
<p>Температур: 37°C</p>
<p>Нэмэх: a² + b²</p>

Зайлшгүй шаардлагатай entity нь дөрвөн л тэмдэгт: &lt;, &gt;, &amp;, &quot; — эдгээр нь HTML синтакстай зөрчилддэг тул entity хэлбэрээр бичих шаардлагатай.

Дараагийн хичээлд:

Character encoding буюу тэмдэгтийн кодчиллыг судлана — UTF-8 яагаад стандарт болсон, Кирилл үсгийг зөв харуулах, BOM гэж юу болох талаар үзнэ.