extends

extends指继承父模板的框架，将里面的部分内容换成子模版需要的东西即可。
语法：{% extends ‘public/base.html’ %}
extends后面可加相对路径，也可使用变量
如：
page1.html:

{
% extends 
'public/base.html' 
%
}
{
% block title 
%
}page1
{
% endblock 
%
}
{
% block content 
%
}
    
<div 
id
=
"test"
>
        
<a
>这里是page1的content
<
/a
>
        
<
input 
type
=
"button" value
=
"点我弹窗" @click
=
"click1"
/
>
        
<
input v
-model
=
"message"
/
>
        
<p
>
{
[message
]
}
<
/p
>
    
<
/div
>
{
% endblock 
%
}
{
% block script 
%
}
    
<script src
=
"/static/public/vue.js"
>
<
/script
>
    
<script src
=
"/static/main/page1.js"
>
<
/script
>
{
% endblock 
%
}

base.html:

<!DOCTYPE html
>
<html lang
=
"en"
>
<head
>
    
<meta charset
=
"UTF-8"
>
    
<title
>
{
% block title 
%
}base
{
% endblock 
%
}
    
<
/title
>
<
/head
>
<body
>
{
% block header 
%
}
    
<div 
id
=
"app1"
>
        
<a
>模板头部内容
<
/a
>
        
<
input 
type
=
"button" value
=
"点我弹窗" @click
=
"click1"
/
>
    
<
/div
>
{
% endblock 
%
}
{
% block content 
%
}
{
% endblock 
%
}
{
% block body 
%
}
    
<a
>模板主体内容
<
/a
>
{
% endblock 
%
}
{
% block footer 
%
}
    
<a
>模板底部内容
<
/a
>
{
% endblock 
%
}
{
% block script 
%
}
{
% endblock 
%
}
{
% block style 
%
}
{
% endblock 
%
}
<a
>这里的数据是固定不会被改变的
<
/a
>
<
/body
>
<
/html
>

浏览器中的page1.html：

<!DOCTYPE html
>
<html lang
=
"en"
>
<head
>
    
<meta charset
=
"UTF-8"
>
    
<title
>page1    
<
/title
>
<
/head
>
<body
>
    
<div 
id
=
"app1"
>
        
<a
>模板头部内容
<
/a
>
        
<
input 
type
=
"button" value
=
"点我弹窗" @click
=
"click1"
/
>
    
<
/div
>
    
<div 
id
=
"test"
>
        
<a
>这里是page1的content
<
/a
>
        
<
input 
type
=
"button" value
=
"点我弹窗" @click
=
"click1"
/
>
        
<
input v
-model
=
"message"
/
>
        
<p
>
{
[message
]
}
<
/p
>
    
<
/div
>
    
<a
>模板主体内容
<
/a
>
    
<a
>模板底部内容
<
/a
>
    
<a
>这里的数据是固定不会被改变的
<
/a
>
    
<script src
=
"/static/public/vue.js"
>
<
/script
>
    
<script src
=
"/static/main/page1.js"
>
<
/script
>
<
/body
>
<
/html
>

注意extends一定要写在最上方。
父模板base.html中定义的block块有几个子模版中就有几个，父模板中block名字自取，子模版可以重写父模板中的block，名字相同即可，但是子模版不能在block块之外写代码，父模板block之外的代码子模版只能得到不能修改。
子模版也可以在父模板的block中添加内容，如下：

{
% block footer 
%
}
    
{
{ block
.
super 
}
}
    这里是子模版添加的内容
{
% endblock 
%
}

使用{{block.super}}告诉浏览器这一块是增加的内容，不是替换。

include

在Django的模板系统中，可以使用include这一语法：{% include ‘public/base2.html’ %}
include是指将后面引入的html文件中的所有代码都放到被引入文件的对应位置
include后面可加相对路径，也可使用变量
如：
page2.html:

<!doctype html
>
<html lang
=
"en"
>
<head
>
    
<meta charset
=
"UTF-8"
>
    
<title
>page2
<
/title
>
<
/head
>
<body
>
{
% include 
'public/base2.html' 
%
}
<
/body
>
<
/html
>

public/base2.html：

<div 
id
=
"app1"
>
    
<a
>模板内容
<
/a
>
    
<
input 
type
=
"button" value
=
"点我弹窗" @click
=
"click1"
/
>
    
<a
>message
<
/a
>
<
/div
>

导入后浏览器中的page2.html：

<!doctype html
>
<html lang
=
"en"
>
<head
>
    
<meta charset
=
"UTF-8"
>
    
<title
>page2
<
/title
>
<
/head
>
<body
>
<div 
id
=
"app1"
>
    
<a
>模板内容
<
/a
>
    
<
input 
type
=
"button" value
=
"点我弹窗" @click
=
"click1"
/
>
    
<a
>message
<
/a
>
<
/div
>
<
/body
>
<
/html
>

可以看到base2.html被导入到了page2.html文件中，相当于代码复用。

总结

extends主要用于同一主题的网页，网页之间的框架大体相同，include主要用于多个html中有相同的代码。
二者是可以一起使用的，这么看extends和include用处刚好是相反的。