li标签加背景图_include标签—引用文件路径

本文介绍了HTML中的include标签,用于减少重复代码。通过将公共样式提取到单独文件,然后在需要的地方使用include标签进行引用,提高了代码复用性和维护性。文章详细阐述了include标签的用法和文件结构,并给出了实例演示。
摘要由CSDN通过智能技术生成

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

36924c73e90f1caa3c7c35f59d8dd95f.png

文件名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前提是把相同的代码先提取出来,所以我们将对应的代码先提取成文件:

文件结构:

ddb5da5432584686d0fc27f673c81530.png

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,还会有同行一起技术交流。

显示

4bc37c6e86dd35488d30dec5c3f49c72.png

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值