在Thymeleaf模板引擎中，src标签是一个非常基础但功能强大的标签，主要用于引入外部资源，如CSS样式表、JavaScript脚本文件等。正确使用src标签可以有效地优化页面性能，提高用户体验。本文将详细介绍Thymeleaf中src标签的用法。
1. 基本用法
在Thymeleaf中，src标签通常与<link>和<script>标签结合使用，以引入外部资源。以下是一个简单的例子：
<!-- 引入CSS样式表 -->
<link rel="stylesheet" href="path/to/your/style.css" th:href="@{/css/style.css}">
<!-- 引入JavaScript脚本文件 -->
<script src="path/to/your/script.js" th:src="@{/js/script.js}"></script>
在这个例子中，th:href和th:src是Thymeleaf的属性表达式，用于动态生成资源路径。这样做的好处是，你可以根据不同的环境（如开发、测试、生产）配置不同的资源路径。
2. 属性详解
src标签具有以下常用属性：
- href：指定CSS样式表或图片等资源的路径。
- src：指定JavaScript脚本文件的路径。
- rel：定义当前文档与被链接文档之间的关系。例如，
rel="stylesheet"表示被链接的文档是一个CSS样式表。 - type：指定资源的MIME类型。例如，
type="text/css"表示被链接的文档是一个CSS样式表。
3. 动态路径
Thymeleaf的属性表达式可以让你根据不同的环境动态生成资源路径。以下是一些常用的属性表达式：
@{/}：表示当前应用的上下文路径。@{/path/to/resource}：表示当前应用的上下文路径加上指定路径的资源。@{/path/to/resource?query}：表示当前应用的上下文路径加上指定路径的资源，并附带查询参数。
4. 例子
以下是一些使用src标签的例子：
<!-- 引入当前应用的CSS样式表 -->
<link rel="stylesheet" href="path/to/your/style.css" th:href="@{/css/style.css}">
<!-- 引入当前应用的JavaScript脚本文件 -->
<script src="path/to/your/script.js" th:src="@{/js/script.js}"></script>
<!-- 引入其他应用的CSS样式表 -->
<link rel="stylesheet" href="https://example.com/path/to/external/style.css" th:href="@{/external/css/style.css}">
<!-- 引入其他应用的JavaScript脚本文件 -->
<script src="https://example.com/path/to/external/script.js" th:src="@{/external/js/script.js}"></script>
5. 总结
Thymeleaf中的src标签是一个非常实用的标签，可以帮助你轻松实现页面资源的加载。通过合理使用属性表达式和动态路径，你可以根据不同的环境配置不同的资源路径，从而提高页面性能和用户体验。希望本文能帮助你更好地理解Thymeleaf中src标签的用法。