html5中的空格符

1,Html中空格

     不断行的空白(1个字符宽度)
   半个空白(1个字符宽度)
  一个空白(2个字符宽度)
   窄空白(小于1个字符宽度)

2,Css 的方式空格

   CSS中当 white-space 属性取值为pre时,浏览器会保留文本中的空格和换行,例如:

<div style="white-space:pre">AA   BB<div>

显示效果为: AA   BB

  CSS的 letter-spacing 属性用于设置文本中字符之间的间隔,例如:

  <div style="letter-spacing:5px;">欢迎光临!</div>

  显示效果为: 欢   迎   光   临   !

  CSS的 word-spacing 属性用于设置文本中单词之间的间隔,例如:

  <div style="word-spacing:5px">Happy new year!</div>

  显示效果为: Happy   new   year!

3 , Html 中常用的字符

&amp; &lt; &gt; &quot; &qpos; &copy; &reg; &trade;
& < > " ' © ®
& < > " ' © ®

4、几种空格符比较

HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。

&nbsp;        

它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格。在HTML中,如果你用空格键产生此空格,空格是不会累加的(只算1个)。要使用html实体表示才可累加,

该空格占据宽度受字体影响明显而强烈

&ensp;        

它叫“半角空格”,全称是En Space,en是字体排印学的计量单位,为em宽度的一半。根据定义,它等同于字体度的一半(如16px字体中就是8px)。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性:透明的,此空格有个相当稳健的特性,

就是其占据的宽度正好是1/2个中文宽度,而且基本上不受字体影响。

&emsp;        

它叫“全角空格”,全称是Em Space,em是字体排印学的计量单位,相当于当前指定的点数。例如,1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性:透明的,此空格也有个相当稳健的特性,

就是其占据的宽度正好是1个中文宽度,而且基本上不受字体影响。

&thinsp;        

它叫窄空格,全称是Thin Space。我们不妨称之为“瘦弱空格”,就是该空格长得比较瘦弱,身体单薄,占据的宽度比较小。它是em之六分之一宽

html5中的空格符的更多相关文章

  1. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  2. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  3. HTML5 中的 canvas 画布(一)

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  4. HTML5中引入的关键特性

    新特性 描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容.不指定变化后的内容如何保存 contextme ...

  5. HTML5中与页面显示相关的API

    1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

  6. HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  7. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  8. HTML5中id可以用数字开头,但在css中不能正常使用

    昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...

  9. HTML5中的sessionStorage和localStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

随机推荐

  1. POJ 1274 二分图匹配

    匈牙利算法 裸题 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...

  2. Java 类和对象12

    构造一辆汽车,油箱容量100L,当前里程数0,当前油量0,可以根据道路状况确定油耗,根据行驶速度与行驶时间, 输出当前油量与总里程数. public class Car_1 { // 车牌 priva ...

  3. EasyUI 之 DataGrid的两种赋值方法

    方法一:使用ViewData赋值 首先,我们创建一个User的实体类 public class User { public string UserID; public string UserName; ...

  4. CF949C Data Center Maintenance(建图+强联通分量)

    题意 有 n 个信息中心,第 i 个信息中心要在第 ti 个小时维护,维护期间信息不能被获得. 每个用户的数据都有两份备份,第 i 个用户的数据放在信息中心 c(i,1) 和 c(i,2). 现在要挑 ...

  5. PostgreSQL指定用户可访问的数据库pg_hba.conf

    进入指定目录: # cd /var/lib/pgsql/9.3/data/ 使用vi编辑pg_hba.conf文件 # vi pg_hba.conf 以上配置为所有IP及网关都允许访问,使用MD5认证 ...

  6. Could not create connection to database server. Attempted reconnect 3 times. Giving up.错误

    项目是基于springboot框架,昨天从git上pull代码之后也没有具体看更改的地方,结果运行的时候就报错了. java.sql.SQLNonTransientConnectionExceptio ...

  7. 【APP自动化】Appium Android 元素定位方法 原生+H5

    参考资料: http://blog.csdn.net/vivian_ljx/article/details/54410024

  8. 洛谷 P1020 导弹拦截 (LIS)

    第一问最长 不上升子序列,第二问最长上升子序列 套模板就好https://blog.csdn.net/qq_34416123/article/details/81358447 那个神奇的定理当作结论吧 ...

  9. HDU 4939 Stupid Tower Defense 简单DP

    题意: 地图为长为n个单位长度的直线,每通过一个单位长度需要t秒. 有3种塔,红塔可以在当前格子每秒造成x点伤害,绿塔可以在之后格子造成y点伤害,蓝塔可以使通过单位长度的时间增加z秒. 让你安排塔的排 ...

  10. Ehcache学习总结(2)--Ehcache整合spring配置

    首先需要的maven依赖为: [html] view plain copy <!--ehcache--> <dependency> <groupId>com.goo ...