为何移除Thymeleaf相关配置后外部CSS样式表失效？

我想了解为何必须在HTML标签及头部外部CSS样式表的link标签中配置Thymeleaf相关内容，移除其中任意一项，样式表就会与HTML文档断开关联，请问这些Thymeleaf配置的必要性是什么？

<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{style.css}" href="../css/style.css">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<!-- Nice -->
<div id="header" class="header"></div>
<div class="container" >
    <div class="row">
        <div class="col">
            <a href="filmInfo.html"><img class="img-fluid" src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/movie-posters/HO00002857_104360.jpg?itok=pRMFGS5R" alt="..."></a></div>
        <div class="col">
            <a href="filmInfo2.html"><img class="img-fluid" src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/media-images/2022-09/Amsterdam_Payoff_Poster_68%2C5x101%2C5_DK_72dpi_0.jpg?itok=yX9_nT_-", alt="..."></a>
            Titel her</div>
        <div class="col">
            <a href="filmInfo3.html"><img class="img-fluid" src="https://www.nfbio.dk/sites/nfbio.dk/files/styles/movie_poster/public/movie-posters/HO00002845_104348.jpg?itok=jNJskf23" alt="..."></a>
            Titel her</div>
    </div>
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her </div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
    </div>
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her </div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
        <div class="col">
            <img class="img-fluid" src="https://videnskab.dk/files/article_media/gnaver.png" alt="...">
            Titel her</div>
    </div>
</div>

<script>
    $(function(){
        $('#header').load('reuse-header.html');
    });
</script>
</body>
</html>

这两项配置各司其职，缺一不可，核心是让Thymeleaf能正确解析并生成符合服务器环境的资源路径：

1. <html xmlns:th="https://www.thymeleaf.org">的必要性 #

这是Thymeleaf的命名空间声明，作用是明确告诉模板引擎：这个HTML里所有带th:前缀的属性都是它需要处理的专属指令，不是普通HTML属性。

• 如果删掉这行，Thymeleaf会直接忽略th:href这类属性，浏览器只能读取原生的href="../css/style.css"。但这个路径是本地静态预览的相对路径，一旦部署到服务器，项目的上下文路径、目录结构大概率和本地不一致，必然找不到CSS文件。
• 没有这个命名空间，Thymeleaf的@{...}URL表达式也无法被识别，等于失去了动态生成适配服务器路径的能力。

2. th:href="@{style.css}"的必要性 #

th:href是Thymeleaf的URL属性处理器，配合@{...}表达式实现资源路径的动态适配：

• @{style.css}会自动获取服务器的上下文路径，拼接出正确的资源URL（比如服务器上下文是/movie-app，就会生成/movie-app/style.css），不管部署环境怎么变化，都能精准定位到CSS文件。
• 原生的href只是给本地静态预览用的（比如直接打开HTML文件时加载本地CSS），当Thymeleaf渲染页面时，会用th:href的值覆盖原生href，确保服务器端的路径正确。如果删掉th:href，就只能依赖原生路径，一旦部署环境和本地结构不同，肯定会出现CSS加载失败的情况。

内容的提问来源于stack exchange，提问作者Yaim