字符引用和空白字符
看到最近有讨论,前些日子刚好也收集过一些资料,补充如下:
字符引用
在 html 中,有三种字符引用方式(参考 HTML5 规范):
- Named character references, 通过名称来引用。在 HTML 4.01 中称之为 Character entity references(字符实体引用)比如 < > ", 这里有一份详细列表 named-character-references
- Decimal numeric character reference, 通过十进制数值来引用。比如 å И
- Hexadecimal numeric character reference, 通过十六进制数值来引用。比如 å 水
在 HTML 4.01 中,上面 2 和 3 归为一种:Numeric character references(字符数值引用)。
这里有份非常好的对照表:XHTML Character Entity Reference
在 javascript 中,特殊字符用反斜杠转义,比如 \t, \n, \u0020, 这个不必多说。
在 css 中,只支持 unicode 转义。比如 \0020.
注意:\u0020 在 js 中,必须有 u, 而且必须 4 位。在 css 中,u 必须省略,同时可以省略前导 0. 比如 \0020 在 css 中可以简化为 \20. 因此那个常见的 clearfix, 可以简化为 content: ‘\20′. 好友怿飞提到的兼容性和语义,应该指的是这个。content 后直接用空格或其它空白字符,会导致某些兼容性问题。
空白字符
说到字符引用,不得不提一下空白字符。在 JavaScript 的正则里,\s 是 unicode-aware 的,可以匹配 \u0020, \u0009 等空白字符。但各个浏览器的实现有差异,具体可以参见:JavaScript, Regex, and Unicode.
大部分情况下,JS 类库在实现 trim 方法时,使用 /^\s+|\s+$/g 即可。
在 jQuery 中,加入了对 \u00A0 的检测:/^(\s|\u00A0)+|(\s|\u00A0)+$/g
\u00A0 其实就是 代表 non-breaking space(不间断空白)
关于 , 严格语义上来说,使用场景是不希望自动换行时使用。
但现实中,绝大部分情况下, 就用来表示纯粹的空格。因为多个字符空格在 html 中会被当成一个空格,为了连续输出多个空格,只好用 (毕竟用 css 控制太麻烦)。按理说用多个   输出多个空格是最好的选择,但强大的 html 引擎依旧会把多个   转换成一个。
jQuery 的 trim 方法加入 \u00A0, 是种无奈,但也是一种对现实标准的认可。
一切皆权衡。

January 25th, 2010 on 9:48
顶。
“关于 , 严格语义上来说,使用场景是不希望自动换行时使用。” 这点深有体会。在很多移动设备浏览器上,长英文之间使用 实体连接,文本不会换行,但是使用普通空格,文本是会自动换行的。由此也可见它们之间的细腻区别。
另外需要多个空格也只能使用 才可以做到~
January 25th, 2010 on 10:01
自动转义了……上面说的是:
“长英文之间使用&nbsp;实体连接,文本不会换行”
“另外需要多个空格也只能使用&nbsp;才可以做到~”
January 25th, 2010 on 10:55
貌似可以这样 content:” ,即空串,貌似没有什么兼容性问题。本身 clearfix 就不需要有什么内容的。
January 25th, 2010 on 11:09
还是玉伯兄研究的更加透彻,学习了~
January 27th, 2010 on 22:06
@birdstudio
空串的话,如果.clearfix:after没有设置height或者height为0
并且.clearfix为body中第一个子元素
并且.clearfix的高度为0 (包括边框和padding在内)
并且body没有边框或padding时
在firefox中会有一个bug,就是当给.clearfix设置margin-bottom时,会同时在.clearfix的上方出现同样高度的莫明空白。
leave a reply