一种可视化标签及使用其生成网页的方法技术

本发明专利技术涉及一种网页动态技术，具体的说，是用于网页的一种可视化标签及使用其生成网页的方法。一种可视化标签，所述可视化标签采用ＨＴＭＬ中的基本标签来实现；所述可视化标签还包括一标识；所述可视化标签具有和最终代码相似的尺寸；所述可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数据来生成替换该标签的最终ＨＴＭＬ代码；所述参数至少包括标签的类型参数和查询参数。可视化标签能够被网页浏览器识别，无须在服务器端经过运行环境解析，由此可视化标签生成的网页模板在浏览器中可以直接预览。

【技术实现步骤摘要】

本专利技术涉及一种网页动态技术，具体的说，是用于网页的一种可视化标签及使用 其生成网页的方法。
技术介绍
在互联网中，网页由服务器生成并传到客户端的浏览器上显示。目前，一般网页都 是在服务器上将网页模板绑定与该网页相关的数据动态创建的。动态创建网页的三个要素 是网页模板、网页数据和动态网页技术。其中，网页模板定义了网页的布局和框架，是网页 的静态代码部分；网页数据一般是同一个模板生成的多个网页之间不同的部分，是网页的 动态代码部分；而动态网页技术主要是负责分析网页模板，解析模板中的标签和脚本，并结 合网页相关数据，生成最终的网页代码。目前流行的动态网页技术有很多种，以ASP(Active Server Page，即动态服务器 页面)、PHP (Hypertext Pr印rocessor，即超级文本预处理语言)、JSP (Java Server Pages) 为例，都有自己的网页模板规范和语法，另外，还有一些可以扩充的技术，如JSP标签库，让 人们可以自已定义网页标签，自己进行标签的解析和代码替换。尽管技术和实现有所不 同，但基本思路都一样，就是在网页的HTML(HyperTextMark-up Language,即超文本标记 语言或超文本链接标示语言)代码中加入相应的自定义标签，如〈JSPdnclude〉，<% = request. getParameter (“ id”) % >等，这些标签都不是基本HTML标签，也就是必须在服务 器端经过运行环境的解析才能生成最终的HTML代码，而标签本身，网页浏览器并不识别。 也就是，这种网页模板在浏览器中直接预览，我们是看不到标签的颜色、尺寸和位置的。这 种网页模板的不足之处是不能给人们直观感受，特别是不熟悉相关动态网页技术的人，根 本不能从网页模板来判断最终网页会是什么形态和布局。
技术实现思路
本专利技术的目的是提供，可视化标签能够 被网页浏览器识别，无须在服务器端经过运行环境解析，由此可视化标签生成的网页模板 在浏览器中可以直接预览。本专利技术是这样实现的一种可视化标签，所述可视化标签采用HTML中的基本标签 来实现；所述可视化标签还包括一标识；所述可视化标签具有和最终代码相似的尺寸；所述可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数 据来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。所述可视化标签具有和最终代码相似的尺寸是通过层叠样式单实现。所述标签的查询参数的值放在特定区段中。一种使用上述的可视化标签生成网页的方法，包括以下步骤a定义网页模板，模板中包含静态代码部分和动态代码部分，所述动态代码部分即 为所述可视化标签；b准备网页数据；c解析可视化标签网页模板，首先识别所述可视化标签中的所述标识，再分析所述 可视化标签中的参数及参数值，依据所述可视化标签中的定义进行网页数据的查询，将查 询结果组装成最终的HTML代码并替换相应标签，生成最终网页。所述网页数据存放在数据库中，内容至少包括网页编号、标题、网页内容、网址、所 属栏目。本专利技术并不排斥传统的动态网页技术，而是可以在这些动态网页技术之上构造， 但根本差别在于本专利技术涉及的网页模板是由静态页面代码和可视化标签组成的，这种可视 化标签在普通的网页浏览器中是可见的；并且该模板里不包含动态网页技术本身的标签。本专利技术具有以下有益效果本专利技术可视化标签能够被网页浏览器识别，无须在服务器端经过运行环境解析， 由此可视化标签生成的网页模板在浏览器中可以直接预览。因此应用本专利技术可视化标签及 其生成的网页的方法能从网页模板看出最终网页是什么形态和布局，制作网页及其方便， 即使不懂编程的人员也能轻松制作网页。附图说明下面结合附图和具体实施方式对本专利技术作进一步说明。图1为采用本专利技术可视化标签生成网页的方法示意图；图中S1_1网页模板，S1-2网页数据，S1-3标签解析，Sl_4最终网页具体实施例方式下面用一个实际的例子对本专利技术做具体说明。一种可视化标签，采用HTML中的基本标签来实现，如<div>、<span>、<input>，不 管是哪一种，最重要的是普通网页浏览器能够识别并显示。可视化标签还包括一标识，使之区别于普通HTML标签。如在标签里统一设置属性 值name =，，myTag，，。可视化标签具有和最终代码相似的尺寸，这是通过CSS (层叠样式单)实现。如在 标签里加入属性:style = width 90% ；height :200px ； ”。可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数据 来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。如 datetype为标签的类型参数，compvalue为查询参数。标签的查询参数的值放在特定区段中，如compvalue的值放在CDATA区段中。采用本专利技术可视化标签生成网页的方法如图1所示，Sl-I为网页模板，S1-2是与 本网页相关的网页数据，S1-3是标签解析，对网页模板进行分析，并绑定网页数据，从而生 成最终网页S1-4。整个方法实施的步骤是第一步定义网页模板S1-1，模板中包含静态代码部分和动态代码部分(符合本专利技术规范的可视化标签)。附录1是一个实际的网页模板S1-1，其中有三个可视化标签，即三个name的值 为”myTag”的input标签。Input标签是浏览器可以识别的，因为标签里的style中定义的 宽度、长度和背景颜色都会在浏览器中显示出来，技术人员可以很容易地识别。第二步准备网页数据S1-2。网页数据S1-2 —般存放在数据库中，格式一般为网页编号、标题、内容、网址、所 属栏目和其他一些自定义字段。附录2中列举了几条与本网页相关的网页数据S1-2实例。第三步标签解析S1-1，具体为解析网页模板S1-1，依据可视化标签中的定义进 行网页数据S1-2的查询，将查询结果组装成最终的HTML代码并替换相应标签，生成最终网 页 S1-4。具体解析的方法是首先找出网页模板Sl-I中name的值为“myTag”的所有可视化标签；再依次分析 每个标签中相关属性值。标签里的datetype和compvalue的属性值定义了标签的类型和查询参数 (compvalue的值中可能包含HTML代码，为避免破坏input标签的完整性，因此统一将它的 值放在CDATA区段中)，在附录1所示的模板中第一个input标签datatype的值为title，含义是取得网页数据S1-2中的标题。第二个input标签datatype的值为content，含义是取得网页数据S1-2中的内容。第三个input标签datatype的值为list，含义是生成一个列表；参考compvalue 中的参数column 栏目1，查询条件所属栏目的值等于“栏目1”order :date desc，按照 date 列降序排列perPage :5，限定每一页只列出5条htmlVal :<li><a href = {url} target = _blank> {title} </a></li>,查询出来 的网页数据按照“<本文档来自技高网...

【技术保护点】

【技术特征摘要】
一种可视化标签，其特征在于，所述可视化标签采用HTML中的基本标签来实现；所述可视化标签还包括一标识；所述可视化标签具有和最终代码相似的尺寸；所述可视化标签还包括多个参数及参数值；所述参数及参数值定义了使用网页数据来生成替换该标签的最终HTML代码；所述参数至少包括标签的类型参数和查询参数。2.如权利要求1所述的可视化标签，其特征在于，所述可视化标签具有和最终代码相 似的尺寸是通过层叠样式单实现。3.如权利要求1或2所述的可视化标签，其特征在于，所述标签的查询参数的值放在特 定区段中。4.一种使用如权利要求1所述的...

【专利技术属性】
技术研发人员：严洪涛，沈亦可，
申请(专利权)人：上海银杏界信息科技有限公司，
类型：发明
国别省市：31