Some of the most commonly available characters related to Web Pages--zhang Xin Xu

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=1623

Before the text begins, share two characters related to the Object.
The first is a picture, a few characters and a contrasting picture that you want the corresponding HTML entity to Represent. As follows:

Then is a page, I collected some assorted character page, the address is as Follows: http://www.zhangxinxu.com/sp/character.html

Hope these two things can help you, ok, the following is the main content of this Article.

one, A quotation mark or some inner character.

Please select the font to be rendered for this table:Song BodyMicrosoft Ya-blackArialTahomaVerdana

characters and HTML entities	Description and Description
" "	This quotation mark is the quotation mark that we knock out in English punctuation mode with the direct SHIFT + quote key (the key to the left of the carriage return). Under the "arial" is oblique, the other font is generally vertical downward.
‘ ‘ ’ ’	Single quotation mark (left quote & Right quote). In fact, the Chinese input method in the Chinese punctuation mode to press the ' quote key ' characters appear.
“ “ ” ”	Double quotation marks (left double quote & Right Double quote). In fact, in the Chinese input method of the Chinese punctuation mode, Press the "shift + quote key" character Appears.
′ ′	The single apostrophe Character. It is skewed compared to the general quotation marks. It is generally used to denote unit feet (distance), radians (angles), and sometimes in minutes (time).
″ ″	Double-apostrophe Characters. The effect is consistent with the Above. But seemingly in chinese, the use of apostrophes is not uncommon.
‹ ‹ › ›	Name is unknown (hope to have the talent pointing ... ）。 But It's also a reference. A reference similar to the property of the title Number. however, according to the current usage situation, It is true that the quoted characters are less, and more so, they take advantage of their Directivity. The more common applications are in breadcrumbs, such as: Home › Blog ›web page related to some common available characters introduction
« « » »	Name is unknown (hope to have the talent pointing ... ）。 is also a reference. however, in the web, the character is not treated as a reference, but uses its left and right Directionality. For example, If you are currently viewing a page with a URL that starts with www.zhangxinxu.com, you will find that the connection between the current title is the "«" character, and the list of items in the right-hand side lists the character "»". usually, when we use the "view more" link, a lot of time is followed by». For example: See more»

second, The useful space

Please select the font to be rendered for this table:Song BodyMicrosoft Ya-blackArialTahomaVerdana

tr>

character and HTML entity	Description and description
;	This is the space we use most, that is, the space key. In html, If you use the SPACEBAR to generate this space, the space will not accumulate (only 1). To use an HTML entity representation to Accumulate. For the sake of memory, I always make this space "sp-space" (nb), although it is not really cool. This space occupies a width that is strongly influenced by the Font. There are minor damage in the Inline-block layout, which is an essential element in the two-pronged Layout. It's a little thing that people love and Hate. I have a chance to talk about this later.
 	the space name is Unknown. For the sake of memory, we might as well call it "evil (e N-ian) space". This space inherits the character of the space family: transparent drip! This space has a fairly robust feature, that is, it occupies a width of exactly 1/2 Chinese width, and is largely unaffected by the Font.
 	the space name is Unknown. For ease of memory, we might as well call it "demon (e m-o) space". This space also inherits the character of the space family: transparent drip! This space also has a fairly robust feature, that is, it occupies a width of exactly 1 Chinese width, and basically unaffected by the Font.
 	the space name is Unknown. We may call it "thin space", that is, the space is relatively thin, thin body, occupy a relatively small width. I'm not used to this thing at the moment, and it's going to be a bit of a mass actor's Addiction.

Because the spaces are transparent and invisible, you can check the blank space on the left side of the table, and you can see the space by selecting the Background.

The use of spaces in text layout

As we all know, want to sign in to register each level list has a small title, the number of characters of this tag is not equal, such as:

In order to align the following input boxes, it is necessary that all headings are nested with a fixed width label, then right-aligned (or left-aligned).

In fact, we do not need to be so troublesome, is really full of support, what multi-label, what alignment ah, is the father's mouth of the bean sprouts-purely Vegetable. Let me tell you one trick is to use a space to achieve a wide range of words and so On.

You can really click Here: the space in the text layout of the application demo

The effect is as follows (window7 IE9):

You try other browsers, you will see the same effect, although the number of text is different, but the width of the Occupy is the same, naturally, the text box behind is also Aligned. thus, Our HTML code is very concise, as Follows:

<ul>    <li class= "li" > Last name &emsp;&emsp; name: <input type= "text"/></li>    <li class = "li" > Hand &ensp; &ensp; no: <input type= "text"/></li>    <li class= "li" > E-mail: <input Type= "text"/></li></ul>

It is important to note that you want to use spaces to achieve exactly the same width. You must use an even pixel font size, such as 12px, 14px, 16px. otherwise, because the pixel does not have a half-pixel concept, "mobile phone number" text and the width of the text will be 1 pixel deviation, you are interested to try it yourself, or quite interesting.

Zxx: Speaking of space, I think of Sina Weibo is a bug, that is,   and   generated by the space is not filtered. So we can send an empty micro-blog Out.

Three arrows with no tail

Please select the font to be rendered for this table:Song BodyMicrosoft Ya-blackArialTahomaVerdana

characters and HTML entities	Description and Description
← ← ↑ ↑ → → ↓ ↓	arrow, Sogou Input method to enter the "arrow" or "up, down, left, right" can appear the Character. Can be used to point the ascending and descending sort:
? Unknown ▲ Unknown ? Unknown Unknown	Entity Triangle. There are also arrows pointing to the Effect. For example, the arrow on the Google home page:

four, dashes, hyphens, Dashed lines, etc.

Please select the font to be rendered for this table:Song BodyMicrosoft Ya-blackArialTahomaVerdana

characters and HTML entities	Description and Description
-­ Unknown	In English punctuation mode, press the "minus key" character that appears, short Connector. 5 consecutive characters The effect is:-----
– –	Can be understood as the English dash Connector. 5 consecutive characters the effect is: –––––
— —	Can be understood as the Chinese dash connector, Chinese Input Method Chinese punctuation mode "shift+ minus key" appears in the characters of the two Characters. 5 consecutive characters the effect is: —————
− −	As implies means the minus character. 5 consecutive characters the effect is: −−−−−

Short characters can be used in conjunction with the plus (+) character to implement a tree menu Effect. The minus sign connector can also be used as a minimized button:

five, the character of a typo

Please select the font to be rendered for this table:Song BodyMicrosoft Ya-blackArialTahomaVerdana

characters and HTML entities	Description and Description
√ √	Hook hooks. Can be used as a front-end verification through the Tip: test pilot Here.
X ×	Fork. In addition to being used as a reminder to not pass the validation, you can use it as a close button: test pilot Here.

six, Other characters

Please select the font to be rendered for this table:Song BodyMicrosoft Ya-blackArialTahomaVerdana

characters and HTML entities	Description and Description
... …	Is the ellipsis, the Chinese punctuation mode "shift+6 key" can be born next twin Characters. This can be used when the text overflows and the dots Indicate. This character appears to be 1 bytes less than three dot Characters.

Wait a minute......

Vii. Conclusion

The world is large, with many Characters. If the real one to toss the words, it is estimated that the day I find a girlfriend also endless. So I'm not going to say a few more characters. This article is full of ideas, I hope you can open your understanding of the character of a little perceptual, add a bit of character awareness, at the same time for the Web page production open a bit of thinking about it.

Thanks for reading, Welcome to Exchange.

Reference article: typographically correct punctuation on web sites

Original article, reprint please indicate from Zhang Xin xu-xin space-xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1623

(end of this Article)

Some of the most commonly available characters related to Web Pages--zhang Xin Xu