一、前言                                         

相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类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. .Net平台下,分布式文件存储的实现

    遇到的问题 对于Web程序,使用一台服务器的时候,客户端上传的文件一般也都是存储在这台服务器上.但在集群环境中就行不通了,如果每个服务器都存储自己接受到的文件,就乱套了,数据库中明明有这个附件的记录, ...

  2. Kylin查询性能低下原因分析

    在处理指数行情数据时(IDXD),我遇到一个KYLIN性能查询低下的问题,非常奇怪.经过一番研究发现了其中的原因并顺利解决: 症状: select count(*) from sensitop.idx ...

  3. 图解,为多个oracle数据库下添加ArcSde实例

    最开始肯定要先建一个oracle数据库,我假设名称为dbgis 1, 2, 3, 不重新指定就会出现这个错误,因为以前有sde.dbf文件了 4, 5, 6, 7, 8, 如果以前授权成功过就会出现这 ...

  4. [.net 面向对象编程基础] (19) LINQ基础

    [.net 面向对象编程基础] (19)  LINQ基础 上两节我们介绍了.net的数组.集合和泛型.我们说到,数组是从以前编程语言延伸过来的一种引用类型,采用事先定义长度分配存储区域的方式.而集合是 ...

  5. 使用亚马逊的Route53服务

    自从自己的博客从github迁移到AWS以上,再也不用担心Github被墙了.再加上CloudFront的CDN功能,那访问速度真是杠杆的,无论是在中国内陆,还是澳洲海边,秒开无压力. 但是这几天突然 ...

  6. cocoapods 更新

    sudo gem update --system sudo gem install cocoapods pod setup pod --version

  7. MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突

    在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体类属性名不相同的冲突. 一.准备演示需要使用的表和数据 CREATE TAB ...

  8. 基于Oracle的SQL优化(社区万众期待 数据库优化扛鼎巨著)

    基于Oracle的SQL优化(社区万众期待数据库优化扛鼎巨著) 崔华 编   ISBN 978-7-121-21758-6 2014年1月出版 定价:128.00元 856页 16开 编辑推荐 本土O ...

  9. iOS-数据持久化基础-沙盒机制

    沙盒详解 1.IOS沙盒机制 IOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文 ...

  10. iOS-数据持久化-对象归档

    一.简单说明 对象归档是将对象归档以文件的形式保存到磁盘中(也称为序列化,持久化),使用的时候读取该文件的保存路径读取文件的内容(也称为接档,反序列化), (对象归档的文件是保密的,在磁盘上无法查看文 ...