模板继承：
需要模版继承的情况：
1。 多个模板具有完全相同的顶部和底部
2。 多个模板具有相同的模板内容，但是内容中部分不一样
3。 多个模板具有完全相同的模板内容
标签：
{% block 名字 %}
{% endblock %}
1.定义父模板
2.子模板继承父模板
步骤：
父模板：
1。 定义一个base.html的模板
2。 分析模板中哪些是变化的比如：{% block title %}父模板的title{% endblock %}
对变化的部分用block进行"预留位置"也称作：挖坑
3。注意：样式和脚本 需要提前预留
{% block mycss %}{% endblock %}
{% block myjs %}{% endblock %}
子使用父模板：
1。 {% extends ‘父模板的名称‘ %}将父模板继承过来
2。 找到对应的block（坑）填充，每一个block都是有名字的。
1 base.html 父模板 2 3 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title> 9 {% block title %}父模板的title{% endblock %} 10 </title> 11 <style> 12 #head { 13 height: 50px; 14 background-color: bisque; 15 } 16 17 #head ul { 18 list-style: none; 19 height: 50px; 20 } 21 22 #head ul li { 23 float: left; 24 width: 100px; 25 text-align: center; 26 font-size: 18px; 27 height: 50px; 28 line-height: 50px; 29 } 30 31 #middle { 32 height: 900px; 33 background-color: azure; 34 } 35 36 #foot { 37 height: 50px; 38 line-height: 50px; 39 background-color: darkseagreen; 40 } 41 </style> 42 {% block mycss %}{% endblock %} 43 </head> 44 <body> 45 <div id="head"> 46 <ul> 47 <li>首页</li> 48 <li>秒杀</li> 49 <li>超市</li> 50 <li>图书</li> 51 <li>会员</li> 52 </ul> 53 </div> 54 <div id="middle"> 55 {% block middle %} 56 <button id="btn">我是中间部分</button> 57 {% endblock %} 58 </div> 59 60 <div id="foot"> 61 我是底部 62 </div> 63 {% block myjs %} 64 65 {% endblock %} 66 </body> 67 </html>
index.html 子模板 {% extends ‘base.html‘ %} {% block title %} 首页 {% endblock %} {% block mycss %} <style> #middle{ background-color: deeppink; color: white; font-weight: bold; } .div1{ width: 33%; height: 500px; float: left; border: 1px solid red; } </style> {# /static/<filename> #} <link rel="stylesheet" href="{{ url_for(‘static‘,filename=‘css/style.css‘) }}"> <!--引入静态文件--> {% endblock %} {% block myjs %} <script> btn = document.getElementById(‘btn‘) btn.onclick=function(){ alert(‘别点我啊！‘) } </script> {% endblock %} {% block middle %} <div class="div1" id="d1"> </div> <div class="div1"> </div> <div class="div1"> </div> <img src="{{ url_for(‘static‘,filename=‘images/a1.png‘) }}" alt=""> {% endblock %}
include包含
在A，B，C页面都共同的部分，但是其他页面没有这部分。
这个时候考虑使用include
步骤：
1。先定义一个公共的模板部分,xxx.html
2。谁使用则include过来， {% include ‘文件夹/xxx.html‘ %}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>欢迎页面</title> 6 </head> 7 <body> 8 {% include ‘common/header.html‘ %} 9 <div style="background-color: darkseagreen; height: 100px;"></div> 10 </body> 11 </html>
原文：https://www.cnblogs.com/lccode/p/14275878.html