专栏首页小维博客HTML网页引用公共的头部和底部(亲测有效的三种方法)

HTML网页引用公共的头部和底部(亲测有效的三种方法)

HTML静态页面引用公共的头部和底部

方法一:

通过load()函数,分别引入公共头部和底部文件;

header.html 顶部页面 <!DOCTYPE html> <html> <head> <link href="./header.css" rel="stylesheet"> </head> <body> <div class="header"> <h4>头部</h4> </div> </body> </html> footer.html 底部页面

<!DOCTYPE html>
<html>
    <head></head>
    <body>
       <div class="footer">
           <h4>这里是底部</h4>
       </div>
   </body>
</html>

index.html 正文页面

<!DOCTYPE html>
<head></head>
<body>
    <!-- 顶部导航 -->
    <div class="headerpage"></div>
    <!--顶部导航 over-->    

    <!--中部主体--> 
        <p>正文部分</p>
    <!--中部主体 over-->  

    <!--footer-->  
    <div class="footerpage"></div>
    <!--footer over-->
    <script src="/js/jquery-3.4.1.min.js"></script>/*引用或下载官网最新js代码*/
    <script>
        $(function(){
            /*公共部分
            * 导航栏
            * footer CopyRight
            */
            // $(".headerpage").load("load/header.html");/*浏览器容易引起跨域问题*/
            $(".headerpage").load('http://www.load.com/header.html');
            $(".footerpage").load("http://www.load.com/footer.html");
        });
    </script>
</body>
</html>

注意:load函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的。

方法二:

引用<object>来实现

<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>

方法三:

HTML5 中的 <embed> 标签

<embed type="text/html" src="header.html" />

小维认为方法一在HTML静态页面中的使用是最合适不过的哦。

注意:方法二和方法三必须设置宽和高,高必须固定,设置auto会出现页面显示不完整的情况。(亲测方法三会出现滚动条)

这里不提iframe,主要因为设计网页相对比较困难,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录。

版权声明:本站原创文章 HTML网页引用公共的头部和底部(亲测有效的三种方法) 由 小维 发表! 转载请注明:HTML网页引用公共的头部和底部(亲测有效的三种方法) - 小维的个人博客 部分素材来源于网络,如有侵权请联系删除!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 静态页面如何实现 include 引入公用代码

      一直以来,我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的,就像下面这样:

    胡尐睿丶
  • 静态页面如何实现 include 引入公用代码

      一直以来,我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的,就像下面这样: <!-- index....

    胡尐睿丶
  • BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    Sb_Coco
  • 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    官方介绍: 博客皮肤模板 http://skintemplate.cnblogs.com/

    Enjoy233
  • django模板语法之include

    假如我们有以下模板index.html,代码为: <!DOCTYPE html> <html lang="en"> <head> <meta chars...

    用户1214487
  • 前端学习(1)~html标签讲解(一)

    html全称为HyperText Markup Language,译为超文本标记语言,不是一种编程语言,是一种描述性的标记语言,用于描述超文本中内容的显示方式。

    Vincent-yuan
  • 前端学习(9)~css学习(三):样式表和选择器

    CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容...

    Vincent-yuan
  • python测试开发django-6.模板中include使用

    当我们打开一个网站的时候,在打开不同的页面时候,会发现每个页面的顶部、底部内容都差不多,这样就可以把这些公共的部分,单独抽出来。 类似于python里面的函数,...

    上海-悠悠
  • gulp实现公共html代码复用

    在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的。我们不可能在每个html页面都写一遍...

    用户1174387
  • SpringBoot2.x系列教程(三十二)Thymeleaf资源导入及公共布局

    注意:使用Thymeleaf的引用方法,只有运行项目才有效。普通打开HTML无法解析。

    程序新视界
  • HTML head 头标签 总结

    HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

    前朝楚水
  • 猿进化系列15——实战之一文搞懂项目前期

    看完上一个章节,相信你已经完成了某网站功能的需求分析和数据库设计,是时候实现这些设计的功能了,不过在实现之前,有一些还没有搞定的关键事情你还需要了解,今天猿人工...

    山旮旯的胖子
  • 为什么要前后端分离?有什么优缺点

    前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型...

    java思维导图
  • 用 Nuxt.js 搭建一个服务端渲染(SSR)应用

    客户端渲染模式下,服务端把渲染的静态文件给到客户端,客户端拿到服务端发送过来的文件自己跑一遍 JS,根据 JS运行结果,生成相应 DOM,然后渲染给用户。

    用户4456933
  • Thinkphp框架的项目规划总结和踩坑经验

    1、项目分为PC端、移动端、和PC管理端,分为对应目录为 /Application/Home,/Application/Mobile,/Application/...

    PM吃瓜
  • 元素定位和定位辅助工具

    selenium里面有很多东西,第一个就是webdriver,web自动化中主流用的东西,它可以支持非常多的语言。它有个录制工具是selenium ide,短...

    清菡
  • Android+ESP8266+路由器实现远程控制(基于花生壳域名方式访问)

    x先说一下实现的功能,其实就是远程控制 和这篇文章的控制  http://www.cnblogs.com/yangfengwu/p/5295632.html  ...

    杨奉武
  • APICloud:接入云端API,无需代码一样开发APP

    APICloud是中国领先的“云端一体”的移动应用云服务提供商。APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开...

    BestSDK
  • 目前可用的微博秀的嵌入方法大全(亲测2019年2月仍有效)

    对于微博第5版(weibo v5),其相应的微博组件的网址为: https://open.weibo.com/widgets , 及其具体使用方法为: 微博秀...

    Enjoy233

扫码关注云+社区

领取腾讯云代金券