一种显示html元素的附加信息的方法和装置的制造方法
【技术领域】
[0001] 本发明涉及计算机技术领域，特别地涉及一种显示HTML元素的附加信息的方法 和装置。
【背景技术】
[0002] HTML超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种 标准，它通过标记符号来标记要显示的网页中的各个部分。HTML5万维网的核心语言、标准 通用标记语言下的一个应用超文本标记语言（HTML)的第五次重大修改。
[0003] CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML 的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的 字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前 基于文本展示最优秀的表现设计语言。
[0004] 在一些网页中有时需要向用户呈现网页元素的一些附加信息，例如对于网页的一 段文字，需对其中某些词语做出解释，为了不影响这段文字的连贯性，该解释可以仅在鼠标 悬停在该词语上面时出现，即该解释是一种工具提示文本（title)。在现有技术中，实现该 效果的主要方式是给需要展示附加信息的HTML元素上添加属性并设置其属性值为要展示 的附加信息内容，该实现方式是通过浏览器识别HTML元素的属性然后由浏览器自己实现。 具体在编写HTML代码时，首先在HTML文档中任意位置（通常紧随需要显示附加信息的标 签）插入一个HTML标签（通常为DIV标签），然后设置这个标签的CSS样式（字体、背景、 位置等），然后设置显示这个标签的显示隐藏触发条件。通常我们会通过CSS或者JS来控 制鼠标悬浮或经过要显示附加信息的元素上时显示这个元素，鼠标移开后隐藏这个元素。
[0005] 现有技术的上述实现方式对于每个需要呈现附加信息的HTML元素，分别要进行 插入HTML标签、设置该标签的CSS样式、设置显示这个标签的显示隐藏触发条件等步骤，在 需要呈现附加信息的HTML元素比较多的情况下，上述实现方式的效率比较低。另外由于用 于显示附加信息的代码一般并不是HTML文档的主要内容，所以上述的实现方式在HTML文 档中加入了比较多的次要内容，对于HTML的文档结构造成一定影响，并且使其不易维护。
【发明内容】
[0006] 有鉴于此，本发明提供一种显示HTML元素的附加信息的方法和装置，对于需要呈 现附加信息的网页的HTML文档的开发，有助于提高开发效率，并使该HTML文档更易于维 护。
[0007] 为实现上述目的，根据本发明的一个方面，提供了一种显示HTML元素的附加信息 的方法。
[0008] 本发明的显示HTML元素的附加信息的方法包括：设置超文本编辑语言（HTML)元 素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；设置层叠样式表（CSS) 的伪元素来作为所述附加信息的载体。
[0009] 可选地，该方法还包括：设置所述HTML元素的定位类型为相对定位；在所述设置 层叠样式表（CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的 定位类型为绝对定位，并且设置所述CSS伪元素相对于所述HTML元素的位置。
[0010] 可选地，在所述设置层叠样式表（css)的伪元素来作为所述附加信息的载体的步 骤中，设置所述CSS伪元素的显示属性为块状元素。
[0011] 可选地，所述附加信息为工具提示文本；在所述设置层叠样式表（css)的伪元素 来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的背景属性和字体颜色属性。
[0012] 可选地，所述附加信息为工具提示文本；在所述设置层叠样式表（CSS)的伪元素 来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的显示方式为鼠标悬浮显示。
[0013] 根据本发明的另一方面，提供了一种显示HTML元素的附加信息的装置。
[0014] 本发明的显示HTML元素的附加信息的装置包括：第一设置模块，用于设置超文本 编辑语言（HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；第二 设置模块，用于设置层叠样式表（CSS)的伪元素来作为所述附加信息的载体。
[0015] 可选地，所述第二设置模块还用于：设置所述HTML元素的定位类型为相对定位； 设置所述CSS伪元素的定位类型为绝对定位，并且设置所述CSS伪元素相对于所述HTML元 素的位置。
[0016] 可选地，所述第二设置模块还用于设置所述CSS伪元素的显示属性为块状元素。
[0017] 可选地，所述附加信息为工具提示文本；所述第二设置模块还用于设置所述CSS 伪元素的背景属性和字体颜色属性。
[0018] 可选地，所述附加信息为工具提示文本；所述第二设置模块还用于设置所述CSS 伪元素的显示方式为鼠标悬浮显示。
[0019] 根据本发明的技术方案，设置HTML元素的自定义属性，再以CSS的伪元素作为附 加信息的载体，可以实现CSS代码的复用，提高了网页开发的效率，并且因为无需添加过多 的CSS代码，简化了 HTML文档内容，使其易于维护。
【附图说明】
[0020] 附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
[0021] 图1是根据本发明实施例的显示HTML元素的附加信息的方法的基本步骤的示意 图；
[0022] 图2是根据本发明实施例的显示HTML元素的附加信息的装置的主要模块的示意 图。
【具体实施方式】
[0023] 以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种 细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识 到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同 样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
[0024] 图1是根据本发明实施例的显示HTML元素的附加信息的方法的基本步骤的示意 图。如图1所示，该方法主要包括步骤S11和步骤S12,由网页代码（包括HTML代码和CSS 代码）来实现。其中步骤S11中，设置超文本编辑语言（HTML)元素的自定义属性，该自定 义属性用于声明该HTML元素的附加信息；步骤S12中，设置层叠样式表（CSS)的伪元素来 作为上述附加信息的载体。在具体编写的代码中，上述两步骤对应的代码的前后位置并不 作限定。
[0025] 以下结合一段具体的代码来说明本发明实施例的技术方案。以下代码以显示工具 提示文本为例，左端的数字为行号。
[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伪元素的显示方式为鼠标悬浮显示。
【专利摘要】本发明提供一种显示HTML元素的附加信息的方法和装置，对于需要呈现附加信息的网页的HTML文档的开发，有助于提高开发效率，并使该HTML文档更易于维护。本发明的显示HTML元素的附加信息的方法包括：设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体。
【IPC分类】G06F9-44
【公开号】CN104714802
【申请号】CN201510094248
【发明人】赵月明
【申请人】北京京东尚科信息技术有限公司, 北京京东世纪贸易有限公司
【公开日】2015年6月17日
【申请日】2015年3月3日