在html页面中使用模板继承,HTML5下的模板继承
标签：
应用背景：
在web项目中，我们的网站主页面除了正文是由导航条，底栏。也就是nav.html，bottom.html，在构建页面的时候，应当使用HTML的模板继承，避免代码重复和以便于代码的维护。可以写一个indexBase.html来包含(include)这些通用文件，如下：
涉及文件举例：
home.html 主页
indexBase.html 继承用的页面
indexNav.html 页首组件
indexBottom.html 页脚组件
相关样式文件：
home.css 页面自定义样式 indexBase.css 需要继承页面的相关样式
1
2
3
4
5
6
7
8 {% block head %}
9 {% endblock %}
10
11
{% block title %}默认标题{% endblock %}
12
13 {% block style %}
14 {% endblock %}
15
16
17
18
19
20
21
22
23 {% include 'indexNav.html' %}
24 {% block content %}
25
26 这里是默认内容,所有继承自这个模板的,如果不覆盖就显示这里的默认内容。
27
28 {% endblock %}
29 {% include 'indexBottom.html' %}
30
31
32
indexBase.html内容
那么，继承该模板的页面格式如下：
1 {% extends 'indexBase.html' %}
2 {% block head %}
3
4 {% endblock %}
5
6 {% block title %}title自定义{% endblock %}
7
8 {% block style %}
9
10
11
12 {% endblock %}
13
14
15 {% block content %}
16
17 {% endblock %}
home.html继承页面的格式
其中，在indexNav.html 页首组件 和 indexBottom.html 页脚组件内直接写div，两者相关样式文件写在 indexBase.css 内。
标签：
来源： https://www.cnblogs.com/lixiufeng1994/p/10155145.html
在html页面中使用模板继承,HTML5下的模板继承相关推荐
- 继承（下）----虚继承
单继承&多继承 一个子类只有一个直接父类时称这种继承关系为单继承. 一个子类有两个或者两个以上的父类时称这种继承关系为多继承. 菱形继承 ---------特殊的多继承 有很大的缺点: 二义性 ...
- 在html页面中加入矢量图,HTML5画布矢量图形？
有一些选择. 我没有使用过任何一个库,但是据我所知,Cake看起来通常更令人印象深刻,并且可以导入,但也大了三倍. 还有Burst Engine,目前是processing.js的扩展,甚至更小. 我 ...
- ftl页面中html飘红,eclipse下不能编译.ftl文件，会报错的解决方法
摘要:1.先安装一个插件右击ftl文件,选择open with 但是没有freeMarker这个选项,如果有直接打开,如果没有则需要下载相关插件. 要安装一个freemarker的插件,才可以编辑FT ...
- jsp页面中嵌入java代码
1.jsp页面中嵌入java代码 jsp的脚本元素 jsp的指令元素 jsp的动作元素 1.1 jsp的脚本元素(直接嵌入java代码) 第一种:表达式(expression)形式:<%= %& ...
- 16个HTML5 框架、模板以及生成工具
(本文详情来源:http://blog.csdn.net/gf771115/article/details/8652672) 网页设计通常需要预先考虑很多因素,而用户给你的时间又特别稀缺,如何提高效率 ...
- 在html页面中使用模板继承,HTML静态模板的继承
网站模板的设计,一般的,我们做网站有一些通用的部分,比如 导航,底部,访问统计代码等.合理的规划模板往往会减少工作量,同时也使得罗乱.难以阅读的静态页面布局变得优雅. 假设,我们的网站主页面除了正文是 ...
- html5设置页面标题,单选(4分) 下面选项中，可以将HTML5页面的标题设置为“我的第一个网页”的是（）。...
问题:单选(4分) 下面选项中,可以将HTML5页面的标题设置为"我的第一个网页"的是(). 更多相关问题 根据世界银行咨询服务合同标准文本,()的采购有两种计价方式:复杂的采用基 ...
- 75款精心收集【网站正在建设中\网站上线倒计时】HTML5多风格模板
在现在互联网家的时代里,网站建设已经是企业重要配件.在不断的发展进化中,网站的类型也在不断地规范,细化.当然我们在网站建设开通前,我们先分享一些关于国外漂亮网站建设中模板,多套风格主题HTML5响应式 ...
- html5 js选择器,使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 2 3 4 5 使用HTML5的JS选择器操作页面中的元素 6 7 8 9 10 兴趣爱好: 11 12 ...
最新文章
- 终于把XGBoost总结写出来了！
- 思科发布安全大数据分析架构 OpenSOC
- 谷歌发布企业版TensorFlow，或提供收费服务？
- 004-SLF4J的简单使用
- python网络编程—UDP协议
- Shell之/bin/bash脚本的基础实战
- git 命令操作总结
- 基于Ubuntu使用docker的方式来搭建基于Yolo3+crnn的Chineseocr识别
- Python的基础--对象 转
- 一次List对象去重失败，引发对Java8中distinct()的思考
- python培训价目表-参加python培训要多少钱？
- 2016计算机二级考试c语言真题及答案,计算机二级考试c语言真题_2017计算机二级考试C语言复习题及答案...
- itextpdf解决PDF合并的问题
- Firefox检测到潜在的安全威胁，并因blog.csdn.net要求安全连接而没有继续
- 花生壳域名穿透 网站无法访问
- C# Reflection 反射
- 计算机启动死机,电脑开机突然死机怎么回事?小编教你解决开机死机问题
- MongoDB学习（二）MongoDB 认证详解
- 编程计算图形的面积（圆形，正方形，长方形）
- 请教一下如何使用mdx文件