使用 Spring Tool Suite 版本的 Thymeleaf 模板中没有结束标记：3.8.4.RELEASE答案

【问题标题】：No end tag in Thymeleaf template using Spring Tool Suite Version: 3.8.4.RELEASE使用 Spring Tool Suite 版本的 Thymeleaf 模板中没有结束标记：3.8.4.RELEASE
【发布时间】：2017-09-20 05:05:28
【问题描述】：

我使用 Spring Initializr，使用嵌入式 Tomcat + Thymeleaf 模板引擎生成了一个 Spring Boot Web 应用程序。我有这个 Thymeleaf 模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<body>

    <div th:fragment="common-navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a th:text="#{navbar.home.text}" href="/"></a></li>
                    <li><a th:text="#{navbar.about.text}" href="/about"></a></li>
                    <li><a th:text="#{navbar.contact.text}" href="/contact"></a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li th:if="${#authorization.expression('!isAuthenticated()')}">
                        <a th:href="@{/login}" th:text="#{navbar.login.text}" />
                    </li>
                    <li th:if="${#authorization.expression('isAuthenticated()')}">
                        <form id="f" th:action="@{/logout}" method="post" role="form" class="navbar-form">
                            <button type="submit" th:text="#{navbar.logout.text}" class="btn btn-primary" />
                        </form>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>

</body>
</html>

但我有 2 个警告 No end tag (</a>)。 &No end tag (</button>).

【问题讨论】：

此警告可能会警告您某些浏览器不理解折叠标签，例如</a> 和<button/>；写<a></a> 和<button></button> 更安全。此外，空的a 或button 也不是常见的做法。只有在应用了一些特殊样式（如更改display 和设置背景图像）时，它们才会可见。您是否对您使用的生成器生成了这些折叠标签表单这一事实感到困惑？

标签： spring html spring-mvc spring-boot thymeleaf

【解决方案1】：

如果你使用spring-boot-starter-thymeleaf依赖，你应该添加

<properties>
    <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>
</properties>

致您的pom.xml。

这会强制 maven 使用 Thymeleaf 3。默认的 Thymeleaf 2 不支持纯 HTML5。

【讨论】：

【解决方案2】：

Thymeleaf 防止呈现无效的 HTML。根据 HTML5 标准，使用带有自封闭的 a 和 button 标记所做的事情是无效的。

您可以在 W3 验证器页面上检查 HTML 代码的验证：https://validator.w3.org

尝试使用自封闭a 和button 标记的HTML 代码并查看结果。

不过，Thymeleaf 对 HTML 代码的验证并没有那么困难。您会看到 W3 说 button 元素上缺少 title 属性是一个错误。但是百里香并没有给出错误。

尽管如此；对于 Thymeleaf，您的 HTML 代码在需要时不应缺少封闭标记，这一点很重要。

【讨论】：