1、与web时所学的不同。这里是把所有页面相同部分抽取出来放到一个公共页面common.html中。
    image.png
    2、把标签属性中有路径的，改为：th:标签的属性名="@{/原来的属性路径值}"。/代表当前项目。作用：为了修改了访问路径，不用一个个页面修改路径。一般用于抽取出来的公共部分。如下：

    1.     <link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">
    3.     <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}" ></script>

    3、把抽取出的公共代码，定义为公共代码段。
    通过 th:fragment 作为标签的属性 commonheader 作为属性的值。其中commonheader 在common.xml中具有唯一性。
    这里我把 head 叫做共标签。

    <head th:fragment="commonheader" >
    <!--common-->
    <link href="css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">

    <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}" ></script>
    <script src="js/respond.min.js" th:src="@{/js/respond.min.js}" ></script>
</head>

    4、通过 id 属性定义公共代码段。

        <div id="commonscript">
        <script src="js/jquery-1.10.2.min.js" th:src="@{/js/jquery-1.10.2.min.js}"></script>
        <script src="js/jquery-ui-1.9.2.custom.min.js" th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
        <script src="js/jquery-migrate-1.2.1.min.js" th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
        <script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
        <script src="js/modernizr.min.js" th:src="@{/js/modernizr.min.js}"></script>
        <script src="js/jquery.nicescroll.js" th:src="@{/js/jquery.nicescroll.js}"></script>
    </div>