今天给大家讲解的是include标签，在打代码的时候总会出现一些重复的样式，这个时候就可以用include标签来减少打代码的次数。

文件名index.html，代码：

{% from 'macros/forms.html' import input %}<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>宏</title>

    <style>

        *{            list-style: none;            text-decoration: none;        }

        .header{            height: 60px;            background: #3a3a3a;            color: #fff;            margin-bottom: 20px;        }

        .header .nav-group{            margin-left: 10px;        }

        .header .nav-group li{            float: left;            line-height: 60px;            margin: 0px 20px;        }

        .nav-group li a{            color: #fff;        }

        .footer{            height: 60px;            background: #3a3a3a;        }

        .footer p{            color: #fff;            margin-left: 30px;            padding-top: 20px;        }

    </style></head><body>

    <div class="header">

        <ul class="nav-group">

            <li><a href="#">新闻</a></li>

            <li><a href="#">音乐</a></li>

            <li><a href="#">贴吧</a></li>

            <li><a href="#">视频</a></li>

        </ul>

    </div>

    <table>

        <tbody>

            <tr>

                <td>账号</td>

                <td>{{ input(placeholder="请输入账号") }}</td>

            </tr>

            <tr>

                <td>密码</td>

                <td>{{ input(type="password", placeholder="请输入密码") }}</td>

            </tr>

            <tr>

                <td></td>

                <td>{{ input(type="submit", value="提交") }}</td>

            </tr>

        </tbody>

    </table>

    <div class="footer">

        <p>页面底部</p>

    </div></body></html>

现在考虑这样一个问题，如果页面头部和底部是很多页面要用的样式，那么如果在每一个新的文件中都要复制相同的代码肯定不是我们希望的，这时候就可以用到include标签了：

用法

{% include '引用文件路径' %}

用include前提是把相同的代码先提取出来，所以我们将对应的代码先提取成文件：

文件结构：

headers.html

<style>

    *{        list-style: none;        text-decoration: none;    }

    .header{        height: 60px;        background: #3a3a3a;        color: #fff;        margin-bottom: 20px;    }

    .header .nav-group{        margin-left: 10px;    }

    .header .nav-group li{        float: left;                line-height: 60px;                margin: 0px 20px;        }

    .nav-group li a{        color: #fff;        }</style><div class="header">

    <ul class="nav-group">

        <li><a href="#">新闻</a></li>

        <li><a href="#">音乐</a></li>

        <li><a href="#">贴吧</a></li>

        <li><a href="#">视频</a></li>

    </ul></div>

footers.html

<style>

    .footer{        height: 60px;        background: #3a3a3a;    }

    .footer p{        color: #fff;        margin-left: 30px;                padding-top: 20px;        }</style><div class="footer">

    <p>页面底部</p></div>

将公共部分提取出以后在调用的地方只需要用include标签调用即可：

index.html

{% from 'macros/forms.html' import input %}<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>宏</title></head><body>

    {% include 'index/headers.html' %}    <table>

        <tbody>

            <tr>

                <td>账号</td>

                <td>{{ input(placeholder="请输入账号") }}</td>

            </tr>

            <tr>

                <td>密码</td>

                <td>{{ input(type="password", placeholder="请输入密码") }}</td>

            </tr>

            <tr>

                <td></td>

                <td>{{ input(type="submit", value="提交") }}</td>

            </tr>

        </tbody>

    </table>

    {% include 'index/footers.html' %}</body></html>

如果还有一个详情页，那么只需要：

detail.html

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title>Detail</title></head><body>

    {% include 'index/headers.html' %}        <p>这是详情页</p>

    {% include 'index/footers.html' %}</body></html>

如果对软件测试、接口测试、自动化测试、面试经验交流。感兴趣可以加软件测试交流：1085991341，还会有同行一起技术交流。

显示

以上内容希望对你有帮助，有被帮助到的朋友欢迎点赞，评论。

include标签—引用文件路径的更多相关文章

  1. 039：模版结构优化之include标签详解

    引入模版: 有时候一些代码是在许多模版中都用到的.如果我们每次都重复的去拷贝代码那肯定不符合项目的规范.一般我们可以把这些重复性的代码抽取出来,就类似于Python中的函数一样,以后想要使用这些代码的 ...

  2. Flask第31课——include标签

    我们在上一节代码基础上增加一些代码,样式: 文件名index.html,代码: {% from 'macros/forms.html' import input %} <!DOCTYPE htm ...

  3. JSP中用include标签动态引入其它文件报错

    <jsp:include page="<%=path %>/include.jsp"></jsp:include> 报错:attribute f ...

  4. Django 模板中 include 标签使用小结

    include 标签允许在模板中包含其它的模板的内容. 标签的参数是所要包含的模板名称,可以是一个变量,也可以是用单/双引号硬编码的字符串. 每当在多个模板中出现相同的代码时,就应该考虑是否要使用 { ...

  5. Django模版语言的复用 1. include标签--模版导入 2.inclusion_tag自定义标签--模版导入 3.母版

    include标签--模版导入 ''' 前提:项目中,往往会出现多个页面拥有一个或几个相同的页面版块,或是一个页面多个页面版块是相同的 如何运用:可以将多个样式标签的集合进行封装,对外提供版块的名字( ...

  6. freemarker的include标签

    和jsp的include标签的作用类似,里面也是分相对路径和绝对路径. freemarker的根路径比较奇特的,结构图如下: ----webroot-------page------------ftl ...

  7. 【Flask模板】include标签

    # include标签:1. 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置.2. `include`标签,如果想要使用父模版中的变量,直接用就可以了,不需要使用`with context ...

  8. Android 多个include标签的监听事件处理

    include标签的作用是为了xml文件代码的模块化,详细不再多提.主要是说说include标签的监听. 网上也有很多例子,不过大多是只写了一个include标签的监听,如果需要实现多个include ...

  9. include指令和include标签的区别

    区别 类别 语法 发生作用时间 包含的内容 转化成Servlet 编译时间 运行时间 include指令 <%@ include file="" %> 页面交换 实际内 ...

随机推荐

  1. bzoj 2989: 数列

    LINK:数列 需要动一点脑子 考虑查询 暴力显然不行 考虑把绝对值拆开. 当x<=y ax<=ay时 有 y-x+ay-ax<=k x+ax>=y+ay-k 可以发现在满足前 ...

  2. Linux下利用docker搭建elasticsearch（单节点）

    1. 拉取镜像 #elasticsearch 6.x和7.x版本有很多不一样需要确认 docker pull docker.elastic.co/elasticsearch/elasticsearch ...

  3. lamp分离部署

    目录 lamp分离部署 1. 安装httpd 2. 安装mysql 3. 安装php 4. 配置apache并部署项目 4.1 启用代理模块 4.2 配置虚拟主机 4.3 部署PbootCMSPHP企 ...

  4. 笨办法学习python3练习代码：argv参数变量与文件操作

    ex15.py 完成ex15.py需要在ex15.py同文件夹目录下面准备一个txt文件(ex15_sample.txt) 执行ex15.py 如: python     ex15.py      e ...

  5. Node.js异步IO原理剖析

    为什么要异步I/O? 从用户体验角度讲,异步IO可以消除UI阻塞,快速响应资源 JavaScript是单线程的,它与UI渲染共用一个线程.所以在JavaScript执行的时候,UI渲染将处于停顿的状态 ...

  6. 静态集成腾讯TBS X5内核WebView，从微信提取新版30M浏览器内核打包进apk

    目录 前情提要 第一步:下载老版本SDK得到jar 获取SDK 集成SDK 步骤二.下载提取最新TBS X5内核 方法1:从微信中提取 方法2:App内内访问tbs调试页安装新内核 步骤三.集成内核到 ...

  7. Elasticsearch第一篇：在 Windows 上的环境搭建

    本文介绍如何在 windows 10 ,64位操作系统上安装最新版本 Elasticsearch.以及相关插件.之前看了不少园友的文章,用到的版本都比较低,尤其是插件的版本要和ES的版本相对应等这些问 ...

  8. 【java】解决java compiler level does not match the version of the installed java project facet

    翻译内容:java编译器jdk版本与安装的java项目方面的版本不匹配 修改编译器jdk版本 项目右键选择->properties 如果项目的开发版本为,jdk1.8 ,选择修改为1.8 ,点击 ...

  9. 高级搜索树-AVL树

    目录 平衡因子 AVL树节点和AVL树的定义 失衡调整 插入和删除操作 完整源码 AVL树是平衡二叉搜索树中的一种,在渐进意义下,AVL树可以将高度始终控制在O(log n) 以内,以保证每次查找.插 ...

  10. 主成分分析PCA数据降维原理及python应用（葡萄酒案例分析）

    目录 主成分分析(PCA)——以葡萄酒数据集分类为例 1.认识PCA (1)简介 (2)方法步骤 2.提取主成分 3.主成分方差可视化 4.特征变换 5.数据分类结果 6.完整代码 总结: 1.认识P ...