一、前言                                         

相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢。

二、初识HTML实体                                                                 

由于HTML中某些字符是预留的(如>和<等),若要在进行HTML解析出来后能正确显示预留字符,则需要使用字符实体来代替了。

字符实体有三种表示方式:

// Named character reference(实体名)
// 示例:&nbsp;
&entity_name; // Decimal numeric character reference(十进制实体编号)
// 示例:&#229
&#entity_number; // Hexademical numeric character reference(十六进制实体编号)
// 示例:&#x6C34
&#xentity_number;

实体名好处是便于记忆,但不一定所有浏览器能识别所有实体名。

而所有浏览器均能识别所有的实体编号。

注意:实体名是大小写敏感的哦!

三、3种实体类型                                     

实体分为ASCII实体、字符实体和符号实体。具体请参考HTML ISO-8859-1 参考手册XHTML Character Entity Reference

对于每个实体的使用请参考@张鑫旭的《web页面相关的一些常见可用字符介绍》,这里就借用一下关于空格符部分的内容。

&nbsp; ,不是space键产生的空格。宽度受到字体的影响。代表non-breaking space(不间断空白),严格语义上是使用场景不希望自动换行时使用,但浏览器会合并多个半角空格(\u0020,由space键产生的空格),因此我们习惯用&nbsp(unicode为\u00A0)来描述多个空格。

&ensp; ,1/2个中文字符宽度,且宽度不受字体的影响。

&emsp; ,1个中文字符宽度,且宽度不受字体的影响。

&thinsp; ,1/15个em宽度的space,在标准的情况下差不多1px,有时候指1/16em,参考http://en.wikipedia.org/wiki/Thin_space

题外话:全角空格的unicode为\u3000。

四、通过outerHTML,innerHTML,innerText,textContent和value操作实体 

首先我们需要将3种实体类型分成两类,ASCII实体为一类,字符实体和符号实体为一类。

对于ASCII实体

1. 非表单元素的outerHTML和innerHTML只能获取实体名或实体编号;

2. IE/Chrome下非表单元素的innerText可获取对应的字符;

3. IE9+/FF/Chrome的非表单元素的textContent可获取对应的字符;

4. textarea的value可获取对应的字符。

  对于字符实体和符号实体

只能获取对应的字符,无法直接获取实体名和实体编号。

五、总结                                  

若有纰漏请大家指正,谢谢。

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4319483.html ^_^肥仔John

JS魔法堂:再识ASCII实体、符号实体和字符实体的更多相关文章

  1. 再识ASCII实体、符号实体和字符实体

    一.前言            相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢. 二.初识HTML实 ...

  2. JS魔法堂:doctype我们应该了解的基础知识

    一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...

  3. JS魔法堂:不完全国际化&本地化手册 之 实战篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

  4. JS魔法堂:属性、特性,傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  5. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  6. JS魔法堂:IMG元素加载行为详解

    一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...

  7. JS魔法堂:jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  8. JS魔法堂:那些困扰你的DOM集合类型

    一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...

  9. JS魔法堂:精确判断IE的文档模式by特征嗅探

    一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...

随机推荐

  1. 渣渣小本求职复习之路每天一博客系列——Unix&Linux入门(5)

    前情回顾:昨天简单地介绍了一下如何使用vi编辑器,例如命令模式和插入模式的切换,以及一些简单命令的讲解. —————————————————————————直接就开始吧———————————————— ...

  2. 本地DNS安装

    在centOS里最常用的DNS服务工具应该是bind了.下面就以bind为例做一个DNS服务. 首先查看bind 是否已经安装 Rpm -qa | gerp bind 如果没有的话就用yum 安装一下 ...

  3. mac 命令行批量删除.svn[转]

    mac下.svn是隐藏文件,而且即使我们调成可见的,一个一个删也很麻烦.今天正好同事问起来这个命令,于是想可能有些人也需要,于是还是放到博客里吧 命令比较简单,其实就是一条linux命令,打开终端,首 ...

  4. 如何在CRM系统中集成ActiveReports最终报表设计器

    有时候,将ActiveReports设计器集成到业务系统中,为用户提供一些自定义的数据表,用户不需要了解如何底层的逻辑关系和后台代码,只需要选择几张关联的数据表,我们会根据用户的选择生成可供用户直接使 ...

  5. Senparc.Weixin.MP SDK 微信公众平台开发教程(十五):消息加密

    前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到U ...

  6. MVVM架构~knockoutjs系列之正则表达式使规则更灵活

    返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...

  7. EF架构~CodeFirst自关联表的插入

    回到目录 这个文章对之前EF的一个补充,对于一些自关联表的添加,如果你建立了表约束确实有这种问题,一般主键为整形自增,父ID为可空,这时,在添加时如果不为ID赋值,结果就会出错. 错误: 无法确定依赖 ...

  8. MySQL的Grant命令[转]

    本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删 ...

  9. Lua字符串库(整理)

    Lua字符串库小集 1. 基础字符串函数:    字符串库中有一些函数非常简单,如:    1). string.len(s) 返回字符串s的长度:    2). string.rep(s,n) 返回 ...

  10. salesforce 零基础学习(三十八)Translate 的使用(国际化处理)

    本篇参考:http://resources.docs.salesforce.com/200/17/en-us/sfdc/pdf/salesforce_workbench_cheatsheet.pdf ...