CN104714802A - 一种显示html元素的附加信息的方法和装置 - Google Patents

一种显示html元素的附加信息的方法和装置 Download PDF

Info

Publication number
CN104714802A
CN104714802A CN201510094248.3A CN201510094248A CN104714802A CN 104714802 A CN104714802 A CN 104714802A CN 201510094248 A CN201510094248 A CN 201510094248A CN 104714802 A CN104714802 A CN 104714802A
Authority
CN
China
Prior art keywords
css
additional information
pseudo
html
arranging
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201510094248.3A
Other languages
English (en)
Inventor
赵月明
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201510094248.3A priority Critical patent/CN104714802A/zh
Publication of CN104714802A publication Critical patent/CN104714802A/zh
Pending legal-status Critical Current

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种显示HTML元素的附加信息的方法和装置，对于需要呈现附加信息的网页的HTML文档的开发，有助于提高开发效率，并使该HTML文档更易于维护。本发明的显示HTML元素的附加信息的方法包括：设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体。

Description

一种显示HTML元素的附加信息的方法和装置
技术领域
本发明涉及计算机技术领域，特别地涉及一种显示HTML元素的附加信息的方法和装置。
背景技术
HTML超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。
CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
在一些网页中有时需要向用户呈现网页元素的一些附加信息，例如对于网页的一段文字，需对其中某些词语做出解释，为了不影响这段文字的连贯性，该解释可以仅在鼠标悬停在该词语上面时出现，即该解释是一种工具提示文本(title)。在现有技术中，实现该效果的主要方式是给需要展示附加信息的HTML元素上添加属性并设置其属性值为要展示的附加信息内容，该实现方式是通过浏览器识别HTML元素的属性然后由浏览器自己实现。具体在编写HTML代码时，首先在HTML文档中任意位置(通常紧随需要显示附加信息的标签)插入一个HTML标签(通常为DIV标签)，然后设置这个标签的CSS样式(字体、背景、位置等)，然后设置显示这个标签的显示隐藏触发条件。通常我们会通过CSS或者JS来控制鼠标悬浮或经过要显示附加信息的元素上时显示这个元素，鼠标移开后隐藏这个元素。
现有技术的上述实现方式对于每个需要呈现附加信息的HTML元素，分别要进行插入HTML标签、设置该标签的CSS样式、设置显示这个标签的显示隐藏触发条件等步骤，在需要呈现附加信息的HTML元素比较多的情况下，上述实现方式的效率比较低。另外由于用于显示附加信息的代码一般并不是HTML文档的主要内容，所以上述的实现方式在HTML文档中加入了比较多的次要内容，对于HTML的文档结构造成一定影响，并且使其不易维护。
发明内容
有鉴于此，本发明提供一种显示HTML元素的附加信息的方法和装置，对于需要呈现附加信息的网页的HTML文档的开发，有助于提高开发效率，并使该HTML文档更易于维护。
为实现上述目的，根据本发明的一个方面，提供了一种显示HTML元素的附加信息的方法。
本发明的显示HTML元素的附加信息的方法包括：设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体。
可选地，该方法还包括：设置所述HTML元素的定位类型为相对定位；在所述设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的定位类型为绝对定位，并且设置所述CSS伪元素相对于所述HTML元素的位置。
可选地，在所述设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的显示属性为块状元素。
可选地，所述附加信息为工具提示文本；在所述设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的背景属性和字体颜色属性。
可选地，所述附加信息为工具提示文本；在所述设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的显示方式为鼠标悬浮显示。
根据本发明的另一方面，提供了一种显示HTML元素的附加信息的装置。
本发明的显示HTML元素的附加信息的装置包括：第一设置模块，用于设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；第二设置模块，用于设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体。
可选地，所述第二设置模块还用于：设置所述HTML元素的定位类型为相对定位；设置所述CSS伪元素的定位类型为绝对定位，并且设置所述CSS伪元素相对于所述HTML元素的位置。
可选地，所述第二设置模块还用于设置所述CSS伪元素的显示属性为块状元素。
可选地，所述附加信息为工具提示文本；所述第二设置模块还用于设置所述CSS伪元素的背景属性和字体颜色属性。
可选地，所述附加信息为工具提示文本；所述第二设置模块还用于设置所述CSS伪元素的显示方式为鼠标悬浮显示。
根据本发明的技术方案，设置HTML元素的自定义属性，再以CSS的伪元素作为附加信息的载体，可以实现CSS代码的复用，提高了网页开发的效率，并且因为无需添加过多的CSS代码，简化了HTML文档内容，使其易于维护。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的显示HTML元素的附加信息的方法的基本步骤的示意图；
图2是根据本发明实施例的显示HTML元素的附加信息的装置的主要模块的示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
图1是根据本发明实施例的显示HTML元素的附加信息的方法的基本步骤的示意图。如图1所示，该方法主要包括步骤S11和步骤S12，由网页代码(包括HTML代码和CSS代码)来实现。其中步骤S11中，设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；步骤S12中，设置层叠样式表(CSS)的伪元素来作为上述附加信息的载体。在具体编写的代码中，上述两步骤对应的代码的前后位置并不作限定。
以下结合一段具体的代码来说明本发明实施例的技术方案。以下代码以显示工具提示文本为例，左端的数字为行号。
以下对于上述代码做出一些说明。在代码的第26行，给ht7l元素添加一个自定义属性data-title来声明该元素的工具提示文本，浏览器解析html文档的时候会识别CSS中定义的data-title规则来生成工具提示文本。
在代码的第3行，规定该元素CSS的定位类型该为相对定位，这不会影响正常该元素进行定位，这是为了方便在第6行中设置工具提示文本相对于该元素的显示位置。在第6行中，设置该CSS伪元素的定位类型该为绝对定位，方便相对于html元素进行定位。元素的位置通过left，top，right以及bottom属性进行规定。
在代码第5行，在CSS中为含有data-title属性的元素添加:after(或:before)规则来创建一个伪元素来作为显示元素文本提示内容的载体，伪元素可用于在某个元素之前(或之后)插入某些内容，这些内容可以是任意元素可以是文字、视频、图片等。采用:hover伪类使该CSS伪元素显示方式为鼠标悬浮显示，使得鼠标经过html元素时显示该CSS伪元素以展现工具提示内容，鼠标离开时隐藏显示。
在代码第7、8行，根据实际需求通过left,top,right以及bottom属性进行规定该CSS伪元素相对于html元素的位置，可是元素的上方、右方、下方、左方等。
在代码第9行，设置该CSS伪元素的content属性值为html元素的data-title(不限于该属性)。content属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容(与html元素在同一行显示)，不过该内容创建的框类型可以用属性display控制。
在代码第10行，设置该CSS伪元素display属性规定元素应该生成的框的类型为块状元素，方便为其设置定位方式及显示样式。
在代码第12、13行，设置该CSS伪元素的背景、字体颜色等CSS属性来自定义工具提示文本的样式，以呈现不同样式的工具提示文本内容。
图2是根据本发明实施例的显示HTML元素的附加信息的装置的主要模块的示意图。如图2所示，显示HTML元素的附加信息的装置20包括第一设置模块21和第二设置模块22。第一设置模块21用于设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；第二设置模块22用于设置层叠样式表(CSS)的伪元素来作为上述附加信息的载体。如采用上文举例的代码，第一设置模块22可由第23至27行代码实现，第二设置模块21可由第1至21行代码实现。
从以上描述中可以看出，设置HTML元素的自定义属性，再以CSS的伪元素作为附加信息的载体，可以实现CSS代码(例如上述代码示例中的第1至21行内容)的复用，提高了网页开发的效率，并且因为无需添加过多的CSS代码，简化了HTML文档内容，使其易于维护。
以上结合具体实施例描述了本发明的基本原理，在本发明的装置和方法中，显然，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本发明的等效方案。并且，执行上述系列处理的步骤可以自然地按照说明的顺序按时间顺序执行，但是并不需要一定按照时间顺序执行。某些步骤可以并行或彼此独立地执行。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种显示HTML元素的附加信息的方法，其特征在于，包括：
设置超文本编辑语言(HTML)元素的自定义属性，该自定义属性用于声明该HTML元素的附加信息；
设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体。
2.根据权利要求1所述的方法，其特征在于，
该方法还包括：设置所述HTML元素的定位类型为相对定位；
在所述设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述CSS伪元素的定位类型为绝对定位，并且设置所述CSS伪元素相对于所述HTML元素的位置。
3.根据权利要求1所述的方法，其特征在于，在所述设置层叠样式表(CSS)的伪元素来作为所述附加信息的载体的步骤中，设置所述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伪元素的显示方式为鼠标悬浮显示。
CN201510094248.3A 2015-03-03 2015-03-03 一种显示html元素的附加信息的方法和装置 Pending CN104714802A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510094248.3A CN104714802A (zh) 2015-03-03 2015-03-03 一种显示html元素的附加信息的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510094248.3A CN104714802A (zh) 2015-03-03 2015-03-03 一种显示html元素的附加信息的方法和装置

Publications (1)

Publication Number Publication Date
CN104714802A true CN104714802A (zh) 2015-06-17

Family

ID=53414179

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510094248.3A Pending CN104714802A (zh) 2015-03-03 2015-03-03 一种显示html元素的附加信息的方法和装置

Country Status (1)

Country Link
CN (1) CN104714802A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484431A (zh) * 2016-10-31 2017-03-08 武汉斗鱼网络科技有限公司 Php网页模板的实现方法和装置
CN108197084A (zh) * 2017-04-27 2018-06-22 中南出版传媒集团股份有限公司湖南教育出版社分公司 一种基于网页的数字出版物裁剪字体的方法及系统
CN110968810A (zh) * 2018-09-30 2020-04-07 北京国双科技有限公司 网页数据处理方法和装置
CN111898336A (zh) * 2020-09-30 2020-11-06 拼说说(深圳)网络科技有限公司 弹幕显示方法、装置、计算机设备及存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102662672A (zh) * 2012-04-05 2012-09-12 广州市动景计算机科技有限公司 对网页进行换肤处理的方法和装置以及移动终端
US20120278700A1 (en) * 2011-04-26 2012-11-01 Oracle International Corporation Filtered Stylesheets

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120278700A1 (en) * 2011-04-26 2012-11-01 Oracle International Corporation Filtered Stylesheets
CN102662672A (zh) * 2012-04-05 2012-09-12 广州市动景计算机科技有限公司 对网页进行换肤处理的方法和装置以及移动终端

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
天梯梦: "你所不知的CSS::before和::after伪元素用法", 《HTTP://JUSTCODING.ITEYE.COM/BLOG/2032627》 *
星星FLY88: "css content的attr用法", 《HTTP://JINGYAN.BAIDU.COM/ARTICLE/AE97A646CC27C0BBFD461D11.HTML》 *
杨习伟等: "《Web开发典藏大系 HTML 5+CSS 3网页开发实战精解》", 31 January 2013 *

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484431A (zh) * 2016-10-31 2017-03-08 武汉斗鱼网络科技有限公司 Php网页模板的实现方法和装置
CN106484431B (zh) * 2016-10-31 2019-09-10 武汉斗鱼网络科技有限公司 Php网页模板的实现方法和装置
CN108197084A (zh) * 2017-04-27 2018-06-22 中南出版传媒集团股份有限公司湖南教育出版社分公司 一种基于网页的数字出版物裁剪字体的方法及系统
CN110968810A (zh) * 2018-09-30 2020-04-07 北京国双科技有限公司 网页数据处理方法和装置
CN111898336A (zh) * 2020-09-30 2020-11-06 拼说说(深圳)网络科技有限公司 弹幕显示方法、装置、计算机设备及存储介质

Similar Documents

Publication Publication Date Title
CN107451296B (zh) 一种基于组件的网站模块化渲染方法
ZA200503512B (en) A method of formatting documents
CN101706821A (zh) 基于标签的移动互联网页面设计系统及方法
CN103631865B (zh) 网页生成方法及设备
CN104714802A (zh) 一种显示html元素的附加信息的方法和装置
Kaluvakuri et al. Harnessing the Potential of CSS: An Exhaustive Reference for Web Styling
EP4147137A1 (en) Generating and modifying content using data structures
Rahman Jump Start Bootstrap: Get Up to Speed with Bootstrap in a Weekend
KR20120110816A (ko) 디지털 학습용 교재 출판 방법 및 장치
Loudon Developing Large Web Applications: Producing Code That Can Grow and Thrive
CN108733367A (zh) 页面生成方法及页面生成装置
EP3317780A1 (en) Transformation of marked-up content to a reversible file format for automated browser based pagination
Cazenave et al. Timesheets. js: tools for web multimedia
JP2015200953A (ja) 画像表示装置
CN107203553B (zh) 一种实现网页表格行/列锁定的方法和装置
US9984053B2 (en) Replicating the appearance of typographical attributes by adjusting letter spacing of glyphs in digital publications
Teague CSS3: Visual QuickStart Guide
Weyl What's new in CSS3
Aryal Bootstrap: a front-end framework for responsive web design
US8677255B1 (en) Expanded container view for graphical editing environment
CN116009863B (zh) 前端页面渲染方法、设备及存储介质
CN112632437B (zh) 一种网页页面生成方法、装置及计算机可读存储介质
CN111104160B (zh) 隶属关系展示方法、装置、电子设备和存储介质
US20220207092A1 (en) Computer service for indexing threaded comments with pagination support
CN114115880A (zh) 在不同尺寸屏幕下页面表格操作列吸顶的方法

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20150617