一種顯示html元素的附加信息的方法和裝置的制造方法
【技術領域】
[0001] 本發(fā)明涉及計算機技術領域，特別地涉及一種顯示HTML元素的附加信息的方法 和裝置。
【背景技術】
[0002] HTML超級文本標記語言是標準通用標記語言下的一個應用，也是一種規(guī)范，一種 標準，它通過標記符號來標記要顯示的網頁中的各個部分。HTML5萬維網的核心語言、標準 通用標記語言下的一個應用超文本標記語言（HTML)的第五次重大修改。
[0003] CSS是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統(tǒng)HTML 的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的 字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前 基于文本展示最優(yōu)秀的表現設計語言。
[0004] 在一些網頁中有時需要向用戶呈現網頁元素的一些附加信息，例如對于網頁的一 段文字，需對其中某些詞語做出解釋，為了不影響這段文字的連貫性，該解釋可以僅在鼠標 懸停在該詞語上面時出現，即該解釋是一種工具提示文本（title)。在現有技術中，實現該 效果的主要方式是給需要展示附加信息的HTML元素上添加屬性并設置其屬性值為要展示 的附加信息內容，該實現方式是通過瀏覽器識別HTML元素的屬性然后由瀏覽器自己實現。 具體在編寫HTML代碼時，首先在HTML文檔中任意位置（通常緊隨需要顯示附加信息的標 簽）插入一個HTML標簽（通常為DIV標簽），然后設置這個標簽的CSS樣式（字體、背景、 位置等），然后設置顯示這個標簽的顯示隱藏觸發(fā)條件。通常我們會通過CSS或者JS來控 制鼠標懸浮或經過要顯示附加信息的元素上時顯示這個元素，鼠標移開后隱藏這個元素。
[0005] 現有技術的上述實現方式對于每個需要呈現附加信息的HTML元素，分別要進行 插入HTML標簽、設置該標簽的CSS樣式、設置顯示這個標簽的顯示隱藏觸發(fā)條件等步驟，在 需要呈現附加信息的HTML元素比較多的情況下，上述實現方式的效率比較低。另外由于用 于顯示附加信息的代碼一般并不是HTML文檔的主要內容，所以上述的實現方式在HTML文 檔中加入了比較多的次要內容，對于HTML的文檔結構造成一定影響，并且使其不易維護。

【發(fā)明內容】

[0006] 有鑒于此，本發(fā)明提供一種顯示HTML元素的附加信息的方法和裝置，對于需要呈 現附加信息的網頁的HTML文檔的開發(fā)，有助于提高開發(fā)效率，并使該HTML文檔更易于維 護。
[0007] 為實現上述目的，根據本發(fā)明的一個方面，提供了一種顯示HTML元素的附加信息 的方法。
[0008] 本發(fā)明的顯示HTML元素的附加信息的方法包括：設置超文本編輯語言（HTML)元 素的自定義屬性，該自定義屬性用于聲明該HTML元素的附加信息；設置層疊樣式表（CSS) 的偽元素來作為所述附加信息的載體。
[0009] 可選地，該方法還包括：設置所述HTML元素的定位類型為相對定位；在所述設置 層疊樣式表（CSS)的偽元素來作為所述附加信息的載體的步驟中，設置所述CSS偽元素的 定位類型為絕對定位，并且設置所述CSS偽元素相對于所述HTML元素的位置。
[0010] 可選地，在所述設置層疊樣式表（css)的偽元素來作為所述附加信息的載體的步 驟中，設置所述CSS偽元素的顯示屬性為塊狀元素。
[0011] 可選地，所述附加信息為工具提示文本；在所述設置層疊樣式表（css)的偽元素 來作為所述附加信息的載體的步驟中，設置所述CSS偽元素的背景屬性和字體顏色屬性。
[0012] 可選地，所述附加信息為工具提示文本；在所述設置層疊樣式表（CSS)的偽元素 來作為所述附加信息的載體的步驟中，設置所述CSS偽元素的顯示方式為鼠標懸浮顯示。
[0013] 根據本發(fā)明的另一方面，提供了一種顯示HTML元素的附加信息的裝置。
[0014] 本發(fā)明的顯示HTML元素的附加信息的裝置包括：第一設置模塊，用于設置超文本 編輯語言（HTML)元素的自定義屬性，該自定義屬性用于聲明該HTML元素的附加信息；第二 設置模塊，用于設置層疊樣式表（CSS)的偽元素來作為所述附加信息的載體。
[0015] 可選地，所述第二設置模塊還用于：設置所述HTML元素的定位類型為相對定位； 設置所述CSS偽元素的定位類型為絕對定位，并且設置所述CSS偽元素相對于所述HTML元 素的位置。
[0016] 可選地，所述第二設置模塊還用于設置所述CSS偽元素的顯示屬性為塊狀元素。
[0017] 可選地，所述附加信息為工具提示文本；所述第二設置模塊還用于設置所述CSS 偽元素的背景屬性和字體顏色屬性。
[0018] 可選地，所述附加信息為工具提示文本；所述第二設置模塊還用于設置所述CSS 偽元素的顯示方式為鼠標懸浮顯示。
[0019] 根據本發(fā)明的技術方案，設置HTML元素的自定義屬性，再以CSS的偽元素作為附 加信息的載體，可以實現CSS代碼的復用，提高了網頁開發(fā)的效率，并且因為無需添加過多 的CSS代碼，簡化了 HTML文檔內容，使其易于維護。
【附圖說明】
[0020] 附圖用于更好地理解本發(fā)明，不構成對本發(fā)明的不當限定。其中：
[0021] 圖1是根據本發(fā)明實施例的顯示HTML元素的附加信息的方法的基本步驟的示意 圖；
[0022] 圖2是根據本發(fā)明實施例的顯示HTML元素的附加信息的裝置的主要模塊的示意 圖。
【具體實施方式】
[0023] 以下結合附圖對本發(fā)明的示范性實施例做出說明，其中包括本發(fā)明實施例的各種 細節(jié)以助于理解，應當將它們認為僅僅是示范性的。因此，本領域普通技術人員應當認識 到，可以對這里描述的實施例做出各種改變和修改，而不會背離本發(fā)明的范圍和精神。同 樣，為了清楚和簡明，以下的描述中省略了對公知功能和結構的描述。
[0024] 圖1是根據本發(fā)明實施例的顯示HTML元素的附加信息的方法的基本步驟的示意 圖。如圖1所示，該方法主要包括步驟S11和步驟S12,由網頁代碼（包括HTML代碼和CSS 代碼）來實現。其中步驟S11中，設置超文本編輯語言（HTML)元素的自定義屬性，該自定 義屬性用于聲明該HTML元素的附加信息；步驟S12中，設置層疊樣式表（CSS)的偽元素來 作為上述附加信息的載體。在具體編寫的代碼中，上述兩步驟對應的代碼的前后位置并不 作限定。
[0025] 以下結合一段具體的代碼來說明本發(fā)明實施例的技術方案。以下代碼以顯示工具 提示文本為例，左端的數字為行號。
[0026]
【主權項】
1. 一種顯示HTML元素的附加信息的方法，其特征在于，包括： 設置超文本編輯語言（HTML)元素的自定義屬性，該自定義屬性用于聲明該HTML元素 的附加信息； 設置層疊樣式表（CSS)的偽元素來作為所述附加信息的載體。
2. 根據權利要求1所述的方法，其特征在于， 該方法還包括：設置所述HTML元素的定位類型為相對定位； 在所述設置層疊樣式表（CSS)的偽元素來作為所述附加信息的載體的步驟中，設置所 述CSS偽元素的定位類型為絕對定位，并且設置所述CSS偽元素相對于所述HTML元素的位 置。
3. 根據權利要求1所述的方法，其特征在于，在所述設置層疊樣式表（CS巧的偽元素來 作為所述附加信息的載體的步驟中，設置所述CSS偽元素的顯示屬性為塊狀元素。
4. 根據權利要求1所述的方法，其特征在于， 所述附加信息為工具提示文本； 在所述設置層疊樣式表（CSS)的偽元素來作為所述附加信息的載體的步驟中，設置所 述CSS偽元素的背景屬性和字體顏色屬性。
5. 根據權利要求1所述的方法，其特征在于， 所述附加信息為工具提示文本； 在所述設置層疊樣式表（CSS)的偽元素來作為所述附加信息的載體的步驟中，設置所 述CSS偽元素的顯示方式為鼠標懸浮顯示。
6. -種顯示HTML元素的附加信息的裝置，其特征在于，包括： 第一設置模塊，用于設置超文本編輯語言（HTML)元素的自定義屬性，該自定義屬性用 于聲明該HTML元素的附加信息； 第二設置模塊，用于設置層疊樣式表（CSS)的偽元素來作為所述附加信息的載體。
7. 根據權利要求6所述的裝置，其特征在于，所述第二設置模塊還用于： 設置所述HTML元素的定位類型為相對定位； 設置所述CSS偽元素的定位類型為絕對定位，并且設置所述CSS偽元素相對于所述HTML元素的位置。
8. 根據權利要求6所述的裝置，其特征在于，所述第二設置模塊還用于設置所述CSS偽 元素的顯示屬性為塊狀元素。
9. 根據權利要求6所述的裝置，其特征在于， 所述附加信息為工具提示文本； 所述第二設置模塊還用于設置所述CSS偽元素的背景屬性和字體顏色屬性。
10. 根據權利要求6所述的裝置，其特征在于， 所述附加信息為工具提示文本； 所述第二設置模塊還用于設置所述CSS偽元素的顯示方式為鼠標懸浮顯示。
【專利摘要】本發(fā)明提供一種顯示HTML元素的附加信息的方法和裝置，對于需要呈現附加信息的網頁的HTML文檔的開發(fā)，有助于提高開發(fā)效率，并使該HTML文檔更易于維護。本發(fā)明的顯示HTML元素的附加信息的方法包括：設置超文本編輯語言(HTML)元素的自定義屬性，該自定義屬性用于聲明該HTML元素的附加信息；設置層疊樣式表(CSS)的偽元素來作為所述附加信息的載體。
【IPC分類】G06F9-44
【公開號】CN104714802
【申請?zhí)枴緾N201510094248
【發(fā)明人】趙月明
【申請人】北京京東尚科信息技術有限公司, 北京京東世紀貿易有限公司
【公開日】2015年6月17日
【申請日】2015年3月3日