openplanning

Hướng dẫn và ví dụ HTML Entity

  1. HTML Entity
  2. Entity Name vs Entity Number
  3. Non-breaking Space ( )
  4. Danh sách các thực thể

1. HTML Entity

Có một vài ký tự đặc biệt mà nếu nó xuất hiện trong một tài liệu HTML có thể gây hiểu nhầm cho bộ máy phân tích nguồn HTML (HTML source parser), chẳng hạn ký tự "nhỏ hơn" ( < ), khi gặp ký tự này bộ máy phân tích HTML có hiểu nhầm là nó đang bắt gặp một thẻ. Để tránh hiểu nhầm này HTML sử dụng thực thể (entity) &lt; để thay thế cho ký tự ( < ).
Dưới đây là một vài ký tự thông dụng cần được thay thế bởi các thực thể (entity), danh sách đầy đủ bạn có thể xem ở phía cuối của bài viết này.
Ký tự
Mô tả
Thực thể
Dấu cách không ngắt dòng (Non-breaking Space)
<
Nhỏ hơn
&lt;
>
Lớn hơn
&gt;
&
Ký tự dấu và (ampersand)
&amp;
"
Nháy kép (Double quotation mark)
&quot;
'
Nháy đơn (Single quotation mark) (apostrophe)
&apos;
Hãy xem một tài liệu HTML với sự xuất hiện của các thực thể và kết quả mà bạn nhìn thấy trên trình duyệt.
entity-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Entities</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Entities example:</h3>
    HTML defines six levels of headings. <br/>
    The heading elements are: <br/><br/>
    &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, &lt;h6&gt; 
</body>
</html>
Ngoài các thực thể đại diện cho các ký tự có thể gây hiểu nhầm nói trên, có một danh sách rất nhiều các thực thể đại diện cho các ký tự đặc biệt khác ( £ § ¢ ¥ © ... )
Character
Description
Entity Name
¢
cent
&cent;
£
pound
&pound;
¥
yen
&yen;
§
section
&sect;
©
copyright
&copy;
®
registered trademark
&reg;
Chú ý: Bạn có thể tìm thấy danh sách đầy đủ các thực thể HTML ở phía cuối của bài viết này.

2. Entity Name vs Entity Number

Có hai cách để bạn đề cập tới một thực thể đó là sử dụng "Tên của thực thể" hoặc sử dụng "Mã số của thực thể". Chẳng hạn để đề cập tới ký tự nhỏ hơn ( < ) bạn có thể sử dụng tên thực thể ( &lt; ) hoặc sử dụng mã số thực thể ( &#60; ).
&entity_name;

&#entity_number;
Ưu điểm của việc sử dụng tên thực thể (entity name) đó là dễ nhớ. Nhưng nhược điểm là một số trình duyệt có thể không hỗ trợ đầy đủ tất cả tên các thực thể, nhưng chúng hỗ trợ một cách đầy đủ mã số của các thực thể.
Display
Description
Entity Name
Entity Number
Non-breaking space
&#160;
<
Less than
&lt;
&#60;
>
Greater than
&gt;
&#62;
&
Ampersand
&amp;
&#38;
"
Double quotation mark
&quot;
&#34;
'
Single quotation mark (apostrophe)
&apos;
&#39;
Chú ý: Bạn có thể tra cứu danh sách các thực thể với tên và mã số đầy đủ ở phía cuối của bài viết này.

3. Non-breaking Space (&nbsp;)

Thực thể được sử dụng để thay thế cho "dấu cách không bị ngắt dòng" (Non-breaking space). Để dễ hiểu bạn có thể xem hình minh họa dưới đây:
non-breaking-space-example.html
<p style="font-size:40px">
    This&nbsp;is&nbsp;a&nbsp;non&nbsp;breaking&nbsp;Sentence&nbsp;&nbsp;&nbsp;!!
</p>
<p style="font-size:40px">
    This sentence will be line breaks.
</p>

4. Danh sách các thực thể

ISO 8859-1 Symbol Entities
Display
Description
Entity Name
Number Code
non-breaking space
&#160;
¡
inverted exclamation mark
&iexcl;
&#161;
¤
currency
&curren;
&#164;
¢
cent
&cent;
&#162;
£
pound
&pound;
&#163;
¥
yen
&yen;
&#165;
¦
broken vertical bar
&brvbar;
&#166;
§
section
&sect;
&#167;
¨
spacing diaeresis
&uml;
&#168;
©
copyright
&copy;
&#169;
ª
feminine ordinal indicator
&ordf;
&#170;
«
angle quotation mark (left)
&laquo;
&#171;
¬
negation
&not;
&#172;
soft hyphen
&shy;
&#173;
®
registered trademark
&reg;
&#174;
™
trademark
&trade;
&#8482;
¯
spacing macron
&macr;
&#175;
°
degree
&deg;
&#176;
±
plus-or-minus
&plusmn;
&#177;
²
superscript 2
&sup2;
&#178;
³
superscript 3
&sup3;
&#179;
´
spacing acute
&acute;
&#180;
µ
micro
&micro;
&#181;
paragraph
&para;
&#182;
·
middle dot
&middot;
&#183;
¸
spacing cedilla
&cedil;
&#184;
¹
superscript 1
&sup1;
&#185;
º
masculine ordinal indicator
&ordm;
&#186;
»
angle quotation mark (right)
&raquo;
&#187;
¼
fraction 1/4
&frac14;
&#188;
½
fraction 1/2
&frac12;
&#189;
¾
fraction 3/4
&frac34;
&#190;
¿
inverted question mark
&iquest;
&#191;
×
multiplication
&times;
&#215;
÷
division
&divide;
&#247;
ISO 8859-1 Character Entities
Display
Description
Entity Name
Number Code
À
capital a, grave accent
&Agrave;
&#192;
Á
capital a, acute accent
&Aacute;
&#193;
Â
capital a, circumflex accent
&Acirc;
&#194;
Ã
capital a, tilde
&Atilde;
&#195;
Ä
capital a, umlaut mark
&Auml;
&#196;
Å
capital a, ring
&Aring;
&#197;
Æ
capital ae
&AElig;
&#198;
Ç
capital c, cedilla
&Ccedil;
&#199;
È
capital e, grave accent
&Egrave;
&#200;
É
capital e, acute accent
&Eacute;
&#201;
Ê
capital e, circumflex accent
&Ecirc;
&#202;
Ë
capital e, umlaut mark
&Euml;
&#203;
Ì
capital i, grave accent
&Igrave;
&#204;
Í
capital i, acute accent
&Iacute;
&#205;
Î
capital i, circumflex accent
&Icirc;
&#206;
Ï
capital i, umlaut mark
&Iuml;
&#207;
Ð
capital eth, Icelandic
&ETH;
&#208;
Ñ
capital n, tilde
&Ntilde;
&#209;
Ò
capital o, grave accent
&Ograve;
&#210;
Ó
capital o, acute accent
&Oacute;
&#211;
Ô
capital o, circumflex accent
&Ocirc;
&#212;
Õ
capital o, tilde
&Otilde;
&#213;
Ö
capital o, umlaut mark
&Ouml;
&#214;
Ø
capital o, slash
&Oslash;
&#216;
Ù
capital u, grave accent
&Ugrave;
&#217;
Ú
capital u, acute accent
&Uacute;
&#218;
Û
capital u, circumflex accent
&Ucirc;
&#219;
Ü
capital u, umlaut mark
&Uuml;
&#220;
Ý
capital y, acute accent
&Yacute;
&#221;
Þ
capital THORN, Icelandic
&THORN;
&#222;
ß
small sharp s, German
&szlig;
&#223;
à
small a, grave accent
&agrave;
&#224;
á
small a, acute accent
&aacute;
&#225;
â
small a, circumflex accent
&acirc;
&#226;
ã
small a, tilde
&atilde;
&#227;
ä
small a, umlaut mark
&auml;
&#228;
å
small a, ring
&aring;
&#229;
æ
small ae
&aelig;
&#230;
ç
small c, cedilla
&ccedil;
&#231;
è
small e, grave accent
&egrave;
&#232;
é
small e, acute accent
&eacute;
&#233;
ê
small e, circumflex accent
&ecirc;
&#234;
ë
small e, umlaut mark
&euml;
&#235;
ì
small i, grave accent
&igrave;
&#236;
í
small i, acute accent
&iacute;
&#237;
î
small i, circumflex accent
&icirc;
&#238;
ï
small i, umlaut mark
&iuml;
&#239;
ð
small eth, Icelandic
&eth;
&#240;
ñ
small n, tilde
&ntilde;
&#241;
ò
small o, grave accent
&ograve;
&#242;
ó
small o, acute accent
&oacute;
&#243;
ô
small o, circumflex accent
&ocirc;
&#244;
õ
small o, tilde
&otilde;
&#245;
ö
small o, umlaut mark
&ouml;
&#246;
ø
small o, slash
&oslash;
&#248;
ù
small u, grave accent
&ugrave;
&#249;
ú
small u, acute accent
&uacute;
&#250;
û
small u, circumflex accent
&ucirc;
&#251;
ü
small u, umlaut mark
&uuml;
&#252;
ý
small y, acute accent
&yacute;
&#253;
þ
small thorn, Icelandic
&thorn;
&#254;
ÿ
small y, umlaut mark
&yuml;
&#255;
Các thực thể khác được hỗ trợ bởi các trình duyệt.
Display
Description
Entity Name
Number Code
Œ
capital ligature OE
&OElig;
&#338;
œ
small ligature oe
&oelig;
&#339;
Š
capital S with caron
&Scaron;
&#352;
š
small S with caron
&scaron;
&#353;
Ÿ
capital Y with diaeres
&Yuml;
&#376;
ˆ
modifier letter circumflex accent
&circ;
&#710;
˜
small tilde
&tilde;
&#732;
en space
&ensp;
&#8194;
em space
&emsp;
&#8195;
thin space
&thinsp;
&#8201;
‌
zero width non-joiner
&zwnj;
&#8204;
‍
zero width joiner
&zwj;
&#8205;
‎
left-to-right mark
&lrm;
&#8206;
‏
right-to-left mark
&rlm;
&#8207;
–
en dash
&ndash;
&#8211;
—
em dash
&mdash;
&#8212;
‘
left single quotation mark
&lsquo;
&#8216;
’
right single quotation mark
&rsquo;
&#8217;
‚
single low-9 quotation mark
&sbquo;
&#8218;
“
left double quotation mark
&ldquo;
&#8220;
”
right double quotation mark
&rdquo;
&#8221;
„
double low-9 quotation mark
&bdquo;
&#8222;
†
dagger
&dagger;
&#8224;
‡
double dagger
&Dagger;
&#8225;
…
horizontal ellipsis
&hellip;
&#8230;
‰
per mille
&permil;
&#8240;
‹
single left-pointing angle quotation
&lsaquo;
&#8249;
›
single right-pointing angle quotation
&rsaquo;
&#8250;
€
euro
&euro;
&#8364;

Các hướng dẫn HTML

Show More

Các bài viết mới nhất

Show More