有时我们在浏览一个网站时，会发现有些页面的元素是每个页面共有的，比如网页导航、底部注释等。如果每个页面都去重复的写 效率就太低下了，这是就需要继承一个基础的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 %}
举例：这个是基础html,可以看到里面空白的block
<!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>
下边这个是继承了基础html的index.html。继承时，要先表明继承的html，{% extends 'base.html' %}，然后在base.html中留白的位置可以新增内容。具体如下
{% extends 'base.html' %} #引入继承的文件 {% block content %} #这里是就是加在base文件中 block content 中的部分。 <article> <aside> <div class="l_box" id="stickMe"> <div class="about_me"> <h2>关于我</h2> <ul> <i><img src="/static/images/4.jpg"></i> <p><b>杨青</b>，一个80后草根女站长！09年入行。一直潜心研究web前端技术，一边工作一边积累经验，分享一些个人博客模板，以及SEO优化等心得。</p> </ul> </div> <div class="wdxc"> <h2>我的相册</h2> <ul> <li><a href="/"><img src="/static/images/7.jpg"></a></li> <li><a href="/"><img src="/static/images/8.jpg"></a></li> <li><a href="/"><img src="/static/images/9.jpg"></a></li> <li><a href="/"><img src="/static/images/10.jpg"></a></li> <li><a href="/"><img src="/static/images/11.jpg"></a></li> <li><a href="/"><img src="/static/images/12.jpg"></a></li> </ul> </div> <div class="search"> <form action="/e/search/index.php" method="post" name="searchform" id="searchform"> <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text"> <input name="show" value="title" type="hidden"> <input name="tempid" value="1" type="hidden"> <input name="tbname" value="news" type="hidden"> <input name="Submit" class="input_submit" value="搜索" type="submit"> </form> </div> <div class="fenlei"> <h2>文章分类</h2> <ul> <li><a href="/">学无止境（33）</a></li> <li><a href="/">日记（19）</a></li> <li><a href="/">慢生活（520）</a></li> <li><a href="/">美文欣赏（40）</a></li> </ul> </div> <div class="tuijian"> <h2>站长推荐</h2> <ul> <li><a href="/">你是什么人便会遇上什么人</a></li> <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> <li><a href="/">个人博客模板《绅士》后台管理</a></li> <li><a href="/">你是什么人便会遇上什么人</a></li> <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li> <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li> <li><a href="/">个人博客模板《绅士》后台管理</a></li> </ul> </div> <div class="links"> <h2>友情链接</h2> <ul> <a href="http://www.yangqq.com">杨青个人博客</a> <a href="http://www.yangqq.com">杨青博客</a> </ul> </div> <div class="guanzhu"> <h2>关注我 么么哒</h2> <ul> <img src="/static/images/wx.jpg"> </ul> </div> </div> </aside> <div class="r_box"> {% for article in articles %} <li> <i><a href="/"><img src="/static/{{ article.img }}"></a></i> <h3><a href="/">{{ article.title }}</a></h3> <p>{{ article.content }}</p> </li> {% endfor %} </div> </article> {% endblock %} #结束后 要endblock,表明填充的内容到这里结束
这样就在base.html的基础上产生了一个新的页面