basic.html
<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>默认的title</title>
<link rel="stylesheet" th:href="@{app.css}">
<style>
.active{
color: aliceblue;
}
</style>
</head>
<div>
<h2 th:text="${user.getUsername()}"></h2>
<!--thymeleaf的几种标签-->
<!--th:if-->
<p th:if="${user.isVip}">会员</p>
<!--th:each-->
<ul>
<li th:each="tag:${user.tags}" th:text="${tag}"></li>
</ul>
<!--th:switch-->
<div th:switch="${user.sex}">
<p th:case="1">男</p>
<p th:case="2">女</p>
</div>
<!--引入css中的,需要加入上面的head-->
<div class="app"></div>
</div>
<script th:inline="javascript">
const user=/*[[${user}]]*/{};
console.log(user);
</script>
<!--replace com1 碎片-->
<div th:replace="~{component::com1}"></div>
<!--insert con1 碎片-->
<div th:insert="~{component::com1}"></div>
<!--id com-->
<div th:insert="~{component::#com2}"></div>
</html>
component.html
<!doctype html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<div th:fragment="com1">
com1
</div>
<div id="com2">
com2
</div>
</html>
