pycharm HTML编辑 母版页调用

母版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <script src="/static/jquery-3.3.1.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <link rel="stylesheet"  href="/static/css/base.css">
</head>
<body>
<div class="base-div">

    <ul class="list-inline">
        <li><a class="base-p">线性代数试卷生成系统</a></li>
        <li>
            <button type="button" class="btn btn-primary" id="button-student">学生登录</button>
        </li>
        <li>
            <button type="button" class="btn btn-primary" id="button-teacher">教师登陆</button>
        </li>
        <li>
            <button type="button" class="btn btn-primary" id="button-admin">管理员登录</button>
        </li>
        <li class="message">
            {{ student.name }}{{ message }}
        </li>
        <li>
            <button type="button" class="btn btn-danger" id="lagout" >退出</button>
        </li>

    </ul>

</div>
</body>
</html>

form表单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link href="/static/css/base.css" rel="stylesheet">
    <title>学生登录</title>
</head>
<body>
<div>

</div>
<div class="container" id="username" >
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="/studentlogin/" method="post" class="form-horizontal" role="form">
                {% csrf_token %}
            <div class="form-group">
            <label for="{{  form_object.username.id_for_label}}" class="col-sm-2 control-label">{{ form_object.username.label }}</label>
            <div class="col-sm-10">
                {{ form_object.username }}
                <span id="helpBlock2" class="help-block"></span>
            </div>
          </div>
            </form>
        </div>
    </div>

</div>


<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/js/bootstrap.js"></script>

</body>
</html>

想请教一下，pycharm怎样调用自己弄好的模板HTML到新的HTML页面，我设计了一个在顶部的导航栏HTML，我想在设计其它HTML页面的时候保留顶部的导航栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link href="/static/css/base.css" rel="stylesheet">
    <title>学生登录</title>
</head>
<body>
<div>
<!--引入使用-->
<iframe src="./母版.html" width="100%" height="50" frameborder="0"></iframe>
</div>
<div class="container" id="username" >
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="/studentlogin/" method="post" class="form-horizontal" role="form">
                {% csrf_token %}
            <div class="form-group">
            <label for="{{  form_object.username.id_for_label}}" class="col-sm-2 control-label">{{ form_object.username.label }}</label>
            <div class="col-sm-10">
                {{ form_object.username }}
                <span id="helpBlock2" class="help-block"></span>
            </div>
          </div>
            </form>
        </div>
    </div>
</div>
 
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/js/bootstrap.js"></script>
</body>
</html>

用jQuery的话可以用load

<div id="header"></div>

// js
$('#header').load('header.html') // 要填你的实际路径