應用背景：
在web項目中，我們的網站主頁面除了正文是由導航條，底欄。也就是nav.html，bottom.html，在構建頁面的時候，應當使用HTML的模板繼承，避免代碼重復和以便於代碼的維護。可以寫一個indexBase.html來包含（include）這些通用文件，如下：
涉及文件舉例：
home.html 主頁
indexBase.html 繼承用的頁面
indexNav.html 頁首組件
indexBottom.html 頁腳組件
相關樣式文件：
home.css 頁面自定義樣式 indexBase.css 需要繼承頁面的相關樣式
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
6 <link rel="stylesheet" href="/static/MyStyle/indexBase.css">
7
8 {% block head %} 9 {% endblock %} 10
11 <title>{% block title %}默認標題{% endblock %}</title>
12
13 {% block style %} 14 {% endblock %} 15
16
17 </head>
18 <body>
19
20 <script src="/static/plugins/jquery-3.3.1.js"></script>
21 <script src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
22
23 {% include 'indexNav.html' %} 24 {% block content %} 25 <div>
26 這里是默認內容,所有繼承自這個模板的,如果不覆蓋就顯示這里的默認內容。 27 </div>
28 {% endblock %} 29 {% include 'indexBottom.html' %} 30
31 </body>
32 </html>
那么，繼承該模板的頁面格式如下：
1 {% extends 'indexBase.html' %} 2 {% block head %} 3 <link rel="stylesheet" href="/static/MyStyle/自定義.css">
4 {% endblock %} 5
6 {% block title %}title自定義{% endblock %} 7
8 {% block style %} 9 <style>
10
11 </style>
12 {% endblock %} 13
14
15 {% block content %} 16
17 {% endblock %}
其中，在indexNav.html 頁首組件 和 indexBottom.html 頁腳組件內直接寫div，兩者相關樣式文件寫在 indexBase.css 內。