CN107957868A - 一种html用户界面可视化编辑方法及装置 - Google Patents

Abstract

本发明提供了一种HTML用户界面可视化编辑方法及装置，该方法包括：为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，交互层遮罩容器中存在HTML用户界面上各元素对应的交互遮罩；在捕获到外部针对任一元素对应的交互遮罩的触发操作时，控制显示层遮罩容器中的该元素对应的显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在利用交互层遮罩容器捕获到外部针对该元素的编辑操作时，根据相应操作类型对该元素执行相应处理。经交互遮罩以收集操作信息，并提供给系统以用来编辑元素，这一可视化编辑方法无需改变元素运行时代码。因此，本发明能够不侵入运行时代码而实现HTML用户界面的可视化编辑。

Description

一种HTML用户界面可视化编辑方法及装置

技术领域

本发明涉及计算机技术领域，特别涉及一种HTML用户界面可视化编辑方法及装置。

背景技术

在软件开发过程中，可视化的用户界面编辑能够提高开发效率。

目前，可以针对HTML(HyperText Markup Language，超文本标记语言)用户界面上的元素进行所需操作，以达到可视化编辑的效果，但这一可视化编辑需要侵入所操作元素的运行时代码。

发明内容

本发明提供了一种HTML用户界面可视化编辑方法及装置，能够不侵入运行时代码而实现HTML用户界面的可视化编辑。

为了达到上述目的，本发明是通过如下技术方案实现的：

一方面，本发明提供了一种HTML用户界面可视化编辑方法，为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；还包括：

在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；

控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

进一步地，所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

进一步地，所述操作类型为新建元素时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动有第一元素并于第一位置处释放所述第一元素；所述对所述目标元素执行相应处理包括：判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击且鼠标落点位置位于所述目标交互遮罩内；所述对所述目标元素执行相应处理包括：控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

所述操作类型为修改元素属性时，所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，所述对所述目标元素执行相应处理包括：采集外部输入的修改值，将所述属性值更新为所述修改值；

所述外部针对所述目标元素的编辑操作包括：鼠标拖拽所述目标元素的边框并于第二位置处释放时，所述对所述目标元素执行相应处理包括：更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述外部针对所述目标元素的编辑操作包括：鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，所述对所述目标元素执行相应处理包括：展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动所述目标元素并于第三位置处释放所述目标元素；所述对所述目标元素执行相应处理包括：将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令；所述对所述目标元素执行相应处理包括：删除所述目标元素。

进一步地，所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

进一步地，所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。

另一方面，本发明提供了一种HTML用户界面可视化编辑装置，包括：

交互单元，用于在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，向处理单元输出第一触发信号；在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，向所述处理单元输出第二触发信号；

所述处理单元，用于为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；在接收到所述第一触发信号时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在接收到所述第二触发信号时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

进一步地，所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

进一步地，所述操作类型为新建元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标拖动有第一元素并于第一位置处释放所述第一元素时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标单击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

所述操作类型为修改元素属性时，所述交互单元具体用于捕获鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，向所述处理单元输出第一通知信号；所述处理单元具体用于在接收到所述第一通知信号时，采集外部输入的修改值，将所述属性值更新为所述修改值；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标拖拽所述目标元素的边框并于第二位置处释放时，向所述处理单元输出第二通知信号；所述处理单元具体用于在接收到所述第二通知信号时，更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元输出第三通知信号；所述处理单元具体用于在接收到所述第三通知信号时，展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标拖动所述目标元素并于第三位置处释放所述目标元素时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，删除所述目标元素。

进一步地，所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

所述处理单元具体用于在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

进一步地，所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。

本发明提供了一种HTML用户界面可视化编辑方法及装置，该方法包括：为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，交互层遮罩容器中存在HTML用户界面上各元素对应的交互遮罩；在捕获到外部针对任一元素对应的交互遮罩的触发操作时，控制显示层遮罩容器中的该元素对应的显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在利用交互层遮罩容器捕获到外部针对该元素的编辑操作时，根据相应操作类型对该元素执行相应处理。经交互遮罩以收集操作信息，并提供给系统以用来编辑元素，这一可视化编辑方法无需改变元素运行时代码。因此，本发明能够不侵入运行时代码而实现HTML用户界面的可视化编辑。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例提供的一种HTML用户界面可视化编辑方法的流程图；

图2是本发明一实施例提供的一种交互层、显示层和用户界面间的相对位置关系的示意图；

图3是本发明一实施例提供的一种HTML用户界面的示意图；

图4是本发明一实施例提供的一种HTML用户界面可视化编辑装置的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供了一种HTML用户界面可视化编辑方法，可以包括以下步骤：

步骤101：为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩。

步骤102：在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩。

步骤103：控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索。

步骤104：在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

本发明实施例提供了一种HTML用户界面可视化编辑方法，为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，交互层遮罩容器中存在HTML用户界面上各元素对应的交互遮罩；在捕获到外部针对任一元素对应的交互遮罩的触发操作时，控制显示层遮罩容器中的该元素对应的显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在利用交互层遮罩容器捕获到外部针对该元素的编辑操作时，根据相应操作类型对该元素执行相应处理。经交互遮罩以收集操作信息，并提供给系统以用来编辑元素，这一可视化编辑方法无需改变元素运行时代码。因此，本发明实施例能够不侵入运行时代码而实现HTML用户界面的可视化编辑。

在本发明一个实施例中，系统可以为HTML用户界面的可视化编辑区域生成遮罩容器。其中，生成的遮罩容器通常有两层，比如位于运行层上层的显示层，以及位于显示层上层的交互层。其中，上述HTML用户界面可以在运行层，上述显示层遮罩容器可以在显示层，上述交互层遮罩容器可以在交互层。

在本发明一个实施例中，上述交互层、显示层和用户界面间的相对位置关系可以如图2所示。即交互层在最上层，可以用于采集操作信息，显示层在中间层，可以用于提供视觉线索，用户界面在最下层。基于这一相对位置关系，可以达到所见即所得的效果。

在本发明一个实施例中，上述HTML用户界面可以理解为根元素，通常为面板布局控件，如此，可以分别在显示层创建根元素对应的显示遮罩，即上述显示层遮罩容器，以及在交互层创建根元素对应的交互遮罩，即上述交互层遮罩容器。

在本发明一个实施例中，HTML用户界面可以包括若干可编辑元素和若干无需编辑的元素。为实现可视化编辑目的，首先可以确定出HTML用户界面上包括的每一个可编辑元素，即上述至少一个元素。

在本发明一个实施例中，步骤101中所述的元素可以为HTML运行时态的DOM元素。运行时态的DOM(Document Object Model，文档对象模型)元素不可直接被编辑，但可以基于交互遮罩所捕获到的外部操作信息，对其进行编辑。

详细地，对于HTML用户界面上的每一个元素，可以预先在交互层遮罩容器中生成各元素对应的交互遮罩。

举例来说，基于自身所看到的用户界面，开发人员将鼠标停留在一元素X上时，其实鼠标是停留在元素X对应的交互遮罩上。此时，系统可以认为开发人员需要对元素X执行所需操作。为提高用户操作体验，可以对元素X与其他元素进行区分显示。如此，系统在捕获到鼠标停留在元素X对应的交互遮罩上这一触发操作时，可以确定显示层遮罩容器中元素X对应的显示遮罩。

在本发明一个实施例中，若元素X首次被操作，此时通常不存在其对应的显示遮罩，故系统可以在显示层遮罩容器中生成元素X对应的显示遮罩。

在本发明一个实施例中，显示遮罩可以是一个内部透明的边框，开发者看到的是HTML元素和显示遮罩的叠加效果。显示遮罩的边框与相应元素的外形大小保存一致，且通过提供视觉线索以使边框突显，从而起到突显元素的效果。

基于此，在本发明一个实施例中，所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。

详细地，可以通过控制任一显示遮罩的显示效果，以表示相应元素已经处于一种状态，如选中状态、可被操作状态，这种显示效果可以作为当前操作的视觉反馈，也可以作为进一步编辑操作的视觉线索。

详细地，当开发人员触发一交互遮罩时，系统通常可以将该交互遮罩对应的元素进行突显，以使开发人员快速清楚的确定可以对这一被突显的元素进行所需编辑操作。其中，不同的突显标识可以对应于不同的显示效果。

比如，开发人员触发一交互遮罩时和单击一交互遮罩时，两者的突显标识不同，对应的显示效果也不同。其中，前者的显示效果可以表示元素可以被选中或可以被操作，后者的显示效果可以表示为元素当前处于选中状态。

在本发明一个实施例中，当开发人员需要移动一元素时，可以控制鼠标拖动至所需位置处，此时，可以进一步控制该元素对应的显示遮罩的显示效果，以在该所需位置处显示该元素的示意图。通常情况下，该元素的示意图可以与该元素自身保持一致。

举例来说，一网页上存在3个超链接，分别为超链接1、超链接2和超链接3。开发人员在可视化界面所看到的即为该3个超链接自身。若开发人员触发超链接1的交互遮罩，则可以生成超链接1对应的显示遮罩。此时，为方便区分，可以对超链接1对应的显示遮罩进行高亮显示，以表示超链接1可被选中或可被执行所需操作。其中，高亮显示即可以为突显标识中的一种。

在本发明一个实施例中，在系统根据外部输入的编辑操作以对元素X执行相应处理后，可以删除这一显示遮罩。在这一情况下，系统在捕获到外部针对任一元素的触发操作时，无论这一触发操作是否为针对该元素的首次操作，均需在显示层遮罩容器中生成该元素对应的显示遮罩。

对应地，在本发明另一实施例中，在系统根据外部输入的编辑操作以对元素X执行相应处理后，可以不删除这一显示遮罩，但可以控制该显示遮罩不提供视觉线索，即此时无需突显元素X。在这一情况下，系统在捕获到外部针对任一元素的触发操作时，这一触发操作不为针对该元素的首次操作时，可以直接确定显示层遮罩容器中存在的该元素对应的显示遮罩。

举例来说，对于一网页上的一个超链接，当开发人员发现该超链接目录内容存在错误需要更正时，由于该超链接处于运行时态，若开发人员直接点击该超链接，系统将执行该超链接的内容跳转，无法实现所需目的。如此，可以在该超链接的上层设置一相应的交互遮罩，开发人员控制鼠标点击该超链接时，实际上是点击了该超链接对应的交互遮罩。系统在捕获到这一触发操作时，可以在显示层遮罩容器中生成该超链接对应的显示遮罩，并控制该显示遮罩提供视觉线索以突显该超链接。然后，开发人员控制鼠标双击该超链接以请求更正时，这一操作仍作用于该超链接对应的交互遮罩上，如此，系统根据捕获到的这一编辑操作的操作类型，可以提供对话框。比如，这一对话框的大小形状与该超链接的大小形状一致，且该对话框中的内容与该超链接的目录内容一致。开发人员基于该对话框，可以对对话框中的内容进行按需更正。对应地，系统进一步将这一更正处理应用于该超链接自身。

在本发明一个实施例中，开发人员在对HTML用户界面可视化编辑完成时，可以申请预览。系统在预览阶段可以删除所有遮罩，即删除各显示遮罩和交互遮罩，此时，用户点击任一超链接时，将触发该超链接自身。

在本发明一个实施例中，系统可以根据用户的操作意图，将所捕获的用户交互动作，即上述编辑操作转换为HTML DOM操作指令并执行，以最终达到可视化编辑用户界面的效果。

详细地，系统可以捕获到鼠标针对任一元素的进入和离开动作，鼠标针对任一元素或其他目标对象，如HTML用户界面中的任意空白处等的单击双击动作，以及鼠标针对任一元素的拖动和放入动作，等等。

详细地，不同的编辑操作，其操作类型相应不同。如此，系统基于交互遮罩所捕获到的外部编辑操作，可以进一步确定出操作类型。

在本发明一个实施例中，所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

基于上述内容，在本发明一个实施例中，所述操作类型为新建元素时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动有第一元素并于第一位置处释放所述第一元素；所述对所述目标元素执行相应处理包括：判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击且鼠标落点位置位于所述目标交互遮罩内；所述对所述目标元素执行相应处理包括：控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

所述操作类型为修改元素属性时，所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，所述对所述目标元素执行相应处理包括：采集外部输入的修改值，将所述属性值更新为所述修改值；

所述外部针对所述目标元素的编辑操作包括：鼠标拖拽所述目标元素的边框并于第二位置处释放时，所述对所述目标元素执行相应处理包括：更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述外部针对所述目标元素的编辑操作包括：鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，所述对所述目标元素执行相应处理包括：展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动所述目标元素并于第三位置处释放所述目标元素；所述对所述目标元素执行相应处理包括：将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令；所述对所述目标元素执行相应处理包括：删除所述目标元素。

在本发明一个实施例中，开发人员通过鼠标单击HTML用户界面上的任一元素，以选择该元素时，系统可以展示该元素对应的元素属性列表控制面板。其中，该元素属性列表控制面板上可以包括该元素的每一种属性和各种属性的属性值。开发人员点击，如单击或双击任一属性值时，系统可以根据输入值对该属性值进行修改。

当然，在本发明一个实施例中，开发人员不修改属性值时，这一元素属性列表控制面板在展示一定时间后可以自动清除。

通常情况下，对于修改元素属性来说，对元素尺寸大小和元素文本信息的修改较为常用，故可以提供相应的快捷方式。以修改元素尺寸大小为例，开发人员需要修改任一元素的尺寸大小时，可以无需单击选择该元素，以使系统显示元素属性列表控制面板，以进一步更改尺寸值，而是直接控制鼠标拖拽该元素的边框即可。

详细地，上述第一元素可以为HTML用户界面上的任一元素，也可以为外部元素库中的任一元素。

详细地，上述第一侧边可以为目标交互遮罩的任一侧边。

详细地，上述第一预设值和上述第二预设值可以相等。比如，可以均为5像素。此外，当需要在目标元素一侧新建元素时，不仅可以要求上述第一位置与目标交互遮罩的第一侧边间的距离不小于第一预设值，同时可以要求这一距离应不大于另一预设值。

详细地，上述移动元素位置，通常为将目标元素移动至HTML用户界面的一任意空白位置处。当需要将一元素移动至HTML用户界面的任一其他元素中或其一侧时，操作类型可以对应于上述新建元素操作，此时，该待移动元素可以为上述第一元素，该其他元素可以为上述目标元素。

在本发明一个实施例中，所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

举例来说，假设HTML用户界面上存在一元素A，开发人员控制鼠标位于元素A对应的交互遮罩A内时，系统可以生成元素A对应的显示遮罩A，系统可以控制显示遮罩A加粗边框并高亮，以提示开发人员当前元素为元素A。

详细地，对于上述新建元素：

开发人员控制鼠标位于交互遮罩A内时，鼠标可以同时拖动有一待新建元素，比如为元素B。此时，系统可以捕获到鼠标的拖动动作，并记录元素B的控件类型标识。

开发人员控制鼠标拖动元素B至一位置处释放时，若该位置位于交互遮罩A内，系统通常认为需要在元素A内新建元素B，若该位置位于交互遮罩A外，系统通常认为需要在元素A的一侧新建元素B。

在元素A内新建元素B时，元素B的父元素为元素A，在元素A外新建元素B时，元素B的父元素可以为根元素。

详细地，对于上述选择元素：

开发人员控制鼠标点击元素A时，实际上点击了交互遮罩A，故系统可以控制显示遮罩A通过提供不同视觉线索以提示选中元素A。

详细地，对于上述修改元素属性：

开发人员控制鼠标双击元素A时，实际上双击了交互遮罩A，故系统可以展示对话框以采集外部在对话框中输入的编辑内容，从而根据该编辑内容更新元素A。

对于元素属性，除了修改元素目录内容，还可以改变元素尺寸大小，改变元素颜色、字体颜色等。比如，开发人员拖动鼠标以改变元素A的尺寸大小时，这一鼠标拖动轨迹将会被交互层遮罩容器捕获到，故系统可以据此将元素A变为这一尺寸。当然，元素A的尺寸改变时，其相应的交互遮罩和显示遮罩可以随着改变。

详细地，对于上述移动元素：

开发人员通过鼠标拖动元素A到设计面板任一其他位置时，这一鼠标拖动轨迹将会被交互层遮罩容器捕获到，故系统可以据此将元素A移动至该位置。

例如，当开发人员通过鼠标将元素A拖动至设计面板区域时，系统可以使显示层遮罩容器高亮边框，且在显示层遮罩容器内增加虚线边框的显示遮罩，以向开发人员提示，虚线边框内部区域可以接收元素A。

然后，若开发人员通过鼠标将元素A拖动至设计面板区域后松开鼠标，系统可以认为开发人员确定移动元素A，故可以捕获相应操作信息，如元素A、元素A的控件类型标识、父元素、在父元素内的位置等。

比如，鼠标被松开时，鼠标落点位置位于一交互遮罩内时，该父元素即可以为该交互遮罩对应的元素。再比如，鼠标被松开时，鼠标落点位置为用户界面任一空白处时，即落入交互遮罩容器中，故该父元素即可以为根元素。

详细地，对于上述删除元素：

开发人员控制鼠标单击元素A并按下删除功能按钮，如键盘上的Del键时，系统可以捕获到这一编辑操作，从而删除元素A。

综上所述，在步骤101所述内容的基础之上，可以通过步骤102至步骤104所述内容，针对任一元素以实现HTML用户界面可视化编辑。如此，开发人员每触发一元素时，系统将重复执行上述步骤102至步骤104。

在本发明一个实施例中，为实现如上所述的HTML用户界面可视化编辑，开发人员首先需要打开一HTML用户界面文件。其中，该文件可以为一新建的空白文件，也可以为一保存在磁盘中的非新建文件。当然，该非新建文件通常已被开发人员所编辑过，故系统打开这一非新建文件时，HTML用户界面上通常存在至少一个元素。

详细地，无论时新建文件还是非新建文件，在开发人员完成可视化编辑并请求保存时，为记录所有的编辑操作，可以会文件进行存储。其中，可以以文本文件存储，也可以以二进制文件存储。详细地，数据格式可以是HTML、XML(Extensible Markup Language，可扩展标记语言)、JSON(JavaScript Object Notation，JavaScript对象标记语言)等。

综上所述，本发明实施例提供的HTML用户界面可视化编辑方法，可以适用于Web应用的UI界面的开发，通过在HTML运行时态的DOM元素上增加分层遮罩，以捕获开发者的设计时动作，从而完成用户界面的可视化编辑。如此，本发明实施例利用HTML技术来实现HTML元素的可视化编辑，达到所见即所得的开发体验。

如图3所示，本发明一个实施例提供了一种HTML用户界面的示意图。在图3中，编辑区内存在一个元素排列方式为垂直排列的元素，此处记作元素1，该元素1中垂直排列有3个元素，此处以自上而下的垂直排列顺序，将该3个元素依次记作元素2、元素3和元素4。请参考图3，由于元素2、元素3和元素4均位于元素1内部，故元素1为一容器元素，布局方式为垂直布局。

在图3中，元素2中水平排列有3个元素，分别为“超链接A”、“超链接B”、“超链接C”，因此，该元素2同样为一容器元素，布局方式为水平布局，对应地，“超链接A”、“超链接B”、“超链接C”这三个元素均为独立元素，元素类型为超链接。

在图3中，元素3中水平排列有3个元素，分别为“图像A”、“图像B”、“图像C”，因此，该元素3同样为一容器元素，布局方式为水平布局，对应地，“图像A”、“图像B”、“图像C”这三个元素均为独立元素，元素类型为图像。

在图3中，元素4中水平排列有2个元素，因此，该元素4同样为一容器元素，布局方式为水平布局。此处将该2个元素中，位于左侧的元素记作元素5，对应地，位于右侧的元素为一独立元素“按钮C”，元素类型为按钮。

请参考图3，由于元素5中垂直排列有2个独立元素，“按钮A”和“按钮B”，故元素5为一容器元素，布局方式为垂直布局。对应地，“按钮A”和“按钮B”均为元素类型为按钮的独立元素。

基于图2所示的用户界面，假设用户当前单击选中“按钮C”，则按钮C的显示突出，这一突显效果请参照图3。经“按钮C”对应的显示遮罩以提供相应视觉线索，用户可以明确“按钮C”当前处于选中状态。

“按钮C”被选中时，在图3中的右侧属性区，可以存在“按钮C”对应的各属性类别和属性参数值。比如，自上而下来看，各属性类型分别为“文字”、“尺寸”、“坐标”、“颜色”，“文字”的属性参数值为“按钮C”、“尺寸”的属性参数值为“宽-70，高-30”、“坐标”的属性参数值为“x-400，y-350”、“颜色”的属性参数值为“#000000”。如此，用户可以点击任一输入框中的属性参数值以进行所需修改。当然，交互层在捕获到这一修改操作时，可以基于修改操作的具体内容，对“按钮C”这一独立元素执行相应修改。

此外，请参考图3，在HTML用户界面的左侧工具区，还可以预设有元素库，或称控件库，元素库中可以包括若干独立元素和若干容器元素，或分别称作独立控件、容器控件。

请参考图3，这一元素库中包括有独立元素和容器元素。独立元素有5种，分别为“标签”、“超链接”、“按钮”、“文本输入框”、“图像”；容器元素有4种，分别为“水平布局”、“垂直布局”、“矩阵布局”、“绝对布局”。如此，用户需要新建任一元素时，通过控制鼠标将所需元素从工具区拖动至编辑区即可。

基于上述内容，HTML用户界面中的各元素均可以来源于当前元素库，即可以为元素库中的任一元素或多个元素的任意组合。如此，元素库中的任一元素可以为待新建的元素，即可以为上述第一元素。

详细地，HTML是当前使用广泛的用户界面语言，可以通过DOM技术操作元素，从而实现与用户的交互。此外，为提高开发效率，如图3所示，可以基于HTML用户界面使用元素库。不同元素库的元素种类通常不同，但均可以适用于本发明实施例所述的基于分层遮罩以可视化编辑HTML用户界面，从而既能充分利用用户界面元素库的开发效率，又能够避免用户界面元素库的学习成本，无需对所用的HTML开发技术进行修改或扩展，适用性广，从而有益于快速高效地完成用户界面的开发。

如图4所示，本发明一个实施例提供了一种HTML用户界面可视化编辑装置，包括：

交互单元401，用于在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，向处理单元402输出第一触发信号；在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，向所述处理单元402输出第二触发信号；

所述处理单元402，用于为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；在接收到所述第一触发信号时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在接收到所述第二触发信号时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

在本发明一个实施例中，所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

在本发明一个实施例中，所述操作类型为新建元素时，所述交互单元401具体用于在利用所述交互层遮罩容器捕获到鼠标拖动有第一元素并于第一位置处释放所述第一元素时，向所述处理单元402输出第二触发信号；所述处理单元402具体用于在接收到所述第二触发信号时，判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述交互单元401具体用于在利用所述交互层遮罩容器捕获到鼠标单击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元402输出第二触发信号；所述处理单元402具体用于在接收到所述第二触发信号时，控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

所述操作类型为修改元素属性时，所述交互单元401具体用于捕获鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述交互单元401在利用所述交互层遮罩容器捕获到鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，向所述处理单元402输出第一通知信号；所述处理单元402具体用于在接收到所述第一通知信号时，采集外部输入的修改值，将所述属性值更新为所述修改值；

所述交互单元401在利用所述交互层遮罩容器捕获到鼠标拖拽所述目标元素的边框并于第二位置处释放时，向所述处理单元402输出第二通知信号；所述处理单元402具体用于在接收到所述第二通知信号时，更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述交互单元401在利用所述交互层遮罩容器捕获到鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元402输出第三通知信号；所述处理单元402具体用于在接收到所述第三通知信号时，展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述交互单元401具体用于在利用所述交互层遮罩容器捕获到鼠标拖动所述目标元素并于第三位置处释放所述目标元素时，向所述处理单元402输出第二触发信号；所述处理单元402具体用于在接收到所述第二触发信号时，将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述交互单元401具体用于在利用所述交互层遮罩容器捕获到鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令时，向所述处理单元402输出第二触发信号；所述处理单元402具体用于在接收到所述第二触发信号时，删除所述目标元素。

在本发明一个实施例中，所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

所述处理单元402具体用于在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

在本发明一个实施例中，所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。

上述装置内的各单元之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

综上所述，本发明的各个实施例至少具有如下有益效果：

1、本发明实施例中，为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，交互层遮罩容器中存在HTML用户界面上各元素对应的交互遮罩；在捕获到外部针对任一元素对应的交互遮罩的触发操作时，控制显示层遮罩容器中的该元素对应的显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在利用交互层遮罩容器捕获到外部针对该元素的编辑操作时，根据相应操作类型对该元素执行相应处理。经交互遮罩以收集操作信息，并提供给系统以用来编辑元素，这一可视化编辑方法无需改变元素运行时代码。因此，本发明实施例能够不侵入运行时代码而实现HTML用户界面的可视化编辑。

2、本发明实施例中，提供的HTML用户界面可视化编辑方法，可以适用于Web应用的UI界面的开发，通过在HTML运行时态的DOM元素上增加分层遮罩，以捕获开发者的设计时动作，从而完成用户界面的可视化编辑。如此，本发明实施例利用HTML技术来实现HTML元素的可视化编辑，达到所见即所得的开发体验。

3、本发明实施例中，既能充分利用用户界面元素库的开发效率，又能够避免用户界面元素库的学习成本，无需对所用的HTML开发技术进行修改或扩展，适用性广，从而有益于快速高效地完成用户界面的开发。

需要说明的是，在本文中，诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个〃····〃”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储在计算机可读取的存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是：以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

1.一种超文本标记语言HTML用户界面可视化编辑方法，其特征在于，为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；还包括：

在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；

控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

2.根据权利要求1所述的方法，其特征在于，

所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

3.根据权利要求2所述的方法，其特征在于，

所述操作类型为新建元素时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动有第一元素并于第一位置处释放所述第一元素；所述对所述目标元素执行相应处理包括：判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击且鼠标落点位置位于所述目标交互遮罩内；所述对所述目标元素执行相应处理包括：控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；

所述操作类型为修改元素属性时，所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述外部针对所述目标元素的编辑操作包括：鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，所述对所述目标元素执行相应处理包括：采集外部输入的修改值，将所述属性值更新为所述修改值；

所述外部针对所述目标元素的编辑操作包括：鼠标拖拽所述目标元素的边框并于第二位置处释放时，所述对所述目标元素执行相应处理包括：更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述外部针对所述目标元素的编辑操作包括：鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，所述对所述目标元素执行相应处理包括：展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述外部针对所述目标元素的编辑操作包括：鼠标拖动所述目标元素并于第三位置处释放所述目标元素；所述对所述目标元素执行相应处理包括：将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述外部针对所述目标元素的编辑操作包括：鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令；所述对所述目标元素执行相应处理包括：删除所述目标元素。

4.根据权利要求3所述的方法，其特征在于，

所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

5.根据权利要求1至4中任一所述的方法，其特征在于，

所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。

6.一种超文本标记语言HTML用户界面可视化编辑装置，其特征在于，包括：

交互单元，用于在捕获到外部针对所述至少一个元素中任一目标元素对应的目标交互遮罩的触发操作时，向处理单元输出第一触发信号；在利用所述交互层遮罩容器捕获到外部针对所述目标元素的编辑操作时，向所述处理单元输出第二触发信号；

所述处理单元，用于为HTML用户界面生成显示层遮罩容器和交互层遮罩容器，其中，所述交互层遮罩容器所在层在所述显示层遮罩容器所在层之上，所述显示层遮罩容器所在层在所述HTML用户界面所在层之上，对于所述HTML用户界面上包括的至少一个元素，所述交互层遮罩容器中存在每一个所述元素对应的交互遮罩；在接收到所述第一触发信号时，确定所述显示层遮罩容器中的所述目标元素对应的目标显示遮罩；控制所述目标显示遮罩的显示效果，以为编辑HTML用户界面提供视觉线索；在接收到所述第二触发信号时，根据所述编辑操作的操作类型，对所述目标元素执行相应处理。

7.根据权利要求6所述的HTML用户界面可视化编辑装置，其特征在于，

所述操作类型包括：新建元素、选择元素、修改元素属性、移动元素位置、删除元素中的任意一种。

8.根据权利要求7所述的HTML用户界面可视化编辑装置，其特征在于，

所述操作类型为新建元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标拖动有第一元素并于第一位置处释放所述第一元素时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，判断所述第一位置与所述目标交互遮罩间的位置关系，在判断出所述第一位置位于所述目标交互遮罩的外部，且所述第一位置与所述目标交互遮罩的第一侧边间的距离不小于第一预设值时，在所述目标元素的第一侧边侧增加所述第一元素；在判断出所述第一位置位于所述目标交互遮罩的内部，且所述第一位置与所述目标交互遮罩的任一侧边间的距离均不小于第二预设值时，在所述目标元素的内部增加所述第一元素；

所述操作类型为选择元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标单击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，控制所述目标显示遮罩的显示效果，以为提示所述目标元素当前处于选中状态提供视觉线索；

所述操作类型为修改元素属性时，所述交互单元具体用于捕获鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作、鼠标拖拽所述目标元素的边框并于第二位置处释放、鼠标双击且鼠标落点位置位于所述目标交互遮罩内中的任意一种；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标针对所述目标元素的元素属性列表控制面板上的任一属性值的点击操作时，向所述处理单元输出第一通知信号；所述处理单元具体用于在接收到所述第一通知信号时，采集外部输入的修改值，将所述属性值更新为所述修改值；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标拖拽所述目标元素的边框并于第二位置处释放时，向所述处理单元输出第二通知信号；所述处理单元具体用于在接收到所述第二通知信号时，更新所述目标元素的尺寸大小，以使所述目标元素的边框包含所述第二位置；

所述交互单元在利用所述交互层遮罩容器捕获到鼠标双击且鼠标落点位置位于所述目标交互遮罩内时，向所述处理单元输出第三通知信号；所述处理单元具体用于在接收到所述第三通知信号时，展示对话框，并采集外部在所述对话框中输入的编辑内容，以及根据所述编辑内容更新所述目标元素；

所述操作类型为移动元素位置时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标拖动所述目标元素并于第三位置处释放所述目标元素时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，将所述目标元素移动至所述第三位置处；

所述操作类型为删除元素时，所述交互单元具体用于在利用所述交互层遮罩容器捕获到鼠标单击、鼠标落点位置位于所述目标交互遮罩内，且外部输入删除命令时，向所述处理单元输出第二触发信号；所述处理单元具体用于在接收到所述第二触发信号时，删除所述目标元素。

9.根据权利要求8所述的HTML用户界面可视化编辑装置，其特征在于，

所述HTML用户界面上包括的任一元素的元素类别包括：独立元素或可容纳至少一个元素的容器元素；

所述处理单元具体用于在所述目标元素的内部增加所述第一元素时，所述目标元素的元素类别为容器元素，所述第一元素的元素类别为独立元素或容器元素，所述第一元素为所述HTML用户界面上包括的任一元素或预设元素库中的任一待新建元素。

10.根据权利要求6至9中任一所述的HTML用户界面可视化编辑装置，其特征在于，

所述视觉线索包括：所述目标元素在所述HTML用户界面上的元素位置、元素边界、突显标识、与其他元素的关系中的任意一种或多种。