CN107346306A - 网页描述方法和装置 - Google Patents

Abstract

本申请公开了一种网页描述方法和装置。所述方法的一具体实施方式包括：获取包含自定义布局图片的网页的源代码，所述源代码包括：所述自定义布局图片中各子图片的标识信息、链接信息以及布局信息；对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息；按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据。该实施方式解决了不同操作系统间描述语言不兼容的问题，使得包含自定义布局图片的图片可以在各操作系统中正确显示。

Description

网页描述方法和装置

技术领域

本申请涉及计算机技术领域，尤其涉及互联网技术领域，具体涉及一种网页描述方法和装置。

背景技术

当前的很多运营网站，都允许用户对图片进行自定义布局设计，从而显示设计后的网页，提升网页的浏览质量。用户可以通过上传不同的图片素材，进行拖放以及配置操作，就可以实现自定义布局的、由多张图片组成的网页，如图1所示。

但上述对图片的自定义布局设计是在浏览器页面中运行的，所以得到的自定义布局图片就是用HTML(Hyper Text Markup Language，超文本标记语言)语言或CSS(Cascading Style Sheets，层叠样式表)来描述的，只能在浏览器中查看运行。但人们对包含自定义布局图片的网页的期望是不仅仅是能在浏览器中查看运行，还要能在不同移动操作系统(如android、IOS)的APP(Application，应用程序)中也可以查看运行。但因为不同操作系统使用的描述语言不同，相互之间存在不兼容的问题。因此，需要将包含自定义布局图片的网页转换为不同平台都可以解析的数据格式，即需要一种包含自定义布局图片的网页描述方法。

发明内容

本申请的目的在于提供一种网页描述方法和装置，来满足上述背景技术部分提到的需求。

第一方面，本申请提供了一种网页描述方法，所述方法包括：获取包含自定义布局图片的网页的源代码，所述源代码包括：所述自定义布局图片中各子图片的标识信息、链接信息以及布局信息；对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息；按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据。

在一些实施例中，所述对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息，包括：确定所述自定义布局图片在所属网页中的第一面积参数，所述第一面积参数包括第一高度和第一宽度；分析所述布局信息，提取所述各子图片的位置坐标和第二面积参数，所述第二面积参数包括第二高度和第二宽度；根据所述第一面积参数、所述位置坐标以及所述第二面积参数，确定所述各子图片在其所属自定义布局图片中的比例信息。

在一些实施例中，所述根据所述第一面积参数、所述位置坐标以及所述第二面积参数，确定所述各子图片在其所属自定义布局图片中的比例信息，包括：确定由所述第一高度和所述第一宽度构成的第一矩形的四条边分别为所述自定义布局图片的第一上边、第一底边、第一左边和第一右边；确定由所述第二高度和所述第二宽度构成的第二矩形的四条边分别为所述各子图片的第二上边、第二底边、第二左边和第二右边；确定所述第二上边与所述第一上边之间的距离占所述第一高度的百分比为所述各子图片的top值，确定所述第二底边与所述第一底边之间的距离占所述第一高度的百分比为所述各子图片的bottom值，确定所述第二左边与所述第一左边之间的距离占所述第一宽度的百分比为所述各子图片的left值，确定所述第二右边与所述第一右边之间的距离占所述第一宽度的百分比为所述各子图片的right值。

在一些实施例中，所述按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据，包括：利用JavaScript脚本语言将所述源代码及所述比例信息转换为JSON数据。

在一些实施例中，所述方法还包括：将所述JSON数据提交至服务器，以供所述服务器将所述JSON数据存储至数据库中。

在一些实施例中，所述方法还包括：向所述服务器发送对所述包含自定义布局图片的网页的请求；响应于接收到所述服务器返回的所述JSON数据，对所述JSON数据进行换算，确定所述布局信息；基于所述布局信息，显示所述包含自定义布局图片的网页。

第二方面，本申请提供一种网页描述装置，所述装置包括：获取单元，用于获取包含自定义布局图片的网页的源代码，所述源代码包括：所述自定义布局图片中各子图片的标识信息、链接信息以及布局信息；解析单元，用于对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息；转换单元，用于按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据。

在一些实施例中，所述解析单元包括：第一确定模块，用于确定所述自定义布局图片在所属网页中的第一面积参数，所述第一面积参数包括第一高度和第一宽度；第二提取模块，用于分析所述布局信息，提取所述各子图片的位置坐标和第二面积参数，所述第二面积参数包括第二高度和第二宽度；比例确定模块，用于根据所述第一面积参数、所述位置坐标以及所述第二面积参数，确定所述各子图片在其所属自定义布局图片中的比例信息。

在一些实施例中，所述比例确定模块，包括：第一确定子模块，用于确定由所述第一高度和所述第一宽度构成的第一矩形的四条边分别为所述自定义布局图片的第一上边、第一底边、第一左边和第一右边；第二确定子模块，用于确定由所述第二高度和所述第二宽度构成的第二矩形的四条边分别为所述各子图片的第二上边、第二底边、第二左边和第二右边；第三确定子模块，用于确定所述第二上边与所述第一上边之间的距离占所述第一高度的百分比为所述各子图片的top值，确定所述第二底边与所述第一底边之间的距离占所述第一高度的百分比为所述各子图片的bottom值，确定所述第二左边与所述第一左边之间的距离占所述第一宽度的百分比为所述各子图片的left值，确定所述第二右边与所述第一右边之间的距离占所述第一宽度的百分比为所述各子图片的right值。

在一些实施例中，所述转换单元进一步用于：利用JavaScript脚本语言将所述源代码及所述比例信息转换为JSON数据。

在一些实施例中，所述装置还包括：提交单元，用于将所述JSON数据提交至服务器，以供所述服务器将所述JSON数据存储至数据库中。

在一些实施例中，所述装置还包括：发送单元，用于向所述服务器发送对所述包含自定义布局图片的网页的请求；换算单元，用于响应于接收到所述服务器返回的所述JSON数据，对所述JSON数据进行换算，确定所述布局信息；显示单元，用于基于所述布局信息，显示所述包含自定义布局图片的网页。

本申请提供的包含自定义布局图片的网页描述方法和装置，通过对源代码中自定义布局图片中的各子图片的布局信息进行解析，确定各子图片的比例信息，并将得到的比例信息和源代码转换成JSON数据，解决了不同操作系统间描述语言不兼容的问题，使得包含自定义布局图片的图片可以在各操作系统中正确显示。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1是现有的自定义布局图片的示意图；

图2是本申请可以应用于其中的示例性系统架构图；

图3是根据本申请的网页描述方法的一个实施例的流程图；

图4是根据本申请的网页描述方法中确定自定义布局图片中各子图片的位置坐标和第二面积参数的示意图；

图5是根据本申请的网页描述方法的应用场景的示意图；

图6是根据本申请的网页描述装置的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图2示出了可以应用本申请的包含自定义布局图片的网页描述方法或包含自定义布局图片的网页描述装置的实施例的示例性系统架构200。

如图2所示，系统架构200可以包括终端设备201、202、203，网络204和服务器205。网络204用以在终端设备201、202、203和服务器205之间提供通信链路的介质。网络204可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备201、202、203通过网络204与服务器205交互，以接收或发送消息等。终端设备201、202、203上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备201、202、203可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、膝上型便携计算机和台式计算机等等。

服务器205可以是提供各种服务的服务器，例如对终端设备201、202、203上显示的网页提供支持的后台网页服务器。后台网页服务器可以对包含自定义布局图片的网页源代码等数据进行分析等处理，并将处理结果(例如网页页面数据)反馈给终端设备。

需要说明的是，本申请的上述实施例所提供的包含自定义布局图片的网页描述方法一般由终端设备201、202、203执行，相应地，包含自定义布局图片的网页描述装置一般设置于终端设备201、202、203中。

应该理解，图2中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图3，示出了根据本申请的网页描述方法的一个实施例的流程图300。本实施例的包含自定义布局图片的网页描述方法，包括以下步骤：

步骤301，获取包含自定义布局图片的网页的源代码。

其中，源代码包括：自定义布局图片中各子图片的标识信息、链接信息以及布局信息。

本实施例中，网页中包含至少一个自定义布局图片，每个自定义布局图片的源代码为一个楼层结构，每个子图片的标识信息、链接信息以及布局信息构成一个数组。例如，一个网页包含两个自定义布局图片，第一个自定义布局图片中包含四个子图片，第二个自定义布局图片中包含三个子图片，那么在源代码中采用两个楼层结构描述上述两个自定义布局图片，且第一个楼层结构种包含四个数组，第二个楼层结构种包含三个数组。

本实施例中，各子图片的标识在源代码中用key表示，key的值可以是由数字和字母组成的字符串。链接信息包括各子图片的跳转链接以及图片链接。布局信息包括各子图片的左(left)、右(right)、上(top)、高(height)值。

步骤302，对布局信息进行解析，确定各子图片在其所属自定义布局图片中的比例信息。

本实施例中，基于步骤301中得到的包含自定义布局图片的网页的源代码，图2中的电子设备(如图2中的终端设备)，对源代码中的各子图片的布局信息进行解析，确定各子图片在其所属自定义布局图片中的比例信息。

在本实施例的一些可选的实现方式中，步骤302中对布局信息进行解析，确定各子图片在其所属自定义布局图片中的比例信息，进一步包括300中未示出的以下子步骤：

子步骤一，确定自定义布局图片在所属网页中的第一面积参数。

网页中可能包含多个自定义布局图片，每个图片在网页中的位置及大小有可能不相同，首先确定各自定义布局图片在网页中的面积参数是正确显示网页的基础。其中，第一面积参数包括第一高度和第一宽度。

子步骤二，分析布局信息，提取各子图片的位置坐标和第二面积参数。

对于每个自定义布局图片，确定其中各子图片的位置坐标和第二面积参数，是正确显示每个自定义布局图片的前提。其中，第二面积参数包括第二高度和第二宽度。

具体地，结合图4所示的子图片在自定义布局图片中的位置，来解释如何确定各子图片的位置坐标和第二面积参数。如图4所示，以网格形式显示自定义布局图片的第一面积参数，其第一高度h1为12，第一宽度w1为8。子图片1在自定义图片中的位置如图所示，则其位置坐标为x＝0，y＝0，第二面积参数中的第二高度h2为2，第二宽度w2为2。

子步骤三，根据第一面积参数、位置坐标以及第二面积参数，确定各子图片在其所属自定义布局图片中的比例信息。

根据自定义布局图片的第一面积参数、自定义布局图片中各子图片的位置坐标以及第二面积参数，确定各子图片的比例信息。

在本实施例的一些可选的实现方式中，上述子步骤三进一步包括300中未示出的以下子步骤：

子步骤三一，确定由第一高度和所述第一宽度构成的第一矩形的四条边分别为自定义布局图片的第一上边、第一底边、第一左边和第一右边。

以图4为例，网格区域的最上边为第一上边，网格区域的最底边为第一底边，网格区域的最左边为第一左边，网格区域的最右边为第一右边。

子步骤三二，确定由第二高度和所述第二宽度构成的第二矩形的四条边分别为各子图片的第二上边、第二底边、第二左边和第二右边。

仍然以图4为例，子图片1的第二上边属于自定义布局图片的第一上边的一部分，子图片1的第二底边为子图片1所在矩形的底边，子图片1的第二左边属于自定义布局图片的第一左边的一部分，子图片1的第二右边为子图片1所在矩形的右边。

子步骤三三，确定第二上边与第一上边之间的距离占第一高度的百分比为各子图片的top值，确定第二底边与第一底边之间的距离占第一高度的百分比为各子图片的bottom值，确定第二左边与第一左边之间的距离占第一宽度的百分比为各子图片的left值，确定第二右边与第一右边之间的距离占第一宽度的百分比为各子图片的right值。

图4中，第二上边与第一上边的一部分重合，因此，第二上边与第一上边之间的距离为0，则子图片1的top值为0％。同样的，第二左边与第一左边的一部分重合，子图片1的left值为0％。第二底边与第一底边之间的距离为10，第一高度的值为12，因此，子图片1的bottom值为83％。第二右边与第一右边之间的距离为6，第一宽度的值为8，因此，子图片1的bottom值为75％。

步骤303，按照预设的代码转换规则，将源代码以及比例信息转换为JSON数据。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。

在本实施例的一些可选的实现方式中，步骤303进一步包括：利用JavaScript脚本语言将所述源代码及所述比例信息转换为JSON数据。

在本实施例的一些可选的实现方式中，上述方法还包括300中未示出的以下步骤：将JSON数据提交至服务器，以供服务器将JSON数据存储至数据库中。

客户端将转换完毕的JSON数据提交至服务器，服务器将上述JSON数据存储至数据库中，这样，其它客户端在请求上述包含自定义图片的网页时，服务器将转换好的JSON数据返回给客户端。

在本实施例的一些可选的实现方式中，上述方法还包括300中未示出的以下步骤：

向服务器发送对包含自定义布局图片的网页的请求；

响应于接收到服务器返回的JSON数据，对JSON数据进行换算，确定布局信息；

基于布局信息，显示包含自定义布局图片的网页。

不同的客户端(如计算机的浏览器或平板电脑或手机的APP)向服务器发送对上述包含自定义布局图片的网页的请求，并且在接收到服务器返回的JSON数据后，进行解析换算，得到各子图片在自定义布局图片中的布局信息，从而根据布局信息显示上述包含自定义布局图片的网页。

继续参考图5，示出了根据本申请的包含自定义布局图片的网页描述方法的应用场景的示意图500，包括终端设备501、网络502、服务器503以及终端设备504、505、506。

工程人员利用终端设备501将包含自定义布局图片的网页的源代码中的布局信息进行解析，得到各子图片的比例信息，并将比例信息及源代码转换成JSON数据，通过网络502传输到服务器503。服务器503接收到上述JSON数据后将其存储到数据库中。其它终端设备504、505、506通过网络502向服务器503发送对上述包含自定义布局图片的网页的请求，服务器503在接收到请求后，向终端设备504、505、506返回数据库中存储的JSON数据。终端设备504、505、506在接收到服务器503返回的JSON数据后，对JSON数据进行解析换算，得到各子图片的布局信息，才能正确的显示上述包含自定义图片的网页。

本申请的上述实施例提供的网页描述方法，通过对网页的源代码中自定义布局图片中的各子图片的布局信息进行解析，并将比例信息及源代码转换为JSON数据，供其它终端设备中的网页浏览应用正确浏览网页，通用性强，适用于不同的操作系统。

继续参考图6，示出了根据本申请的网页描述装置的结构示意图600。本实施例的包含自定义布局图片的网页描述装置包括：获取单元601、解析单元602以及转换单元603。

获取单元601，用于获取包含自定义布局图片的网页的源代码，源代码包括：自定义布局图片中各子图片的标识信息、链接信息以及布局信息；解析单元602，用于对布局信息进行解析，确定各子图片在其所属自定义布局图片中的比例信息；转换单元603，用于按照预设的代码转换规则，将源代码以及比例信息转换为JSON数据。

在本实施例一些可选的实施方式中，解析单元602包括600中未示出的以下部分：

第一确定模块，用于确定自定义布局图片在所属网页中的第一面积参数，第一面积参数包括第一高度和第一宽度。

第二提取模块，用于分析布局信息，提取各子图片的位置坐标和第二面积参数，第二面积参数包括第二高度和第二宽度。

比例确定模块，用于根据第一面积参数、位置坐标以及第二面积参数，确定各子图片在其所属自定义布局图片中的比例信息。

在本实施例一些可选的实施方式中，上述比例确定模块6023进一步包括600中未示出的以下子模块：

第一确定子模块，用于确定由第一高度和第一宽度构成的第一矩形的四条边分别为自定义布局图片的第一上边、第一底边、第一左边和第一右边；

第二确定子模块，用于确定由第二高度和第二宽度构成的第二矩形的四条边分别为各子图片的第二上边、第二底边、第二左边和第二右边；

第三确定子模块，用于确定第二上边与第一上边之间的距离占第一高度的百分比为各子图片的top值，确定第二底边与第一底边之间的距离占第一高度的百分比为各子图片的bottom值，确定第二左边与第一左边之间的距离占第一宽度的百分比为各子图片的left值，确定第二右边与第一右边之间的距离占第一宽度的百分比为各子图片的right值。

在本实施例一些可选的实施方式中，上述转换单元603进一步用于：利用JavaScript脚本语言将所述源代码及所述比例信息转换为JSON数据。

在本实施例一些可选的实施方式中，上述装置还包括600中未示出的以下单元：

发送单元，用于向所述服务器发送对所述包含自定义布局图片的网页的请求。

换算单元，用于响应于接收到所述服务器返回的所述JSON数据，对所述JSON数据进行换算，确定所述布局信息。

显示单元，用于基于所述布局信息，显示所述包含自定义布局图片的网页。

本申请的上述实施例提供的网页的描述装置，可以供不同终端设备中的网页浏览应用正确浏览包含自定义图片的网页，通用性强，适用于不同的操作系统。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (12)

1.一种网页描述方法，其特征在于，所述方法包括：

获取包含自定义布局图片的网页的源代码，所述源代码包括：所述自定义布局图片中各子图片的标识信息、链接信息以及布局信息；

对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息；

按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据。

2.根据权利要求1所述的方法，其特征在于，所述对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息，包括：

确定所述自定义布局图片在所属网页中的第一面积参数，所述第一面积参数包括第一高度和第一宽度；

分析所述布局信息，提取所述各子图片的位置坐标和第二面积参数，所述第二面积参数包括第二高度和第二宽度；

根据所述第一面积参数、所述位置坐标以及所述第二面积参数，确定所述各子图片在其所属自定义布局图片中的比例信息。

3.根据权利要求2所述的方法，其特征在于，所述根据所述第一面积参数、所述位置坐标以及所述第二面积参数，确定所述各子图片在其所属自定义布局图片中的比例信息，包括：

确定由所述第一高度和所述第一宽度构成的第一矩形的四条边分别为所述自定义布局图片的第一上边、第一底边、第一左边和第一右边；

确定由所述第二高度和所述第二宽度构成的第二矩形的四条边分别为所述各子图片的第二上边、第二底边、第二左边和第二右边；

确定所述第二上边与所述第一上边之间的距离占所述第一高度的百分比为所述各子图片的top值，确定所述第二底边与所述第一底边之间的距离占所述第一高度的百分比为所述各子图片的bottom值，确定所述第二左边与所述第一左边之间的距离占所述第一宽度的百分比为所述各子图片的left值，确定所述第二右边与所述第一右边之间的距离占所述第一宽度的百分比为所述各子图片的right值。

4.根据权利要求1所述的方法，其特征在于，所述按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据，包括：

利用JavaScript脚本语言将所述源代码及所述比例信息转换为JSON数据。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

将所述JSON数据提交至服务器，以供所述服务器将所述JSON数据存储至数据库中。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

向所述服务器发送对所述包含自定义布局图片的网页的请求；

响应于接收到所述服务器返回的所述JSON数据，对所述JSON数据进行换算，确定所述布局信息；

基于所述布局信息，显示所述包含自定义布局图片的网页。

7.一种网页描述装置，其特征在于，所述装置包括：

获取单元，用于获取包含自定义布局图片的网页的源代码，所述源代码包括：所述自定义布局图片中各子图片的标识信息、链接信息以及布局信息；

解析单元，用于对所述布局信息进行解析，确定所述各子图片在其所属自定义布局图片中的比例信息；

转换单元，用于按照预设的代码转换规则，将所述源代码以及所述比例信息转换为JSON数据。

8.根据权利要求7所述的装置，其特征在于，所述解析单元包括：

第一确定模块，用于确定所述自定义布局图片在所属网页中的第一面积参数，所述第一面积参数包括第一高度和第一宽度；

第二提取模块，用于分析所述布局信息，提取所述各子图片的位置坐标和第二面积参数，所述第二面积参数包括第二高度和第二宽度；

比例确定模块，用于根据所述第一面积参数、所述位置坐标以及所述第二面积参数，确定所述各子图片在其所属自定义布局图片中的比例信息。

9.根据权利要求8所述的装置，其特征在于，所述比例确定模块，包括：

第一确定子模块，用于确定由所述第一高度和所述第一宽度构成的第一矩形的四条边分别为所述自定义布局图片的第一上边、第一底边、第一左边和第一右边；

第二确定子模块，用于确定由所述第二高度和所述第二宽度构成的第二矩形的四条边分别为所述各子图片的第二上边、第二底边、第二左边和第二右边；

第三确定子模块，用于确定所述第二上边与所述第一上边之间的距离占所述第一高度的百分比为所述各子图片的top值，确定所述第二底边与所述第一底边之间的距离占所述第一高度的百分比为所述各子图片的bottom值，确定所述第二左边与所述第一左边之间的距离占所述第一宽度的百分比为所述各子图片的left值，确定所述第二右边与所述第一右边之间的距离占所述第一宽度的百分比为所述各子图片的right值。

10.根据权利要求7所述的装置，其特征在于，所述转换单元进一步用于：

利用JavaScript脚本语言将所述源代码及所述比例信息转换为JSON数据。

11.根据权利要求7所述的装置，其特征在于，所述装置还包括：

提交单元，用于将所述JSON数据提交至服务器，以供所述服务器将所述JSON数据存储至数据库中。

12.根据权利要求11所述的装置，其特征在于，所述装置还包括：

发送单元，用于向所述服务器发送对所述包含自定义布局图片的网页的请求；

换算单元，用于响应于接收到所述服务器返回的所述JSON数据，对所述JSON数据进行换算，确定所述布局信息；

显示单元，用于基于所述布局信息，显示所述包含自定义布局图片的网页。