移动网页模块化样式模板匹配方法

针对传统的基于模板的Web页面移动端适配方法中无法处理过于复杂的页面问题，本文提出了一种基于模块化样式模板匹配的混合式适配方法。该方法首先对构成网页的页面块进行归类，并对每一类设计适合在移动端浏览的样式，然后对网页分割后的页面块进行类型识别，最后将识别后的页面块与对应的模块化样式相关联，进而完成页面转换。实验结果表明，本文方法仅需少量模板即可应对多种风格的页面，并解决了因分割造成的页面样式的丢失问题。

移动互联网的快速发展使得手机、iPad 等成为人们从互联网获取信息的主要终端设备[1]。不过，现存的网站大多是为大屏幕PC 机设计的，并没有对移动端如手机进行适配，直接用手机浏览时用户体验较差。通过页面转换技术重新优化布局页面，能使其在移动终端具有良好的展示，从而实现网页对移动端的自动适配[2]。

现存的网页自动适配方法主要分为两类。

样式模板适配法[3] [4]将整个网页看作一个不可分割的单元，先对大量网页进行聚类，生成每一类网页对应的模板，构成模板库。在适配网页样式时，计算网页的结构与库中模板的相似度，并选取相似度最高的模板作为该网页的样式模板。由于网页数量庞大，结构复杂多变，这种针对完整网页设计的模板与待适配网页特性的吻合度低，且相似度计算开销大，难以满足网页适配的实时性要求。

网页分割适配法[5] [6] [7]将网页分块后再进行移动端适配，在一定程度上避免了样式模板适配法的缺陷。由于目前的多数网页均采取标签与样式分离的原则设计，其网页样式信息主要保存在外部CSS 样式表中，网页内部含有的样式信息很少，很容易造成分割后的页面样式信息丢失[8]。要使分割后的页面块符合移动端设计要求，必须重新设计块的样式，如何有效处理这些样式是算法成功的关键。

本文提出了一种基于模块化样式模板匹配的混合式适配方法。该方法先将组成网页的页面块归结为有限类型并建立样式模板库。在适配样式时，利用分割技术将网页分块，并映射到有限类型，再依据页面块所属类型与对应类别的样式模板关联，进而完成各页面块乃至整个网页的适配。该方法能够简化样式模板库的构造，提高效率，对结构复杂的页面也有更好的自适应性。

2. 页面块分类 2.1. 页面块分类依据和流程 页面块分类是模块化样式模板匹配的基础。按照页面块功能或风格特征，本文共设置了图片组/轮播图、导航、页面主体/正文、侧边栏、图片链接列表、非导航链接列表、页眉和页脚8 个类别，基本覆盖了常见的Web 页面组成元素。页面块分类算法主要依据HTML5 中的如下标签和属性进行： 1) HTML5 中的语义化标签； 2) 常见的class 和id； 3) 页面块的属性和标签。

具体分类时，算法将按照1)、2)、3)顺序依次对页面块进行判别。这里假设ni 为某页面经分割后形成的一个页面块，具体分类步骤如下： Step1：判断页面块ni 是否包含语义化标签，如果包含，使用语义化标签分类；否则，进入下一步； Step2：判断页面块ni 是否包含常见的class 和id， 如果包含， 使用常见的class 和id 进行分类；否则，