HTML文件的继承 - 码农教程

有时我们在浏览一个网站时，会发现有些页面的元素是每个页面共有的，比如网页导航、底部注释等。如果每个页面都去重复的写效率就太低下了，这是就需要继承一个基础的html,然后每个页面只需要在基础的页面上新加元素

例如，这是一个基础的html文件，base.html。他定义了这个网站多个页面的基础样式。我们只需要在这个基础文件中，预留出空间，让调用这个html的文件可以在这个基础上增加样式或者块。

预留CSS样式的格式：{%block css%} 和{%endblock%} 必须是成对出现的，这个中间就是我们空出来的位置，如果有新的css可以写在这里面。

{% block css %}
{#    为新页面预留CSS样式#}
{% endblock %}

预留JS样式格式：原理同上

{% block js %}
{% endblock  %}

for 循环逻辑：

        {% for nav in daohang %}
                {#循环#}
      <li><a href="/nav/{{ nav.id }}">{{ nav.name }}</a></li>
        {% endfor %}

举例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页_{{ title }} - 一个站在web前端设计之路的女技术员个人博客网站</title>
<meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,杨青" />
<meta name="description" content="{{ title }}，是一个站在web前端设计之路的女程序员个人网站，提供个人博客模板免费资源下载的个人原创网站。" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/base.css" rel="stylesheet">
<link href="/static/css/index.css" rel="stylesheet">
<link href="/static/css/m.css" rel="stylesheet">
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/hc-sticky.js"></script>
<script type="text/javascript" src="/static/js/comm.js"></script>
{% block css %}
{#    为新页面预留CSS样式#}
{% endblock %}

{% block js %}
{% endblock  %}

<!--[if lt IE 9]>
<script src="/static/js/modernizr.js"></script>
<![endif]-->
</head>

<body>
<header class="header-navigation" id="header">
  <nav><div class="logo"><a href="/">{{ title }}</a></div>
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <ul id="starlist">
        {% for nav in daohang %}
                {#循环#}
      <li><a href="/nav/{{ nav.id }}">{{ nav.name }}</a></li>
        {% endfor %}

    </ul>
</nav>
</header>

{% block content %}
#预留空间
{% endblock %}



<footer>
  <p>Design by <a href="http://www.besttest.cn" target="_blank">{{ title }}</a> <a href="/">蜀ICP备11002373号-1</a></p>
</footer>
<a href="#" class="cd-top">Top</a>
</body>
</html>

原文地址：https://www.cnblogs.com/hancece/p/11719264.html