JS魔法堂 再識ASCII實體 符號實體和字元實體

2021-09-23 21:31:29 字數 1573 閱讀 4702

一、前言

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

二、初識html實體

由於html中某些字元是預留的(如》和《等),若要在進行html解析出來後能正確顯示預留字元,則需要使用字元實體來代替了。

字元實體有三種表示方式:

// named character reference(實體名)

// 示例: 

&entity_name;

// decimal numeric character reference(十進位制實體編號)

// 示例:å

&#entity_number;

// hexademical numeric character reference(十六進製制實體編號)

// 示例:水

ntity_number;

按 ctrl+c 複製**

實體名好處是便於記憶,但不一定所有瀏覽器能識別所有實體名。

而所有瀏覽器均能識別所有的實體編號。

注意:實體名是大小寫敏感的哦!

三、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,參考

題外話:全形空格的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可獲取對應的字元。

對於字元實體和符號實體

只能獲取對應的字元,無法直接獲取實體名和實體編號。

五、總結

若有紕漏請大家指正,謝謝。

JS魔法堂 doctype我們應該了解的基礎知識

一 前言 什麼是doctype?其實我們一直使用,卻很少停下來看清楚它到底是什麼,對網頁有什麼作用。本篇將和大家一起 那個默默無聞的doctype吧!二 什麼是doctype doctype或dtd就是宣告在文件首行,位於前,用於告知瀏覽器該文件遵循那種級別的html或xhtml規範。其宣告格式如下...

JS魔法堂 關於元素位置和滑鼠位置的屬性

一 關於滑鼠位置的屬性 1.觸發滑鼠事件的區域 盒子模型中的border,padding,content區域會觸發滑鼠事件,點選margin區域將不觸發滑鼠事件。2.滑鼠事件物件mouseevent下的屬性 注意 1.ie5.5 8不支援該屬性,polyfill方法pagex clientx scr...

JS魔法堂 函式過載 之 獲取變數的資料型別

brief 有時我們需要根據入參的資料型別來決定呼叫哪個函式實現,就是說所謂的函式過載 function overloading 因為js沒有內建函式過載的特性,正好給機會我們思考和實現一套這樣的機制。使用方式 function foo foo object,number function o,n ...