Web Generator：基于Bootstrap的合成用户界面数据集生成开源软件（2022）

软件X 17（2022）100985原始软件出版物Web Generator：一个用于基于Web的合成用户界面数据集生成的开源软件安德烈斯·索托a，b，赫克托·莫拉a，b，c，海梅·A.里亚斯科a，d，a哥伦比亚帕斯托纳里尼奥自治大学公司b哥伦比亚帕斯托SDAS研究小组c哥伦比亚帕斯托CESMAG大学d哥伦比亚Envigado大学研究所，Envigadoar t i cl e i nf o文章历史记录：收到2020年收到修订版，2021年10月26日接受，2022年关键词：合成数据集数据集生成HTMLBootstrapa b st ra ct最近，机器学习算法已被用于自动化几个过程，包括软件开发。然而，这个动作需要大量的数据集来训练这些算法。据我们所知，没有工具可以生成包含HTML对象（接口，代码，线框）的合成数据集。因此，我们提出了Web Generator，一个主要基于Bootstrap前端框架提供网页，设计和内容的该软件为Web元素提供 我们的目标是生产足够的材料训练并探索机器学习方法，自动网页设计和开发与此软件。版权所有©2022作者。由爱思唯尔公司出版这是CC BY许可下的开放获取文章（http://creativecommons.org/licenses/by/4.0/）中找到。代码元数据当前代码版本0.1此代码版本使用的代码/存储库的永久链接https://github.com/ElsevierSoftwareX/SOFTX-D-20-00055Code Ocean compute capsule法律代码许可证GPL v3使用git的代码版本控制系统软件代码语言，工具和服务使用Python，JavaScript，CSS。编译要求、操作环境依赖性要求：-Chromium/ Chrome浏览器> 80.0-用于Chromium的Selenium Web驱动程序=浏览器版本-Python >= 3.7-Pip >= 20.0.2学历：-硒= 3.141.0-色彩调和= 1.0.5-支配= 2.4.0-utils = 1.0.1-python_lorem = 1.1.2-古生物学= 3.3.0-webdriver_manager = 2.3.0-Libsass = 0.20.1-枕头= 7.2.0-Selenium-截图如果可用，链接到开发人员文档/手册问题支持电子邮件agsoto@protonmail.comCorresponding author at：Envigado，Envigado，哥伦比亚.电子邮件地址：agsoto@protonmail.com（Andrés Soto），jarsalas@inf.ufrgs.br（Jaime A.Riascos）。https://doi.org/10.1016/j.softx.2022.1009852352-7110/©2022作者。 由Elsevier B.V.出版。这是一篇开放获取的文章，使用CC BY许可证（http://creativecommons.org/licenses/by/4.0/）。可在ScienceDirect上获得目录列表SoftwareX期刊主页：www.elsevier.com/locate/softxAndrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009852软件元数据当前软件版本0.1此版本可执行文件的永久链接https://github.com/agsoto/webgenerator法律软件许可证GPL v3计算平台/操作系统Linux、OS X和Microsoft Windows安装要求依赖性要求：-Chromium/ Chrome浏览器> 80.0-用于Chromium的Selenium Web驱动程序=浏览器版本-Python >= 3.7-Pip >= 20.0.2学历：-硒= 3.141.0-色彩调和= 1.0.5-支配= 2.4.0-utils = 1.0.1-python_lorem = 1.1.2-古生物学= 3.3.0-webdriver_manager = 2.3.0-Libsass = 0.20.1-枕头= 7.2.0-Selenium-截图如果可用，请链接到用户手册-如果正式出版，请在参考列表中引用该出版物问题支持电子邮件agsoto@protonmail.com1. 动机和意义软件和Web开发过程的关键方面之一是设计和实现图形用户界面（GUI）。这些界面就像用户和计算机之间的桥梁，整合了用户消费和分析的内容[1]。考虑到GUI的视觉特性，设计应该考虑对象分布、色彩理论、易读性等。此外，GUI需要了解人类心理学，以确定最佳可能的交互模式，这涉及人机交互领域开发人员通常使用标记语言（如HTML或XML）编写接口，这需要对指令有深入的理解才能产生可见的结果。简而言之，用户界面的设计和实现是软件开发中代价高昂的任务[3]。近年来，有不同的策略来帮助开发人员进行事实上，正在进行的研究使用算法来自动化或促进接口的编码[4最具创新性的方法之一是使用深度学习，证明与基于界面模型或草图的然而，一个限制是数据集的可用性，因为这些算法通常需要大量的数据来产生良好的结果[7]。因此，Web Generator旨在通过提供参数化算法来生成具有功能和标签的按需Web页面，从而帮助Web界面生成研究，用作数据集。尽管有大量的网站可用，但特定的框架，结构，技术和一般特征使得离散化特定的编码文件和设计功能具有挑战性。因此，使用公开的网页作为数据集需要在挖掘和预处理数据的综合努力。正如我们之前提到的，有必要使用数据集来训练和评估接口生成方法。因此，我们回顾了可用的数据集，特别是公共数据集，以研究Web内容和界面生成，以确认合成数据生成工具RICO数据集[9]是最一致的数据集之一。它包括真实的移动界面包含组件层次结构、交互跟踪和元数据的屏幕截图该数据集是使用Google Play商店中的几个移动应用程序中的数据挖掘工具生成的，以生成数据驱动设计应用程序。然而，它不适合Web界面实验。此外，Pix2Code [7]提供了一个包含不同界面元素的数据集，但它的本质需要领域特定语言（DSL），严重限制了其内容中组件和配置的数量。类似地，在REDRAW论文[8]中，作者使用了通过数据挖掘生成的数据集。他们说公开发行，但在两年后的论文出版最后，Sketched-Webpages-Generator [10]是一个与我们更相似的软件。它专注于生成草图而不是HTML代码。出于这个原因，它使用了一种非常不同的方法，旨在提供草图中呈现的变化，而不是元素或样式的分布。命名的软件可以以互补的方式使用，在代码一级合并功能因此，我们开发了一个工具来随意生成数据集。具有编程知识的开发人员和研究人员主要使用该软件的第一版。因此，主要的执行重点是在代码级别，允许最大的灵活性，直到未来的功能开发。该软件提供了一个准备调整参数的执行工作示例，表明用户应该只提供具有相应值的We- bLayoutProbabilities的实例和具有这些概率作为参数的WebGenerator的实例。最后，调用Generate方法生成一个结果。因此，Web Generator允许研究人员生成合成的Web界面和内容，以整合可用于训练/测试Web开发过程的设计和实现的不同算法和方法的该软件带有各种生成选项，如布局和部分的概率，屏幕截图的大小，配色方案等。2. 软件描述Web生成器是用来生成Web图形用户界面数据集的软件。它包括图像，JSON格式的部分描述，以及带有引导框架类的HTML源代码Andrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009853Fig. 1. 关于生成过程的逻辑架构概述。这些数据集通过每个区段的随机概率建立边界布局区段。然后我们生成HTML源代码和一个带有部分描述的JSON。稍后，我们渲染图形用户界面并截取屏幕截图以创建相应的图像。在接下来的部分中，我们将展示其架构和主要功能。2.1. 软件构架Web Generator主要用Python 3和JavaScript编写。HTML相关的特性使用Dominate Python包，而屏幕截图生成使用Selenium驱动程序[11，12]。 软件采用面向对象编程（OOP）模式，考虑了模块化的结构，可进行后期扩展或修改。我们在下面描述整个过程数据集生成：使用用户定义的布局组件和配置概率生成概率HTML网站该软件最终生成HTML文件、PNG格式的图像以及JSON注释文件，其中包含图像中包含的每个Web元素的标签颜色功能允许我们生成调色板并将不同的颜色类应用于布局组件。在屏幕截图功能中，用户可以设置是否应该为捕获创建全屏或自定义屏幕大小。HTML生成：布局和元素模块位于Dominate包的顶部该软件专注于标记代码生成，并使用流行的前端框架Bootstrap [13]进行样式化。由于它遵循与其主要依赖相同的逻辑，因此开发人员可以生成Bootstrap类似的方法旨在使用此框架自动生成UI代码[14，15]。我们试图将自定义Cascade Styling Sheets（CSS）保持在最低限度，只使用基本规则，几乎完全依赖于框架。整个生成过程将元素、布局选择和概率作为输入，生成HTML组件（网页中最重要的部分）和元素（次要元素，通常是实际内容）。图1以图形方式显示了生成过程(1) 生成选择：它接受用户设置的选择和概率。布局选择是所有可能的布局可供渲染（图。5），元素选择是软件中所有可用的HTML组件。 例如，如果用户定义了一个特定的选择组合，它可以限制特定的布局或元素。算法从给定的选项中选择一个特定的项目，包括布局、组件和内容。可用功能的多样性取决于在相应的模块中定义类。特别地，在创建新布局时可以设置布局概率。在大多数情况下，内容的其余可能性均匀地分布在每个元素中。选择主要是使用Python的原生随机模块的Choices方法来进行的(2) HTML批量生成：在获得特定的生成选项后，布局的构造器使用布局组件的特定选项（页眉、导航栏、侧边栏和页脚）。然后内容生成器随机挑选一些不同的HTML元素，并附加到布局我们使用lorem ipsum text为每个列表、段落和标题生成文本内容最后，HTML节点被呈现为驱动器中的文本文件(3) 循 环 HTML 文 件 ： 该 软 件 创 建 一 个 新 的 Web 浏 览 器 实 例 ，Selenium将管理该实例。每个文件都是循环的，并通过浏览器实例打开，以获得具有定义选项的网页截图。HTML元素被标记，将JavaScript与JQuery [16]片段注入到浏览器中的当前文件中，检测先前确定的属性和元素对应的边界框。循环结束后，元素2.2. 软件功能我们尽量保持模块之间的交互尽可能的直接，以帮助可扩展性和可维护性.事实上，这是至关重要的，因为该软件还可以应用于数据集生成以外的其他目标，例如，独立的调色板或网页生成。Dominate包允许我们非常简洁地使用Python创建HTML页面，从而消除了学习或使用其他模板语言的需要，并利用Python从这个意义上说，网页生成的每个部分都使用这个包中的对象实例。使用的主要架构模式是Blackboard，因为最初，大多数组件都是使用其他组件的模块。图2显示了包图。软件的最重要部分被划分为具有逻辑关系和类似功能的模块。基本模块是Randomization、Layout、Elements和StyleManager。随机化：集成概率、值、选择和函数以生成随机内容和HTML元素。它使用random和lorem-python作为依赖项。布局：这个模块中的主要元素是一个继承于主要文档类的类。它包含网页的主要组件（页眉，导航栏，侧边栏和页脚），并且该方法允许呈现这些组件的确定配置。元素：这个模块包括许多类，这些类也使用in-heritance，在本例中，这些类来自Dominate包的标记。因此，每个Bootstrap组件在Elements中都有一个等效的类对象。StyleManager：这个模块负责链接到HTML生成的文件的CSS操作。当前版本生成一个随机的调色板，并在Bootstrap变量中使用它，生成框架核心包将前面提到的基本模块下面我们详细介绍核心包的每个模块：Webgenerator：与项目同名的模块允许我们创建网页组件，内部内容，颜色变化等的新配置。这Andrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009854图二. 软 件 的包图。绿色软件包是那些使用第三方软件包。 (For对该图中颜色的参考的解释图例，请读者参阅本文的网络版模块主要集成了随机化、布局和元素模块。FileManager：此模块准备所需的文件夹结构和驱动器中的其他物理操作。ScreenShutter：该模块可以通过Chrome/ Chromium浏览器实例对HTML文件进行截图，以生成标记元素的屏幕截图和注释。DataSetter：最后，具有更高抽象的模块提供HTML文件的批处理生成和ScreenShutter功能的管理另一方面，用户可以提供一些参数来调整创建的元素以生成合成数据。总之，数据集生成使用输入参数来生成所有文件。它通过调用批处理函数并将其唯一参数设置为要生成的网页数量来实现。因此图3显示了如何运行软件;最初，WebLayoutProbabilities对象具有相应的输入概率。稍后生成器本身使用上一步生成的布局。最后，ScreenShutter对象配置如何捕获屏幕截图以及要开发的接口批次的数量。下面我们描述 工具使用的主要参数数据集参数概率在WebLayoutProbabilities对象中设置，软件将在其中应用随机化函数来选择一个特定的选项。表1显示了创建接口的输入概率的描述。发电机参数稍后，我们配置定义的概率，我们可以为生成器设置两个额外的参数：with_annotations：允许生成包含GUI区域及其相应类型（如页眉、页脚、carousel等）的JSON文件with_color_variation ： 当 设 置 为true 时 ， 该 参 数 为每 个HTML页面生成一个新的随机调色板。屏幕捕获参数最后，屏幕捕获的特性基本上取决于两个参数：完整截图：这是一个布尔参数，告诉软件在保存图像时考虑网 页 的 全 高 度 （ true ） 和 固 定 的 最 大 值 （ 窗 口 高 度 ）（false）。window_size：表示一个包含窗口浏览器所需宽度和高度的这也等同于要生成的图像大小3. 说明性实例数据集的生成会产生一个包含CSS、js、HTML文件、图像文件夹和JSON文件的输出文件夹（见图10）。4）. HTML目录包含HTML源代码，在名称中以“rw "前缀分隔（rw_0.html，rw_1.html，..，rw_n.html）。在CSS文件夹中，包含网页调色板的Bootstrap分发文件和另一个包含侧边栏所需CSS规则和额外所需样式的文件。js文件夹包含所需的JQuery和Bootstrap JavaScript文件。这些JSON文件（via_pj_settings.json、web_gen_annotations.json）是用每个屏幕截图中HTML元素 主要由两个对象组成，一个包含区域属性，另一个包含形状属性，图。 5显示JSON文件描述了每个HTML文件的每个部分的元数据。····Andrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009855图三. 生成一个网页和十 个 元 素 的数据集所需配置的示例。表1WebLayoutProbabilities对象的参数。参数编号名称类型描述1关于_sidebar_p浮子边栏存在的概率2with_header_p浮子Header存在的概率3关于_navbar_p浮子导航栏存在的概率4with_footer_p浮子页脚存在的概率5layouts_p列表[4]每个可能布局的概率列表。概率之和应该是16箱形阀体浮子页面的Body被装箱到容器中的概率7大标题_p浮子有大标题的概率（大标题被认为是屏幕高度的50%或更多8sidebar_first_p浮子侧边栏位于主体左侧的概率9navbar_first_p浮子导航栏位于页眉上方的概率10bg_color_classes_p列表[3]CSS Bootstrap的背景颜色类组合的概率列表。概率之和应该是1见图4。输出文件夹的示例。它可以在短-url.at/pGPR6下载。如前所述，主要结果由代码和图像组成因此，用户可以感知两个主要成分：布局：布局表示主要网页组件和所需HTML文档标记的特定分布，包括头部，主体，脚本等。根据侧边栏与页眉和页脚的关系，有五种图6表示布局类型，其中H表示页眉元素和导航栏，S表示侧边栏，F表示页脚。要素：该软件包括Bootstrap框架的主要组成部分。这些组成的元素可以被构造为可编程的对象，以便稍后呈现。无论是组件还是元素，每个类最终都关联了一个标记，标记可以设置属性和标记节点，Andrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009856±±图五. 输出web_gen_annotation.json文件的示例。作为段落、列表、div和任何HTML标记。这些元素构成了页面的内容和表单，并根据元素之间的平均概率进行选择。当自动拾取元素时，应用垂直和水平对称规则来保持设计美学。最后，HTML包含生成的屏幕截图的标记文件和图像。图7显示了网页结构和内容的颜色、大小和分布变化的示例。因此，用户可以生成多达7800个不同且独特的界面，这些界面是五种布局/样式，三种调色板选项（cmocean，cartocolors，colorbrewer）的组合，其中每个选项都有完整的调色板列表（总共52个调色板，请参阅存储库中的StyleManager）[17]，以及每个GUI部分的30个不同数量的元素每个要素的总数例如，页脚可以有标题和链接，而正文可以有滑块、菜单、子菜单、导航栏和文本。4. 影响首先，我们要强调Web Generator的重要性。研究人员可以使用此工具生成Web界面的合成定制数据（图像和代码），最大限度地减少验证自动UI生成器的工作量[18]。因此，它促进了机器学习方法的探索，以基于模型生成新的设计和代码。事实上，我们可以强调类似的努力，例如Pix 2Code [7]，它从图形用户界面截图生成代码，而Sketched-Webpages-Generator [10]与之前的方法相反，生成草图而不是HTML代码。我们的方法解决了代码和UI屏幕截图的创建.因此，设计人员和开发人员可以专注于接口此外，该软件它对于需要大量数据的应用程序很有帮助，主要是与机器学习和深度学习训练相关的研究问题[14，15]。例如，作者在这里提供了三个潜在的应用：表2W3C对我们的方法生成的1000个HTML文件的验证结果。TypeError误差警告总Max23528Min134Avg3.073.076.14STD3.990.294.011. 训练生成对抗网络（GAN）通过Web生成器图像生成GUIWeb图像2. 快速RCNN检测网页图像中的组件3. Pix2Pix通过图像的边缘（canny mask）生成GUI Web图像这些方法的结果可以在本文的存储库中可视化另一方面，我们的WebGenerator的另一个实际使用场景是教育目的，学生可以获得生成某些Web元素的标记代码的示例。例如，学习策略可以在UI中呈现不同的设计和布局模式[19]，并且生成等效代码，因为学生可以使用我们的软件设置用于生成Web元素的各种参数。最后，本文还对基于模型的用户界面生成工具的研究做出了贡献。 它的主要目标是描述应用程序必须创建用于指导UI生成的形式化模型的内容（输入/输出数据，用户，任务）。它们通常用于开发阶段的完全UI生成或计算机辅助系统。因此，WebGenerator提供了自动解决网页设计过程的软件。然而，这种方法学有其局限性，例如在创建过程中的抽象性、可伸缩性和鲁棒性（如果没有经过彻底测试的话）。因此，我们使用Online-W3C-Validator库[21]对生成的HTML源代码进行了语法分析，该库对CSS结构进行了几次评估。首先，我们生成了1000个用户界面，并对它们进行了综合评价，得到平均值为6.144.01错误，其中3.073.99对应于一种语法错误，其余的是警告。表2显示了从该测试中获得的指标即使源代码是自动生成的，W3C服务在HTML文件中检测到一些错误。发出的消息对应于框架引导标签，例如aria_controls、aria_belledby、aria_size等。另外，未声明的字符编码也会被检测为错误。此外，为了将所获得的结果与已经工作的UI进行比较，我们使用 成 熟 和 熟 悉 的 网 站 进 行 了 类 似 的 测 试 ， 如 Google ，Instagram，Facebook，Twitter，Whatsaap Web，YouTube，前端库Bootstrap，Metro，Foundation，Semantic UI的官方页面。表3列出了这些网站实现的指标。我们发现，我们的方法生成的HTML文件比编写的文件错误更少被人类毫无疑问，我们的文件没有考虑用户输入/输出，用户访问，以及这些网站中的一些可 能 具 有 的 复 杂 交 互 。 但 是 ， 对 于 基 本 布 局 和 网 站 模 板（Bootstrap，SemanticUI或Foundation），比较可能更客观。生成的所有文件和分析代码都可以在https上获得：//shorturl.at/mstO3网站。5. 结论我们介绍了WebGenerator，这是一个允许研究人员快速生成合成Web界面和内容的工具，以整合可用于训练/测试不同算法的数据集Andrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009857见图6。 可能的布局类型。图片中的每个数字都对应于一个特定的风格及其要渲染的相应元素表3见图7。 网页生成器生成的屏幕截图示例。竞合利益典型网站的W3C验证结果网站误差警告总Bootstrap.html551166Facebook.html8496324783109746Foundation.html58842630Google.html61021146216Instagram.html269318674560Metro.html52398666105SemanticUI.html358170528Twitter.html153562370439060WhatsApp.html3442443486YouTube.html31468826037340725并在Web开发过程中支持设计师和开发人员。该软件结构允许Web开发活动的可扩展性和自定义性。该软件带有不同的生成选项，如布局和部分的概率因此，我们可以生成适合研究需求的数据集。考虑到这个工具的潜在用途，我们计划未来的迭代来开发新功能，以使软件更加强大。作者声明，他们没有已知的竞争性财务利益或个人关系，可能会影响本文报告的工作确认这项工作得到了哥伦比亚智能数据分析系统组-SDAS研究组（ http： //sdas-group. com ） 上下载 。此 外， 我们还要 感谢Cesmag大学的项目引用[1]Bourque P，Fairley RE. SWEBOK：软件工程知识体系指南。IEEE计算机学会;2014，OCLC：880350861。[2]Galitz WO.用户界面设计基本指南：GUI设计原理和技术介绍。John WileySons; 2007.[3]放大图片作者：J. A，J. A.企业应用程序的快速UI开发：结合手动和模型驱动技术 。 在 ： Hutchison D ， Kanade T ， Kittler J ， Klein-berg JM ， Mattern F，Mitchell JC，NaorM，Nierstrasz O，Pandu Rangan C，Steffen B，SudanM，Terzopoulos D，Andrés Soto，Héctor Mora and Jaime A.里亚斯科软件X 17（2022）1009858Tygar D，Vardi MY，Weikum G，Petriu DC，Rou-quette N，Haugen，editors. 模型驱动工程语言与系统Vol. 6394，Berlin，Heidelberg：SpringerBerlinHeidelberg; 2010，p. 271比85[4] Nguyen TA，Csallner C.使用REMAUI（T）对移动应用程序用户界面进行逆向工程。2015年第30届IEEE/ACM自动化软件工程国际会议（ASE），（美国内布拉斯加州林肯）。IEEE; 2015，p. 248比59[5] 韩毅，何杰，董强. CSSSketch2code：一个自动生成具有CSS样式的网页的方法。在：第二届人工智能进展国际会议论文集- ICAAI 2018，（西班牙巴塞罗那）。ACM Press; 2018，p. 29比35[6] 佩 雷 拉 PFF 。 将 代 码 HTML 添 加 到 maquetes 中 。 （ 硕 士https://recipp.ipp.pt/handle/[7] 贝尔特拉米利湖Pix2code：从图形用户界面屏幕截图生成代码。2017年，arXiv：1705.07962[cs]。[8] [10]杨伟，王伟，王伟，王伟.基于机器学习的移动应用图形用户界面原型设计。2018年，arXiv：1802.02312[cs]。[9] [10]张文，张文，张文. Rico：用于构建数据驱动设计应用程序的移动应用程序数据集。在：第30届年度ACM用户界面软件和技术研讨会论文集; 2017年，p.845-54[10] Sketched-Webpages-Generator.2020年，https://github.com/Dev-Tarek/sketched-webpages-generator。[2020年9月17日]。[11] 主导Python库。2020年，https://pypi.org/project/dominate/。[Ac-2020年9月17日[12]Selenium 驱 动 程 序 。 2021 年 ， https://www.selenium.dev/ 。 [2021 年 4 月 15日]。[13] Bootstrap框架。2020年，https://getbootstrap.com/。[2020年9月[14] 使用机器学习技术从模型图像自动生成HTML代码。在：2019年电气电子生物医学工程和计算机科学（EBBT）科学会议。 2019年，第1-4页。http://dx.doi.org/10.1109/EBBT.2019.8741736网站。[15]陈春阳，苏婷，孟国柱，邢振昌，刘洋。从UI设计图像到GUI骨架：引导移动GUI实现的神经机器翻译器。第40届国际软件工程会议（ICSE '18）。NewYork，NY，USA：Association for Computing Machinery; 2018，p. 665-76.http://dx.doi.org/10.1145/3180155.3180240.[16] jQuery。2020年，https://jquery.com/。[2020年9月17日[17] WebGeneratorGithub仓库。2021年，https://github.com/agsoto/webgenerator。[2021年10月21日[18] 马茨克·米罗斯拉夫自动用户界面生成。（博士）论文），捷克技术大学;2016年，http://dx.doi.org/10.13140/RG.2.2.23963.26401。[19] 巴斯克斯-拉米雷斯·拉奎尔，马林-维加·温贝托，阿洛-埃尔南德斯·吉纳。面向教育应用的移动平台UI模式概述。Res Comput Sci 2013;65：95-102.http://dx.doi.org/10.13053/rcs-65-1-8网站。[20] Nichols Jeffrey，Faulring A.自动界面生成和未来的用户界面工具。2005年，http://www.cs.cmu.edu/jeffreyn/papers/nichols-faulring-uitools.pdf。[21]标 记 验 证 器 Web 服 务 API 。 2021 年 ， https://validator.w3.org/docs/api 。HTML. [2021年5月10日]。