[Coding Table] 2019.08.30 HTML Entities Table

These tables list the HTML entities as they are defined from w3.org .

There are three listings of HTML entities, the Latin characters, Symbols and Greek characters and Special characters.

The current character set/encoding is Unicode(utf-8)

HTML Entities Table

Latin characters

Example	Name	Decimal	Unicode	Description
	 	 	\u00A0	no-break space = non-breaking space
¡	¡	¡	\u00A1	inverted exclamation mark
¢	¢	¢	\u00A2	cent sign
£	£	£	\u00A3	pound sign
¤	¤	¤	\u00A4	currency sign
¥	¥	¥	\u00A5	yen sign = yuan sign
¦	¦	¦	\u00A6	broken bar = broken vertical bar
§	§	§	\u00A7	section sign
¨	¨	¨	\u00A8	diaeresis = spacing diaeresis
©	©	©	\u00A9	copyright sign
ª	ª	ª	\u00AA	feminine ordinal indicator
«	«	«	\u00AB	left-pointing double angle quotation mark = left pointing guillemet
¬	¬	¬	\u00AC	not sign
­	­	­	\u00AD	soft hyphen = discretionary hyphen
®	®	®	\u00AE	registered sign = registered trade mark sign
¯	¯	¯	\u00AF	macron = spacing macron = overline = APL overbar
°	°	°	\u00B0	degree sign
±	±	±	\u00B1	plus-minus sign = plus-or-minus sign
²	²	²	\u00B2	superscript two = superscript digit two = squared
³	³	³	\u00B3	superscript three = superscript digit three = cubed
´	´	´	\u00B4	acute accent = spacing acute
µ	µ	µ	\u00B5	micro sign
¶	¶	¶	\u00B6	pilcrow sign = paragraph sign
·	·	·	\u00B7	middle dot = Georgian comma = Greek middle dot
¸	¸	¸	\u00B8	cedilla = spacing cedilla
¹	¹	¹	\u00B9	superscript one = superscript digit one
º	º	º	\u00BA	masculine ordinal indicator
»	»	»	\u00BB	right-pointing double angle quotation mark = right pointing guillemet
¼	¼	¼	\u00BC	vulgar fraction one quarter = fraction one quarter
½	½	½	\u00BD	vulgar fraction one half = fraction one half
¾	¾	¾	\u00BE	vulgar fraction three quarters = fraction three quarters
¿	¿	¿	\u00BF	inverted question mark = turned question mark
À	À	À	\u00C0	latin capital letter A with grave = latin capital letter A grave
Á	Á	Á	\u00C1	latin capital letter A with acute
Â	Â	Â	\u00C2	latin capital letter A with circumflex
Ã	Ã	Ã	\u00C3	latin capital letter A with tilde
Ä	Ä	Ä	\u00C4	latin capital letter A with diaeresis
Å	Å	Å	\u00C5	latin capital letter A with ring above = latin capital letter A ring
Æ	Æ	Æ	\u00C6	latin capital letter AE = latin capital ligature AE
Ç	Ç	Ç	\u00C7	latin capital letter C with cedilla
È	È	È	\u00C8	latin capital letter E with grave
É	É	É	\u00C9	latin capital letter E with acute
Ê	Ê	Ê	\u00CA	latin capital letter E with circumflex
Ë	Ë	Ë	\u00CB	latin capital letter E with diaeresis
Ì	Ì	Ì	\u00CC	latin capital letter I with grave
Í	Í	Í	\u00CD	latin capital letter I with acute
Î	Î	Î	\u00CE	latin capital letter I with circumflex
Ï	Ï	Ï	\u00CF	latin capital letter I with diaeresis
Ð	Ð	Ð	\u00D0	latin capital letter ETH
Ñ	Ñ	Ñ	\u00D1	latin capital letter N with tilde
Ò	Ò	Ò	\u00D2	latin capital letter O with grave
Ó	Ó	Ó	\u00D3	latin capital letter O with acute
Ô	Ô	Ô	\u00D4	latin capital letter O with circumflex
Õ	Õ	Õ	\u00D5	latin capital letter O with tilde
Ö	Ö	Ö	\u00D6	latin capital letter O with diaeresis
×	×	×	\u00D7	multiplication sign
Ø	Ø	Ø	\u00D8	latin capital letter O with stroke = latin capital letter O slash
Ù	Ù	Ù	\u00D9	latin capital letter U with grave
Ú	Ú	Ú	\u00DA	latin capital letter U with acute
Û	Û	Û	\u00DB	latin capital letter U with circumflex
Ü	Ü	Ü	\u00DC	latin capital letter U with diaeresis
Ý	Ý	Ý	\u00DD	latin capital letter Y with acute
Þ	Þ	Þ	\u00DE	latin capital letter THORN
ß	ß	ß	\u00DF	latin small letter sharp s = ess-zed
à	à	à	\u00E0	latin small letter a with grave = latin small letter a grave
á	á	á	\u00E1	latin small letter a with acute
â	â	â	\u00E2	latin small letter a with circumflex
ã	ã	ã	\u00E3	latin small letter a with tilde
ä	ä	ä	\u00E4	latin small letter a with diaeresis
å	å	å	\u00E5	latin small letter a with ring above = latin small letter a ring
æ	æ	æ	\u00E6	latin small letter ae = latin small ligature ae
ç	ç	ç	\u00E7	latin small letter c with cedilla
è	è	è	\u00E8	latin small letter e with grave
é	é	é	\u00E9	latin small letter e with acute
ê	ê	ê	\u00EA	latin small letter e with circumflex
ë	ë	ë	\u00EB	latin small letter e with diaeresis
ì	ì	ì	\u00EC	latin small letter i with grave
í	í	í	\u00ED	latin small letter i with acute
î	î	î	\u00EE	latin small letter i with circumflex
ï	ï	ï	\u00EF	latin small letter i with diaeresis
ð	ð	ð	\u00F0	latin small letter eth
ñ	ñ	ñ	\u00F1	latin small letter n with tilde
ò	ò	ò	\u00F2	latin small letter o with grave
ó	ó	ó	\u00F3	latin small letter o with acute
ô	ô	ô	\u00F4	latin small letter o with circumflex
õ	õ	õ	\u00F5	latin small letter o with tilde
ö	ö	ö	\u00F6	latin small letter o with diaeresis
÷	÷	÷	\u00F7	division sign
ø	ø	ø	\u00F8	latin small letter o with stroke
ù	ù	ù	\u00F9	latin small letter u with grave
ú	ú	ú	\u00FA	latin small letter u with acute
û	û	û	\u00FB	latin small letter u with circumflex
ü	ü	ü	\u00FC	latin small letter u with diaeresis
ý	ý	ý	\u00FD	latin small letter y with acute
þ	þ	þ	\u00FE	latin small letter thorn
ÿ	ÿ	ÿ	\u00FF	latin small letter y with diaeresis

Symbols and Greek characters

Example	Name	Decimal	Unicode	Description
ƒ	ƒ	ƒ	\u0192	latin small f with hook = function = florin
Α	Α	Α	\u0391	greek capital letter alpha
Β	Β	Β	\u0392	greek capital letter beta
Γ	Γ	Γ	\u0393	greek capital letter gamma
Δ	Δ	Δ	\u0394	greek capital letter delta
Ε	Ε	Ε	\u0395	greek capital letter epsilon
Ζ	Ζ	Ζ	\u0396	greek capital letter zeta
Η	Η	Η	\u0397	greek capital letter eta
Θ	Θ	Θ	\u0398	greek capital letter theta
Ι	Ι	Ι	\u0399	greek capital letter iota
Κ	Κ	Κ	\u039A	greek capital letter kappa
Λ	Λ	Λ	\u039B	greek capital letter lambda
Μ	Μ	Μ	\u039C	greek capital letter mu
Ν	Ν	Ν	\u039D	greek capital letter nu
Ξ	Ξ	Ξ	\u039E	greek capital letter xi
Ο	Ο	Ο	\u039F	greek capital letter omicron
Π	Π	Π	\u03A0	greek capital letter pi
Ρ	Ρ	Ρ	\u03A1	greek capital letter rho
Σ	Σ	Σ	\u03A3	greek capital letter sigma
Τ	Τ	Τ	\u03A4	greek capital letter tau
Υ	Υ	Υ	\u03A5	greek capital letter upsilon
Φ	Φ	Φ	\u03A6	greek capital letter phi
Χ	Χ	Χ	\u03A7	greek capital letter chi
Ψ	Ψ	Ψ	\u03A8	greek capital letter psi
Ω	Ω	Ω	\u03A9	greek capital letter omega
α	α	α	\u03B1	greek small letter alpha
β	β	β	\u03B2	greek small letter beta
γ	γ	γ	\u03B3	greek small letter gamma
δ	δ	δ	\u03B4	greek small letter delta
ε	ε	ε	\u03B5	greek small letter epsilon
ζ	ζ	ζ	\u03B6	greek small letter zeta
η	η	η	\u03B7	greek small letter eta
θ	θ	θ	\u03B8	greek small letter theta
ι	ι	ι	\u03B9	greek small letter iota
κ	κ	κ	\u03BA	greek small letter kappa
λ	λ	λ	\u03BB	greek small letter lambda
μ	μ	μ	\u03BC	greek small letter mu
ν	ν	ν	\u03BD	greek small letter nu
ξ	ξ	ξ	\u03BE	greek small letter xi
ο	ο	ο	\u03BF	greek small letter omicron
π	π	π	\u03C0	greek small letter pi
ρ	ρ	ρ	\u03C1	greek small letter rho
ς	ς	ς	\u03C2	greek small letter final sigma
σ	σ	σ	\u03C3	greek small letter sigma
τ	τ	τ	\u03C4	greek small letter tau
υ	υ	υ	\u03C5	greek small letter upsilon
φ	φ	φ	\u03C6	greek small letter phi
χ	χ	χ	\u03C7	greek small letter chi
ψ	ψ	ψ	\u03C8	greek small letter psi
ω	ω	ω	\u03C9	greek small letter omega
ϑ	ϑ	ϑ	\u03D1	greek small letter theta symbol
ϒ	ϒ	ϒ	\u03D2	greek upsilon with hook symbol
ϖ	ϖ	ϖ	\u03D6	greek pi symbol
•	•	•	\u2022	bullet = black small circle
…	…	…	\u2026	horizontal ellipsis = three dot leader
′	′	′	\u2032	prime = minutes = feet
″	″	″	\u2033	double prime = seconds = inches
‾	‾	‾	\u203E	overline = spacing overscore
⁄	⁄	⁄	\u2044	fraction slash
℘	℘	℘	\u2118	script capital P = power set = Weierstrass p
ℑ	ℑ	ℑ	\u2111	blackletter capital I = imaginary part
ℜ	ℜ	ℜ	\u211C	blackletter capital R = real part symbol
™	™	™	\u2122	trade mark sign
ℵ	ℵ	ℵ	\u2135	alef symbol = first transfinite cardinal
←	←	←	\u2190	leftwards arrow
↑	↑	↑	\u2191	upwards arrow
→	→	→	\u2192	rightwards arrow
↓	↓	↓	\u2193	downwards arrow
↔	↔	↔	\u2194	left right arrow
↵	↵	↵	\u21B5	downwards arrow with corner leftwards = carriage return
⇐	⇐	⇐	\u21D0	leftwards double arrow
⇑	⇑	⇑	\u21D1	upwards double arrow
⇒	⇒	⇒	\u21D2	rightwards double arrow
⇓	⇓	⇓	\u21D3	downwards double arrow
⇔	⇔	⇔	\u21D4	left right double arrow
∀	∀	∀	\u2200	for all
∂	∂	∂	\u2202	partial differential
∃	∃	∃	\u2203	there exists
∅	∅	∅	\u2205	empty set = null set = diameter
∇	∇	∇	\u2207	nabla = backward difference
∈	∈	∈	\u2208	element of
∉	∉	∉	\u2209	not an element of
∋	∋	∋	\u220B	contains as member
∏	∏	∏	\u220F	n-ary product = product sign
∑	∑	∑	\u2211	n-ary sumation
−	−	−	\u2212	minus sign
∗	∗	∗	\u2217	asterisk operator
√	√	√	\u221A	square root = radical sign
∝	∝	∝	\u221D	proportional to
∞	∞	∞	\u221E	infinity
∠	∠	∠	\u2220	angle
∧	∧	∧	\u2227	logical and = wedge
∨	∨	∨	\u2228	logical or = vee
∩	∩	∩	\u2229	intersection = cap
∪	∪	∪	\u222A	union = cup
∫	∫	∫	\u222B	integral
∴	∴	∴	\u2234	therefore
∼	∼	∼	\u223C	tilde operator = varies with = similar to
≅	≅	≅	\u2245	approximately equal to
≈	≈	≈	\u2248	almost equal to = asymptotic to
≠	≠	≠	\u2260	not equal to
≡	≡	≡	\u2261	identical to
≤	≤	≤	\u2264	less-than or equal to
≥	≥	≥	\u2265	greater-than or equal to
⊂	⊂	⊂	\u2282	subset of
⊃	⊃	⊃	\u2283	superset of
⊄	⊄	⊄	\u2284	not a subset of
⊆	⊆	⊆	\u2286	subset of or equal to
⊇	⊇	⊇	\u2287	superset of or equal to
⊕	⊕	⊕	\u2295	circled plus = direct sum
⊗	⊗	⊗	\u2297	circled times = vector product
⊥	⊥	⊥	\u22A5	up tack = orthogonal to = perpendicular
⋅	⋅	⋅	\u22C5	dot operator
⌈	⌈	⌈	\u2308	left ceiling = apl upstile
⌉	⌉	⌉	\u2309	right ceiling
⌊	⌊	⌊	\u230A	left floor = apl downstile
⌋	⌋	⌋	\u230B	right floor
⟨	⟨	〈	\u2329	left-pointing angle bracket = bra
⟩	⟩	〉	\u232A	right-pointing angle bracket = ket
◊	◊	◊	\u25CA	lozenge
♠	♠	♠	\u2660	black spade suit
♣	♣	♣	\u2663	black club suit = shamrock
♥	♥	♥	\u2665	black heart suit = valentine
♦	♦	♦	\u2666	black diamond suit

Special characters

Example	Name	Decimal	Unicode	Description
"	"	"	\u0022	quotation mark = APL quote
&	&	&	\u0026	ampersand
<	&lt;	&#60;	\u003C	less-than sign
>	&gt;	&#62;	\u003E	greater-than sign
Œ	&OElig;	&#338;	\u0152	latin capital ligature OE
œ	&oelig;	&#339;	\u0153	latin small ligature oe
Š	&Scaron;	&#352;	\u0160	latin capital letter S with caron
š	&scaron;	&#353;	\u0161	latin small letter s with caron
Ÿ	&Yuml;	&#376;	\u0178	latin capital letter Y with diaeresis
ˆ	&circ;	&#710;	\u02C6	modifier letter circumflex accent
˜	&tilde;	&#732;	\u02DC	small tilde
	&ensp;	&#8194;	\u2002	en space
	&emsp;	&#8195;	\u2003	em space
	&thinsp;	&#8201;	\u2009	thin space
‌	&zwnj;	&#8204;	\u200C	zero width non-joiner
‍	&zwj;	&#8205;	\u200D	zero width joiner
‎	&lrm;	&#8206;	\u200E	left-to-right mark
‏	&rlm;	&#8207;	\u200F	right-to-left mark
–	&ndash;	&#8211;	\u2013	en dash
—	&mdash;	&#8212;	\u2014	em dash
‘	&lsquo;	&#8216;	\u2018	left single quotation mark
’	&rsquo;	&#8217;	\u2019	right single quotation mark
‚	&sbquo;	&#8218;	\u201A	single low-9 quotation mark
“	&ldquo;	&#8220;	\u201C	left double quotation mark
”	&rdquo;	&#8221;	\u201D	right double quotation mark
„	&bdquo;	&#8222;	\u201E	double low-9 quotation mark
†	&dagger;	&#8224;	\u2020	dagger
‡	&Dagger;	&#8225;	\u2021	double dagger
‰	&permil;	&#8240;	\u2030	per mille sign
‹	&lsaquo;	&#8249;	\u2039	single left-pointing angle quotation mark
›	&rsaquo;	&#8250;	\u203A	single right-pointing angle quotation mark
€	&euro;	&#8364;	\u20AC	euro sign

閱讀更多 »

[Blogger] 2019.08.25 How To Remove the Atom In Blogger

This article is quoted form 如何移除 Blogger 討人厭的「訂閱：文章（Atom）」？超簡單教學！

Bloggers hangout presents a simple blogger trick for "How To Remove the Atom In Blogger". It makes blogs look professional.

Step 1: Sign into your blogger account.

Step 2: Choose the blog from your dashboard and then select design.

Step 3: Now select edit html and then check expand widget template which is present on right
side corner.

Step 4: Now add below Css definition above this tag ]]></b:skin> in your template.

.blog-feeds {display :none;}
.post-feeds {display :none;}

Step 5: Preview the blog and save the template.

We successfully completed the blogger trick.

閱讀更多 »

[Blogger] 2019.08.25 How To Hide Widget Title In Blogger

This article is quoted form How To Hide Widget Title In Blogger

Bloggers hangout presents a simple blogger trick for "How To Hide Widget Title In Blogger". It makes blogs look professional.

Step 1: Sign into your blogger account.

Step 2: Choose the blog from your dashboard and then select design.

Step 3: You will be navigated to page elements page and add a gadget to your blog. Add a
widget with title as Advertisements and then select design.

Step 4: Now select edit html and then check expand widget template which is present on right
side corner.

Step 5: If you are using mozilla firefox then press Ctrl +F and search for widget title as
Advertisements.
(or)

If you are using google chrome then press F3 function key and search for widget title as
advertisements.

Step 6: Check for the line below in your code
<b:widget id='HTML2' locked='false' title='Advertisements' type='HTML'/>

Step 7: Get the id of widget that is written in blue in the above code. In the above example it is HTML2.

Step 8: Now add below Css definition above this tag ]]></b:skin> in your template.

#HTML2 h2{
display: none;
}

Step 9: Preview the blog and save the template.

We successfully completed the blogger trick.

If you have any doubt about this blogger trick don't hesitate to comment.

閱讀更多 »

[Blogger] 2019.08.23 Loops, loop positions, and isFirst variables in Blogger

Looping through the listing of blog posts

<b:loop values='data:posts' var='post'>
Inside the loop data:posts changes to data.post (determined by the value of var, set here as var='post')

We can reference the id of the current post in the loop as <data:post.id />
</b:loop>


Looping through the listing of blog posts with an additional index

<b:loop values='data:posts' var='post' index='i'>
The id of the current post in the look is <data:post.id />

The position of this post in the loop index is <data:i />

We can run a IF statement against this value like so:

  <b:if cond='data:i == 2'>
    This is the post contained in the loop at position 2, which in an array is Post #3 (arrays start counting at 0)
  </b:if>

</b:loop>

To do a greater-than and less-than you need to use the HTML code for greater/less, otherwise it will throw a Blogger template error.

<b:if cond='data:i &#60;=2'> for i is less than or equal to

<b:if cond='data:i &#62;=2'> for i is greater than or equal to


"is first" variables

There are a number of "is first" variables in Blogger that are unfortunately not declared on the official variable list.

data:post.isFirstPost
This variable can be used to show a different behavior on an index page for the first post, by placing it within the data:posts loop, like so:
<b:loop values='data:posts' var='post'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
first psot!
   </b:if>
</b:loop>

data:post.isDateStart
This variable is used to group posts by date, often found on a Blogger site's index pages, where it shows all posts under one day/date, then moves to the next day/date without repeating that value.

data:post.firstImageUrl
This variable shows the URL of the first image used in the blog post. This is often handy for creating an index page of image thumbnails. But while the "thumbnail" variable (data:post.thumbnailUrl) only shows a 72 pixel square and only works for Google hosted images, this firstImageUrl variable shows the full image url and can be used for non-Google-hosted images.

data:post.sharePostUrl
This variable displays the absolute url for a blog post in question. Used in the social media share buttons, but can certainly be used in other cases.

data:post.snippet
This variable displays the first 140 characters of a blog post, or what comes before a jump break, whichever is first.

Example, albeit not for this usage:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
   <meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
   <meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>

The above code will show the first image URL as the snippet's thumbnail, along with either the post's meta description (search description in the blog post) or, if none, the 140 character snippet.


Social sharing thumbnail variable that you need

We all wanted to add a larger thumbnail image for social sharing, for example for Facebook and now Google+, but had no way to do so since the other thumbnail was only 72 pixels. Yes, there is now a new variable...

data:blog.postImageUrl
This variable, available to you in the HEAD of your template, if used on item page types, will display the first image from your blog post in all of its glory.

This article is quoted form Loops, loop positions, and isFirst variables in Blogger

閱讀更多 »

[Online Tools Practice][已測試OK] 2019.08.03 前端也能產生QRCode

Embed from Getty Images

This article is quoted form 生成二维码的 jQuery 插件：jquery.qrcode.js

預設產生的二維碼大小是 256×256，當然也可自行定義大小

Canvas版方式渲染

Table版方式渲染

自訂size (120x120)

中文 自訂size (120x120)

下圖為經過微信的掃描所呈現的結果

閱讀更多 »