Question

在我的项目中，我们遵循的是微前端架构，该架构通过合并多个Web组件来构建HTML页面。结果将多个HTML文件组合成一个HTML文件。这样，我们就有可能出现语法无效的损坏的HTML代码。

要在运行时合并多个动态生成的HTML页面，我们使用了nginx反向代理。

我想要一个可以帮助识别此类情况并提供适当的缓解情况的工具。

让我知道是否有任何漂亮的工具或其他东西

例如：这是我的主页：

<!DOCTYPE html>
<div th:fragment="add-app(page_title, content_as_html, alert_html, menuitemid)">
  <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>my title</title>
      <link rel="shortcut icon" th:href="@{/favicon.ico}" />
      <!--#include virtual="/commons/inc/resources" --> <!-- It s separate component named as resource.html which is included here via nginx dynamically-->
    </head>

    <body>
      <div class="overlay"></div>

      <th:block th:replace="${alert_html}" />
      <div class="my-custom-class position-relative">

          <a
            class="account-page-button d-flex align-items-center"
            th:href="@{/}"
            th:classappend="${menuitemid == 'App'? 'account-page-button--current' : '' }"
          >
            Apps
          </a>
      </div>

      

<!--# include virtual="/commons/inc/footer" -->

 <!-- It s separate component named as footer.html which is included here via nginx dynamically-->
    </body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script th:src="@{/apps/js/my-account.js}"></script>
  </html>
</div>

Resource.html页面：

<link rel="icon" type="image/ico" href="/icons/favicon.ico" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
<link href="https://fonts.googleapis.com/css?family=Muli:400,700,900&display=swap" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="@{/lib/bootstrap/js/bootstrap.min.js}"></script>

footer.html页面：

<footer class="main-footer">
    <link rel="stylesheet" th:href="@{/css/footer.css}" />
    <div class="main-footer__row">
        <div class="main-footer__link-container">
            <a class="main-footer__link" href="#"> &copy; 2020 myproject&reg; </a>
        </div>

        <div class="main-footer__link-container">
            <a class="main-footer__link" th:href="@{/terms/website}"> Website Terms of Use </a>
        </div>
        <div class="main-footer__link-container">
            <a class="main-footer__link" th:href="@{/legal/privacy}"> Privacy Policy </a>
        </div>

        <div class="main-footer__link-container">
            <a class="main-footer__link" href="#"> All prices exclude VAT </a>
        </div>
    </div>
</footer>

请记下和标签。其中包括resources.html和footer.html页面，这些标签将由nginx解析，并且nginx将分别用resources.html和footer.html的内容替换这些标签。

我想要一个可以验证最终结果的工具，即nginx解决所有标签后生成的html页面。

Answer 1

适用于Chrome和Firefox的

users.skynet.be/mgueury/mozilla/扩展程序可以很好地报告标记中的句法和语义问题。也可以要求HTML验证程序以HTML提议页面的更正版本或将其转换为XHTML。

除了上面带有插件https://www.sonarsource.com/html/的声纳以外，还可以在构建过程中用于进行html验证。

验证渲染页面前端结构的工具

1 个答案: