一种网页图标的显示方法和装置与流程

本申请涉及网络技术，特别涉及一种网页图标的显示方法和装置。

背景技术：

网页图标是在网页上使用的图标，例如，在开发一个网站时，该网站的页面上经常需要使用到各种各样的图标，该图标可以用作页面功能标识，比如点击切换图标、下载图标等。相关技术中，网页图标可以使用ICONFONT或者SVG方式来生成，客户端在显示网页时，也按照上述两种格式在网页上显示图标。但是，ICONFONT图标需要客户端加载包括一个页面图标的图标库，导致HTTP请求较多，浪费带宽资源和加载时间；而SVG图标会在网页页面中嵌入大量的SVG代码，也影响图标的显示效率。

技术实现要素：

有鉴于此，本申请提供一种网页图标的显示方法和装置，以实现更简单和快速的图标显示。

具体地，本申请是通过如下技术方案实现的：

第一方面，提供一种网页图标的显示方法，包括：

获取待显示页面的页面信息中包括的图标信息，所述图标信息用于通过层叠样式表定义需要在页面中显示的网页图标；

解析所述图标信息，将所述网页图标显示在页面中。

第二方面，提供一种网页图标的显示装置，包括：

信息获取模块，用于获取待显示页面的页面信息中包括的图标信息，所 述图标信息用于通过层叠样式表定义需要在页面中显示的网页图标；

图标显示模块，用于解析所述图标信息，将所述网页图标显示在页面中。

本申请的网页图标的显示方法和装置，通过将页面中的图标信息使用层叠样式表定义，使得定义图标的CSS信息作为HTML页面信息的一部分，浏览器可以通过一次HTTP请求，由服务器下载该网页页面的整个页面信息，并且通过CSS定义网页图标时，代码量较少，能够加快页面信息的加载速度，更快的显示网页图标，实现了更简单和快速的图标显示。

附图说明

图1是本申请一示例性实施例示出的一种网页图标显示方法的流程图；

图2是本申请一示例性实施例示出的一种网页图标显示方法的流程图；

图3是本申请一示例性实施例示出的一种图标的图层分解示意图；

图4是本申请一示例性实施例示出的另一种图标的图层分解示意图；

图5是本申请一示例性实施例示出的网页图标的显示装置的结构图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在网站中的网页页面上使用的网页图标，可以是矢量图标的形式，矢量图标在放大或缩小时不会影响图片的清晰度；例如，闹钟图标，放大镜图标，照相机图标等，都可能在网页页面中使用。本申请实施例，基于层叠样式表(Cascading Style Sheets，CSS)来定义在网页中显示的矢量图标，并且该使用CSS定义的图标信息引入在网页的页面信息中。

例如，以一个网页页面为例，该页面的定义是通过HTML (Hyper Text Markup Language)语言定义的页面信息。HTML标签是HTML语言中最基本的单位，本实施例可以定义HTML标签，并将上述的用于描述图标样式的CSS信息作为该HTML标签的class属性值，相当于HTML标签是该网页页面中的一个部分，而CSS用于限定该HTML标签对应部分如何显示，具体到本实施例的网页图标，那就是通过CSS限定该HTML标签对应部分的网页图标的显示位置、显示方式、显示颜色等。这样浏览器在解析网页页面的页面信息时，就会自动加载该class属性值对应的CSS样式，将网页图标渲染并显示出来。

本实施例使用的HTML标签可以使用无语义标签，以使得浏览器在解析时能够直接根据CSS定义的属性进行显示。例如，该无语义标签可以为<i>标签、<div>标签等。以html<i>标签为例，上述为该标签赋值的例子可以为

<i class＝”expand”></i>

其中，expand为图标对应的CSS的类名，比如该类名可以表示一个方框图标或者一个圆形图标等，该类名可以是自定义的用于作为图标标识的名称。

通过上述描述可以看到，该网页页面中的网页图标可以是基于CSS定义的，而且是作为HTML标签的属性值引入到对页面进行定义的HTML页面信息中。用于解析并显示网页页面的浏览器，可以执行图1所示的流程：

101、获取待显示页面的页面信息中包括的图标信息，所述图标信息用于通过层叠样式表定义需要在页面中显示的网页图标；

例如，页面中的网页图标可以是通过CSS定义，并且作为待显示页面的页面信息中的HTML标签的class属性值，引入到HTML页面中。

102、解析所述图标信息，将所述网页图标显示在页面中。

例如，浏览器在解析页面信息显示页面时，也对页面信息中的HTML标签对应的图标信息进行解析，按照CSS定义的样式在页面中显示该图标。

通过将页面中的网页图标基于CSS定义，在浏览器端对图标进行显示时，可以达到如下效果：

首先，定义图标的CSS信息是作为HTML页面信息的一部分，浏览器 可以通过一次HTTP请求，由服务器下载该网页页面的整个页面信息，包括页面中的图标信息。相比较而言，传统的ICONFONT方式定义图标时，浏览器分别下载页面信息和图标库，并且图标库中可能会包括很多本次页面显示不需要的图标，引起多次HTTP请求，浪费带宽资源且降低了显示效率。因此本实施例的CSS定义网页图标的方式，将能够加快图标的显示速度。

其次，传统的ICONFONT方式定义图标时，只支持单一颜色，比如灰色图标，黑色图标等，而实际的网页制作时需要的图标多种多样，这种单一颜色无法满足需求。本实施例的网页图标定义采用的CSS，这种定义方式本身就具有多样、灵活的属性，例如，可以对图标的不同图层分别定义不同的颜色(例如，通过background属性定义背景色)；CSS还具有丰富的交互设计，能够对图标的不同图层进行动作定义(例如，通过transform属性可以使得图层旋转、左右移动等)，这些属性可以在后续一个图标的实现例中体现。因此，本实施例的CSS定义网页图标的方式，能够使得图标的显示更加丰富。

再次，相对于SVG格式的图标，本实施例通过CSS定义网页图标时，代码量较少，能够加快页面信息的加载速度，更快的显示网页图标。

此外，在实际实施中，网页页面中使用的网页图标，可以是较为简单的图标(例如，该图标包括的图层数量在三层以内)，也可以是稍微复杂的图标(例如，图标包括的图层数量在三层以上)，本公开的网页图标的显示方法，对于上述的简单或者复杂的网页图标，都能够生成和显示，只是这两种图标的定义方式上稍有不同。例如，对于简单图标，可以定义一个HTML标签，而对于复杂图标，可以定义多个HTML标签，再对多个标签进行组合。

例如，可以按照图2所示的流程，对不同图标进行不同方式的定义：

201、对获取的待定义图标，进行图层分解；

例如，待定义图标可以是设计师的电子版图标设计稿，开发人员可以根据该图标设计稿，分析下该图标包括的图层数量。分解出的图层尽量达到最小的独立个体，比如，假设图标是：一个矩形框中包括三个完全相同的小圆圈，那么可以分解出两个图层，第一图层是“矩形框”，第二图层是“一个 小圆圈”，并且在第二图层可以通过CSS的属性生成三个小圆圈。

202、判断图标包括的图层数量，是否小于或等于3；

例如，若分解到的图层小于等于3，则继续执行203；否则，执行206。

203、定义一个HTML标签；

例如，可以定义一个HTML<i>标签。

204、为每个图层定义CSS样式；

例如，通过CSS样式表可以分别为每个图层设置不同的颜色属性，还可以设计左移、右移、旋转等动画属性。当图层的数量大于1时，可以使用CSS的伪元素：after和before作为其他图层的标识，并且通过position属性将各个图层进行组合，浏览器可以根据该position属性组合各图层显示网页图标。

其中，CSS中的position属性，用于规定图层的定位类型，可以通过该属性使得图层对象相对于一个基准进行偏移，结合left、right、top、bottom等属性值进行各个方向的移动。

205、将定义网页图标的CSS信息引入HTML页面；

例如，可以将上述定义好的CSS样式表引入到页面信息中，以使得浏览器在解析页面信息时可以根据HTML标签的class属性对应的该CSS渲染显示网页图标。

206、定义多个HTML标签；

例如，当图标图层的数量大于3个时，可以定义至少两个HTML标签，每个HTML标签包括的图层数量小于或等于3。比如，若图标图层为5层，可以定义两个HTML<i>标签，一个标签包括三个图层，另一个标签包括两个图层。若图标图层为7层，可以定义三个HTML<i>标签，其中两个标签分别包括三个图层，另一个标签包括一个图层。

207、为每个标签中的各个图层分别定义CSS样式；

208、使用CSS将多个HTML标签进行组合；

例如，多个HTML标签时，也可以通过CSS中的定位属性(position)，将至少两个HTML标签对应的图层进行组合，显示所述网页图标。只是这种 多个标签组合时，可以是基于不同的定位基准进行组合。

例如，当一个HTML标签包括两个图层时，可以将该HTML标签作为一个定位基准，每个图层都相对于该标签进行定位，并结合left、right、top、bottom等属性值进行移动。又例如，当图标定义了两个HTML标签时，可以将这两个标签的整体作为一个定位基准，比如将这个整体想象成一个容器，两个标签都放在该容器中，这两个标签都相对于该容器进行定位移动，每个标签内部的组合与上述一个标签时相同。

返回执行205，将定义好的CSS样式表引入HTML页面，结束。

如下分别以一个具体图标的例子，说明简单图标和复杂图标的定义：

通过一个HTML标签定义的图标例：该例子可以结合图3所示的图标；

如图3所示，对给图标进行图层分解，得到该图标由两个图层组成：

第一图层：带圆角的边框；

第二图层：带圆角的菱形；并且，可以通过CSS3提供的box-shadow属性，生成四个相同大小的菱形阴影组成十字形。

由于该图标包括两个图层，因此可以只需要定义一个HTML<i>标签，并且为其class属性赋值，该值为图标的CSS类名：expand，即<iclass＝”expand”></i>。每个图层定义如下：

第一图层的边框部分的定义，其中标注了部分语句的大致含义：

第二图层的十字形部分的定义，该十字形是分解的最小单位菱形组成的十字形；其中标注了部分语句的大致含义：

将上述两个图层的样式表引入HTML页面中，浏览器就可以在显示页面时根据样式表的定义，将网页图标渲染显示出来。

通过两个HTML标签定义的图标例：该例子可以结合图4所示的图标；

如图4所示，这可以是一个“删除”图标，通过图层分解得到四个图层，该四个图层定义了两个HTML<i>标签。

其中一个HTML<i>标签，对应上部分的小矩形，赋予其class属性值为cap，即<i class＝”cap”></i>；该标签可以包括一个图层；

另一个HTML<i>标签，对应下部分的主体，赋予其class属性值为body，即不同HTML标签之间可以通过不同的class属性类名加以区分，即<i class＝”body”></i>；该标签可以包括三个图层；

而该删除图标的整体可以定义为<i class＝”trash”></i>，即整个图标是被<i class＝”trash”></i>包裹的，其中包括了上述两个标签的部分，如下：

通过设置trash的position属性为relative，cap和body的position属性值为absolute，使得上述的两个HTML标签相对图标整体trash进行定位，然后再结合top、right、bottom、left等属性进行组合定位。

为了实现上述的网页图标的显示方法，本实施例还提供了一种网页图标的显示装置，例如，该装置可以应用于浏览器。如图5所示，该装置可以包括：信息获取模块51和图标显示模块52；其中，

信息获取模块51，用于获取待显示页面的页面信息中包括的图标信息，所述图标信息用于通过层叠样式表定义需要在页面中显示的网页图标；

图标显示模块52，用于解析所述图标信息，将网页图标显示在页面中。

进一步的，当图标信息中包括：一个HTML标签，所述HTML标签包括的图层数量小于或等于3时，图标显示模块52，用于根据所述HTML标签的层叠样式表中的定位属性，将所述HTML标签包括的各个图层进行组合，显示所述网页图标。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。