zoukankan      html  css  js  c++  java
  • JS魔法堂:再识ASCII实体、符号实体和字符实体

    一、前言                                         

      相信大家都熟悉通过字符实体   来实现多个连续空格的输入吧!本文打算对三类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

  • 相关阅读:
    数据不是搜集起来的,是沉淀下来的,跟脚印一样,脚印不是修路的人搜集起来的,只要有了路就一定有脚印,不可能说修一条路不留下脚印,世界上没有这样的路
    VC6.0编译的DLL文件能否反编译知道里面的代码?
    Why does the PDB format change every release?
    mysql_query与 mysql_real_query区别
    如何把Backtrack 5安装到U盘/Backtrack 4安装方法
    FreeBSD:像Linux下一样使用vim
    栈的出栈序列个数
    npm outdated -g --depth=0
    npm Updating packages downloaded from the registry
    TypeScript安装
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/4319483.html
Copyright © 2011-2022 走看看