html中空格的使用,全角和半角以及html转义符  - html教程,html5教程,html知识积累 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> html >> html中空格的使用,全角和半角以及html转义符 

原创 html中空格的使用,全角和半角以及html转义符 

标签:空格

html中空格的使用,全角和半角以及html转义符 。通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个;可以使用使用html空格转义符 解决或者全角空格,所有输入法都一样,月亮表示半角,太阳表示全角,一个全角空格占用1个汉字大小,兼容性非常好

1、使用space输出空格

通常情况下,HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。比如你在两个字之间加了10个空格,HTML会截去9个空格,只保留一个。

如果只是需要稍微的分开文字的话,可以使用此方法,简单好用

2、使用html空格转义符" "

此方法可以连续输出多个空格,但浏览器兼容性不太好,即在不同浏览器中的空格大小是不一样的;

为什么呢,因为不同浏览器默认的字体是不一样的,不同字体下的空格表示 占位大小不一致.

知道原因后,就好解决了,我们可以对 指定使用同样的字体就能让 显示同样的占位了.

经过测试,当指定Times New Roman字体时,各浏览器都支持良好,每4个 显示的占位是一个汉字字符,而使用宋体或黑体则不能达到目的.

下面来看下实例:

<p>4个空格&nbsp;&nbsp;&nbsp;&nbsp;,未指定字体</p>
<p style="font-family:'微软雅黑';">4个空格&nbsp;&nbsp;&nbsp;&nbsp;,指定字体=微软雅黑</p>
<p style="font-family:'宋体';">4个空格&nbsp;&nbsp;&nbsp;&nbsp;,指定字体=宋体</p>
<p style="font-family:'Times New Roman';">4个空格&nbsp;&nbsp;&nbsp;&nbsp;,指定字体=Times New Roman</p>

3、使用全角空格

把键盘输出切换到全角状态,如下qq输入法,点击月亮标记,切换到全角→太阳标记(所有输入法都一样,月亮表示半角,太阳表示全角),然后使用space输出空格,一个全角空格占用1个汉字大小,兼容性非常好

下面来比较这3中空格效果

<p>4个空格&nbsp;&nbsp;&nbsp;&nbsp;,未指定字体</p>
<p style="font-family:'微软雅黑';">4个空格&nbsp;&nbsp;&nbsp;&nbsp;,指定字体=微软雅黑</p>
<p style="font-family:'宋体';">4个空格&nbsp;&nbsp;&nbsp;&nbsp;,指定字体=宋体</p>
<p style="font-family:'Times New Roman';">4个空格&nbsp;&nbsp;&nbsp;&nbsp;,指定字体=Times New Roman</p>
<p>4个空格    ,半角角space输出4个空格</p>
<p>4个空格  ,全角space输出2个空格</p>
<p>4个空格输出汉字比较</p>

可以看出,在中文状态下,微软雅黑和全角空格效果最好,需要什么样的效果、如何使用、选择那种方式,大家自己斟酌就好。

原创文章内容原创,转载请注明出处:cssteach.com

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-9-128.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版