web页面相关的一些常见可用字符介绍

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1623

正文开始之前先分享两个与字符相关的东西。
首先是一张图片，是一张一些字符以及想对应的HTML实体表示的对照图片。如下：

然后是一个页面，是我收集的些杂七杂八字符页面，地址如下：http://www.zhangxinxu.com/sp/character.html

希望这两个东西能对您有所帮助，ok，下面是本文的主要内容。

一、引号模样或内心的些字符

请选择该表格要呈现的字体：
宋体
微软雅黑
arial
Tahoma
Verdana

二、有用的空格们

请选择该表格要呈现的字体：
宋体
微软雅黑
arial
Tahoma
Verdana

因为空格都是透明不可见的，你可以选中表格左侧的空白区域，透过选中背景可以大致看出空格的存在。

空格在文字布局中的应用

我们都知道，想登录注册每个水平列表都有一个小标题，这个标签的文字个数是不相等的，如下图：

为了让后面的输入框们对齐，不得已，所有的标题外面都要嵌套一层定宽的标签，然后右对齐（或左对齐）。

而实际上，我们根本就不需要这么麻烦，真是吃饱了撑的，什么多标签，什么对齐啊，都是老爸嘴里的黄豆芽——纯属小菜。我告诉你们一招，就是使用空格来实现字数不等的文字也能等宽布局。

您可以狠狠地点击这里：空格在文字布局中的应用demo

效果如下截图(window7 IE9)：

你试试其他的浏览器，会看到同样的效果，文字虽然个数不一，但是所占据的宽度都是一样的，自然而然的，后面的文本框也是对齐的啦。于是乎，我们的HTML代码就非常的简洁了，如下：

<ul>
    <li class="li">姓&emsp;&emsp;名：<input type="text" /></li>
    <li class="li">手&ensp;机&ensp;号：<input type="text" /></li>
    <li class="li">电子邮箱：<input type="text" /></li>
</ul>

需要注意的是，要想用空格实现完全相等的宽度。必须使用偶数像素的字体大小，例如12px, 14px, 16px。否则由于像素没有半像素这个概念，“手机号”文字与上下文字的宽度会有1像素的偏差，您有兴趣可以自己试试，还是蛮有意思的。

//zxx:说到空格，我想起了新浪微博的一个算是bug的问题，就是由 和 生成的空格并没有过滤。于是我们可以发送空的微博出去。

三、箭头以及没有尾巴的箭头

请选择该表格要呈现的字体：
宋体
微软雅黑
arial
Tahoma
Verdana

字符以及HTML实体	描述以及说明
← ← ↑ ↑ → → ↓ ↓	箭头，搜狗输入法输“箭头”或“上、下、左、右”都可以出现该字符。可用在升降排序的指向上：
◀ 未知 ▲ 未知 ▶ 未知 ▼ 未知	实体三角。也有箭头指向的作用。例如google首页的那个箭头：

四、短横线、连字符、虚线之类

请选择该表格要呈现的字体：
宋体
微软雅黑
arial
Tahoma
Verdana

短字符可以与加号(+)字符配合使用实现树形菜单效果。减号连接符还可以当做最小化按钮使用：

五、对错字符

请选择该表格要呈现的字体：
宋体
微软雅黑
arial
Tahoma
Verdana

字符以及HTML实体	描述以及说明
√ √	钩钩。可以用做前端验证通过的提示： 测试点这里。
× ×	叉叉。除了用做验证不通过的提示外，可可以当做关闭按钮： 测试点这里。

六、其他字符

请选择该表格要呈现的字体：
宋体
微软雅黑
arial
Tahoma
Verdana

等等……

七、结语

世界之大，字符之多。要是真正一个一个去折腾的话，估计折腾到我找到女朋友那天也折腾不完的。所以，其他一些字符我就不多说了。本文内容全当抛砖引玉，希望可以开启你对字符一点感性的认识，增加一点字符使用意识，同时为web页面制作开阔一点思路吧。

感谢阅读，欢迎交流。

参考文章：Typographically correct punctuation on web sites

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1623

（本篇完）