IT工程師數位筆記本

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　           

  相信大家都熟悉通過字符實體   來實現多個連續空格的輸入吧！本文打算對三類HTML實體及JS相關操作作進一步的整理和小結，若有紕漏請大家指正，謝謝。

二、初識HTML實體                                         　　　　　　　　　　              

  由于HTML中某些字符是預留的（如>和<等），若要在進行HTML解析出來后能正確顯示預留字符，則需要使用字符實體來代替了。

  字符實體有三種表示方式：

// Named character reference(實體名)
// 示例： 
&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