JS魔法堂:再识ASCII实体、符号实体和字符实体
一、前言
相信大家都熟悉通过字符实体 来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢。
二、初识HTML实体
由于HTML中某些字符是预留的(如>和<等),若要在进行HTML解析出来后能正确显示预留字符,则需要使用字符实体来代替了。
字符实体有三种表示方式:
// Named character reference(实体名)
// 示例:
&entity_name; // Decimal numeric character reference(十进制实体编号)
// 示例:å
&#entity_number; // Hexademical numeric character reference(十六进制实体编号)
// 示例:水
ntity_number;
实体名好处是便于记忆,但不一定所有浏览器能识别所有实体名。
而所有浏览器均能识别所有的实体编号。
注意:实体名是大小写敏感的哦!
三、3种实体类型
实体分为ASCII实体、字符实体和符号实体。具体请参考HTML ISO-8859-1 参考手册 或 XHTML Character Entity Reference。
对于每个实体的使用请参考@张鑫旭的《web页面相关的一些常见可用字符介绍》,这里就借用一下关于空格符部分的内容。
,不是space键产生的空格。宽度受到字体的影响。代表non-breaking space(不间断空白),严格语义上是使用场景不希望自动换行时使用,但浏览器会合并多个半角空格(\u0020,由space键产生的空格),因此我们习惯用 (unicode为\u00A0)来描述多个空格。
  ,1/2个中文字符宽度,且宽度不受字体的影响。
  ,1个中文字符宽度,且宽度不受字体的影响。
  ,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实体、符号实体和字符实体的更多相关文章
- 再识ASCII实体、符号实体和字符实体
一.前言 相信大家都熟悉通过字符实体 来实现多个连续空格的输入吧!本文打算对三类HTML实体及JS相关操作作进一步的整理和小结,若有纰漏请大家指正,谢谢. 二.初识HTML实 ...
- JS魔法堂:doctype我们应该了解的基础知识
一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...
- JS魔法堂:不完全国际化&本地化手册 之 实战篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- JS魔法堂:LINK元素深入详解
一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- JS魔法堂:jsDeferred源码剖析
一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...
- JS魔法堂:那些困扰你的DOM集合类型
一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
- JS魔法堂:精确判断IE的文档模式by特征嗅探
一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...
随机推荐
- Building Apps for Windows Phone 8.1教程下载地址整理
官方教程地址http://channel9.msdn.com/Series/Building-Apps-for-Windows-Phone-8-1http://media.ch9.ms/ch9/8db ...
- .Net Core开源通讯组件 SmartRoute(服务即集群)
SmartRoute是基于Dotnet Core设计的可运行在linux和windows下的服务通讯组件,其设计理念是去中心化和零配置即可实现服务通讯集群.SmartRoute是通过消息订阅的机制实现 ...
- 【Bugly干货】Android性能优化典范之多线程篇
本文涉及的内容有:多线程并发的性能问题,介绍了 AsyncTask,HandlerThread,IntentService 与 ThreadPool 分别适合的使用场景以及各自的使用注意事项,这是一篇 ...
- Java IO2:RandomAccessFile
RandomAccessFile RandomAccessFile类可以说是Java语言中功能最为丰富的文件访问类,它提供了众多的文件访问方法.RandomAccessFile类支持"随机访 ...
- Java虚拟机9:Java类加载机制
前言 我们知道我们写的程序经过编译后成为了.class文件,.class文件中描述了类的各种信息,最终都需要加载到虚拟机之后才能运行和使用.而虚拟机如何加载这些.class文件?.class文件的信息 ...
- dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner
dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...
- nw.js如何处理拖放操作
nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了. 首先我们看一下一个正常的页面,直接拖放 ...
- ZooKeeper学习第一期---Zookeeper简单介绍
一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同 ...
- Nim教程【七】
这是国内第一个关于Nim的系列教程 先说废话 很开心,在今天凌晨快一点多的时候拿到了 nim-lang.com:nim-lang.cn:nim-lang.net 这三个域名,到不是为了投资,准备用ni ...
- IT传统组织结构及新型扁平化组织
如今互联网企业正凶猛的改变人们衣食住行的方方面面,衣->淘宝,蘑菇街;食->大众点评,口碑;住->去哪,途牛:行->12306, 多次听到互联网的同行介绍他们就是要“快”,快速 ...