【前端用法】如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)

简介: 【前端用法】如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)

一、问题描述

目前在做公司的一个网站,静态页面有很多,顶部导航和底部导航都是相同的,在每个页面中写头部和底部是可以的,但是修改

起来特别费时费力,后期很难维护。那么如何实现多个.html静态页,引用同一个header.htmlfooter.html文件呢?

前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight、友情链接等部分)

HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?下面就来记录一下常用的方法:

二、解决方案

当前方法:通过load()函数,引入公共头部和尾部文件;

代码预览:

<div id="head"></div>
<script type="text/javascript">
    $('#head').load('components/head.html');
    $('#footer').load('components/footer.html');
</script>

三、示例代码

header.html顶部导航部分的静态页面,全部代码示下:

<div class="head">
    <img src="img/logo.png" class="logo" alt=""/>
    <div class="wrapper">
        <nav><img src="img/logo.png" class="logos" alt=""/>
            <div id="drop">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="service_case.html">服务案例</a></li>
            <li><a href="product_center.html">产品中心</a></li>
            <li><a href="media_center.html">媒体中心</a></li>
            <li><a href="operating_center.html">运营中心</a></li>
            <li><a href="service_and_support.html">服务与支持</a></li>
            <li><a href="about_us.html">关于我们</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    $('#drop, nav ~ ul li').click(function() {
      $('nav, #drop span').toggleClass('open');
      $(window).scrollTop(0);
    });
    $('#drop>div').click(function(){
        $('.logos').toggleClass('blo')
    })
</script>

其次,看一下footer.html文件,全部代码示下:

<footer class="footer">
    <p class="return">回到顶部<span class="glyphicon glyphicon-menu-up"></span></p>
    <ul id="accordion" class="accordion">
        <li>
            <div class="link">服务案例<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link">产品中心<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link">媒体中心<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link"><a href="operating_center.html" style="color: #a5a5a5;">运营中心</a></div>
        </li>
        <li>
            <div class="link">服务与支持<i class="glyphicon glyphicon-menu-right"></i></div>
        </li>
        <li>
            <div class="link"><a href="about_us.html" style="color: #a5a5a5;">关于我们</a></div>
        </li>
    </ul>
    <div class="footer_qrcode">
        <img src="img/weixin_qrcode.png" alt="" />
        <p>
            <a>关注公众号</a>
            <a>了解更多资讯</a>
        </p>
        <hr />
        <span>© 2012-2020 版权所有</span>
        <span>****科技有限公司<a style="color: #ffffff" href="http://www.beian.miit.gov.cn" target="_blank">&nbsp;&nbsp;沪ICP备16004537号-1</a></span>
    </div>
</footer>
<script type="text/javascript">
    $(function() {
        var Accordion = function(el, multiple) {
            this.el = el || {};
            this.multiple = multiple || false;
            var links = this.el.find('.link');
            links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
        }
        Accordion.prototype.dropdown = function(e) {
            var $el = e.data.el;
                $this = $(this),
                $next = $this.next();
            $next.slideToggle();
            $this.parent().toggleClass('open');
            if (!e.data.multiple) {
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            };
        }    
        var accordion = new Accordion($('#accordion'), false);
    });
    //滑动高度监测
    var scrollTop;
    var timer = null;
    //监测当前屏幕高度
    window.onscroll = function() {
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        return scrollTop;
    }
    //点击返回顶部
    $('.return').click(function(){
        clearInterval(timer);
        timer = setInterval(function() {
            var now = scrollTop;
            var speed = (0 - now) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(scrollTop == 0) {
                clearInterval(timer);
            }
            document.documentElement.scrollTop = scrollTop + speed;
            document.body.scrollTop = scrollTop + speed;
        }, 35)
    })
</script>

最后,看一下index.html文件,全部代码示下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/join_investment_details.css"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--通用顶部导航-->
<div id="head"></div>
<script type="text/javascript">
    $('#head').load('components/head.html')
</script>
<!--通用顶部导航 结束-->
<!--热点资讯列表-->
<section class="join_investment_details">
    <div class="details-img">
        <img src="img/join_investment_info/18.png" alt="">
    </div>
    <div class="details-content container_content">
        <h5>开业支持</h5>
        <p>选择、设计、驻店指导</p>
        <ul>
            <li>选址支持:公司协助在当地高端建材城优先选择最优店面</li>
            <li>设计支持:店面智能化方案免费设计,制作最佳的客户体验动线。</li>
            <li>驻店指导:店面管理标准化打造,运营部门统一输出指导</li>
            <li></li>
        </ul>
    </div>
</section>
<!--热点资讯列表 结束-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--通用底部导航-->
<div id="footer"></div>
<script type="text/javascript">
    $('#footer').load('components/footer.html')
</script>
<!--通用底部导航 结束-->
</body>
</html>

通过上面的描述,可以发现:

header.htmlfooter.html文件中,并非是标准的html文档格式!

与此同时,通过index.html中的jQuery函数load()将上述的两个公共文件引入进来,从而形成一个完整的页面;并且,不会影响到

其他页面对于公共文件的引用和使用;

以上就是关于静态html文件,使用公共头部和尾部的解决办法之一。

关于其他方法,以后再补充。

 

完结!


目录
打赏
0
0
0
0
17
分享
相关文章
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
122 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
17天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
5月前
|
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
173 1
前端引入字体文件
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
创建HTML文件
【10月更文挑战第14天】创建HTML文件
102 4
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
177 2
前端JS读取文件内容并展示到页面上
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
330 2
|
5月前
|
前端diff文件对比使用worker进行优化
如何使用Web Worker在React项目中优化文件对比差异功能的实现。
62 5
|
5月前
|
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
325 1

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    17
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    33
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    40
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    97
  • 5
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    13
  • 6
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    47
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    85
  • 8
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    37
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    159
  • 10
    详解智能编码在前端研发的创新应用
    122