html的继承　extends "_base.html"

来源：互联网发布：公司机房网络拓扑图编辑：程序博客网时间：2024/06/09 16:14

项目中的规范化
()_base.html

<span style="font-size:12px;"><!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>{% block title %}{% endblock %}</title>  {% block styles %}{% endblock %}  {% block pre-scripts %}{% endblock %}</head><body>  {% block header %}{% endblock %}  {% block main %}{% endblock %}  {% block footer %}{% endblock %}  {% block scripts %}{% endblock %}</body></html></span>

说明：整个项目中的结构框架说明，一般不作修改。
<pre-scripts>与<script>的区别：
<pre-scripts>在加载页面前加载脚本
　优点：放在head中，整洁
　缺点：占用时间，加载页面内容会过慢
<scripts>先加载页面内容再加载脚本

　缺点：放在<body>中结构不太清晰

现在<pre-script>有一个属性，可以在加载页面内容后再加载js,只有支持html5的才支持。
　
(2) index.html
继承自_base.html，作为首页

{% extends "_base.html" %}　{% load staticfiles i18n %}{% block title %}{% trans "title" %}{% endblock %}{% block styles %}    {% include "_styles.html" %}        <link href="{% static 'css/app.css' %}" rel="stylesheet">    {% endblock %}            {% block pre-scripts %}    {% include "_pre-scripts.html" %}{% endblock %}                         {% block scripts %}    {% include "_scripts.html" %}          <script>       new gnMenu( document.getElementById( 'gn-menu' ) );    </script>{% endblock %}                     {% block main %}                   <div class="container">            {% include "_nav.html" %}               <header>                　　　　{% block mymain %}            　　    <h1>hello,welcome</h1>　　 　　{% endblock %}        </header>    </div>{% endblock %}

(3)其它页面
继承自index.html，导航栏及整体风格与主页保持一致，主内容区可自由编辑

0 0

html的继承 extends "_base.html"

html的继承　extends "_base.html"