您的位置：首页 > Web前端 > HTML

html的继承　extends "_base.html"

2015-12-07 17:21 603 查看

项目中的规范化

()_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，导航栏及整体风格与主页保持一致，主内容区可自由编辑

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 继承

相关文章推荐

新的分享

章节导航

html的继承 extends "_base.html"

html的继承　extends "_base.html"