一种建立标签与样式规则绑定关系的方法和装置的制造方法_2

文档序号:9249266阅读:来源:国知局
明确的实施例,后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围,而是通过参考特定实施例为本领域技术人员说明本公开的概念。
【具体实施方式】
[0049]这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
[0050]实施例一
[0051]本公开实施例提供了一种建立标签与样式规则绑定关系的方法,如图1所示,该方法的处理流程可以包括如下的步骤:
[0052]在步骤101中,获取待匹配的HTML文件和CSS文件。
[0053]在步骤102中,根据CSS文件中的各选择器所包含的原子选择器,将各选择器划分为多个选择器分类。
[0054]在步骤103中,遍历HTML文件中标签,对于每个遍历到的标签,如果根据其包含的标签名、标签属性和对应的属性值,确定在多个选择器分类中存在其对应的第一选择器分类,则在第一选择器分类所包含的选择器中,查找与遍历到的标签相匹配的第一选择器,并建立遍历到的标签与第一选择器所属样式规则的绑定关系。
[0055]本公开实施例中,获取待匹配的HTML文件和CSS文件,根据所述CSS文件中的各选择器所包含的原子选择器,将所述各选择器划分为多个选择器分类,遍历所述HTML文件中标签,对于每个遍历到的标签,如果根据其包含的标签名、标签属性和对应的属性值,确定在所述多个选择器分类中存在其对应的第一选择器分类,则在所述第一选择器分类所包含的选择器中,查找与所述遍历到的标签相匹配的第一选择器,并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。这样,终端可以根据遍历到的标签的信息,在多个选择器分类中确定该标签对应的选择器分类,再在此分类中查找标签所匹配的选择器,无需顺序查阅所有的选择器,提高了标签与样式规则的匹配效率。
[0056]实施例二
[0057]本公开实施例提供了一种建立标签与样式规则绑定关系的方法,该方法可以用于终端中,其中,终端可以是移动终端比如手机、平板电脑等,也可以是PC端。
[0058]下面将结合实施方式,对图1所示的处理流程进行详细的说明,内容可以如下:
[0059]在步骤101中,获取待匹配的HTML文件和CSS文件。
[0060]其中,HTML文件是一种包含多种标签的文本,HTML的结构包含“头”部分(英语:Head)和“主体”部分(英语:Body),其中“头”部分可以提供与HTML文件相关联的CSS文件的信息,“主体”部分提供网页的具体内容,CSS文件是一种包含多个样式规则的文本,是由选择器和样式声明组成,其中,选择器用于决定样式规则是针对HTML文件中的哪些标签,样式声明用于决定相应的标签的显示样式,CSS文件中可以记载HTML文件中的内容的文字的颜色、字体、字号以及行间距等等,例如,P.sub-note {font-family:措体},大括号前的p.sub-note为选择器,即HTML文件中类(class)属性为sub-note且标签名为p的标签都会匹配该样式规则,大括号内的内容为样式声明,该样式声明规定已匹配的标签内的文字采用楷体的字体。
[0061]在实施中,对于网页或者由HTML文件和CSS文件组成的电子文档(比如EPUB电子书)等,终端需要对其中的HTML文件和CSS文件进行编译,用户所看到的内容即是终端对HTML文件和CSS文件进行编译并显示的结果,其中需要进行HTML文件中的标签和CSS文件中的样式规则的匹配。下文将讲述HTML文件中的标签与CSS文件中的样式规则的匹配过程。
[0062]终端读入HTML文件,建立HTML文件中标签的树型结构,根据在HTML文件中的Head部分的link节点的内容,寻找该HTML文件关联的CSS文件,寻找到CSS文件后,读入CSS文件,生成CSS文件内的所有样式规则的线性列表,线性列表中包含CSS文件中的用于与HTML文件中的标签匹配的所有选择器以及对应的样式声明,同时还可以记录各选择器的权重和各选择器在线性列表中出现的顺序。
[0063]在步骤102中,根据CSS文件中的各选择器所包含的原子选择器,将各选择器划分为多个选择器分类。
[0064]其中,原子选择器是选择器的最小单元,也可以称为最简单的选择器,一般是仅需要标签中的一类信息就能完成与HTML文件中的标签匹配的选择器,原子选择器可分为:通配选择器(*或无)、元素选择器(如P)、类(class)选择器(如.note)、ID (Identificat1n,身份标识号)选择器(如#mynote)、属性选择器(如[lang = 〃en〃])和伪类选择器(如!active),除元素选择器之外的五个选择器可以称为是非元素选择器,其中,通配选择器和伪类选择器可以用于任意标签,元素选择器用于指定标签的标签名,类选择器用于指定标签的类属性的属性值,ID选择器用于指定标签的ID属性的属性值,属性选择器用于指定标签除类属性、ID属性之外的其他属性以及对应的属性值。另外,还有简单选择器,简单选择器是由一个或多个原子选择器组成并且不包含连接符的选择器。相应的还有复杂选择器,是由简单选择器通过连接符连接而成的选择器,连接符包括:后代连接符(可以为空格)、父子连接符(可以为’>’)、兄弟连接符(可以为’+’)和相邻兄弟连接符(可以为’?’),例如,div.1mage_block>p.main-note?p.sub-note是由简单选择器通过连接符连接而成的复杂选择器。
[0065]在实施中,生成CSS文件中的样式规则的线性列表后,线性列表中的各选择器可以是简单选择器,也可以是复杂选择器,可以根据线性列表中的各选择器中包含的原子选择器的不同,将其中的各选择器进行分类,划分为多个不同的选择器分类,进而,可以对应每个选择器分类存储属于该选择器分类的选择器所属的样式规则。
[0066]可选的,可以根据各选择器的最右边的简单选择器进行分类,相应的,步骤102的处理可以如下:根据CSS文件中的各选择器的第一级简单选择器所包含的原子选择器,将各选择器划分为多个选择器分类。
[0067]其中,以生成的线性列表中的各选择器使用的连接符将选择器分割为多个简单选择器,第一级简单选择器可以是分割得到的各简单选择器中最右边的简单选择器,对于不包含连接符的选择器来讲,其第一级简单选择器就是其本身,例如,选择器div.1mage-block>p.main-note ?p.sub-note 的第一级简单选择器是 p.sub-note,而 div.text-block的第一级选择器就是其本身。
[0068]在实施中,针对线性列表中的各选择器,终端获取其中的第一级简单选择器,根据第一级简单选择器中包含的原子选择器,对线性列表中的各选择器进行分类,划分为多个不同的选择器分类,进而,可以对应每个选择器分类存储属于该选择器分类的选择器所属的样式规则。
[0069]可选的,基于分类所根据的信息不同,分类的方式可以多种多样,以下给出了几种可行的分类方式:
[0070]方式一,根据元素选择器对应的标签名分类,相应的处理如下:根据CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名,将各选择器划分为多个选择器分类。
[0071]在实施中,终端获取到线性列表中的各选择器的第一级简单选择器后,可以获知第一级简单选择器所包含的原子选择器,可以判断第一级简单选择器中是否包含元素选择器,若不包含元素选择器,则可以将该第一级简单选择器对应的样式规则存储在无元素类中,若第一级简单选择器包含元素选择器,则进一步判断元素选择器对应的标签名,将不同的标签名分为不同的类,类的名称可以由标签名决定,例如若元素选择器为P,则其对应的标签名为P,则可以将其称为P类,若元素选择器为div,则其对应的标签名为div,则可以将其称为div类等等,并且可以对应每个选择器分类存储属于该选择器分类的选择器所属的样式规则。
[0072]方式二,根据标签名、标签属性以及属性值分类,相应的处理可以如下:根据CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值,将各选择器划分为多个选择器分类。
当前第2页1 2 3 4 5 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1