资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/HTML静态页面引用公共的头部和底部(目前亲测的几种静态页面方法）

HTML静态页面引用公共的头部和底部(目前亲测的几种静态页面方法）

tigerZH / 3335人阅读

摘要：亲测方法三会出现滚动条。个人认为方法一在静态页面中的使用比较合适

这里不提iframe，主要因为设计网页相对比较困难，占用线程较多，速度慢，而且也不利于搜索引擎的对头尾的收录
方法一：通过load()函数，分别引入公共头部和底部文件; 
header.html 顶部页面


    
        
    
    
       

           
头部

       

   

footer.html 底部页面


    
    
       

           
这里是底部

       

   

index.html 正文页面



    
    

        

     
        
正文部分

      

      
    

    
    
    


注意
load函数里最好不要写本地的文件，容易引起跨域问题导致浏览器找不到页面，我这里是用域名来解决的
方法二：实现
方法三：HTML5 中的 标签 
注意：
方法二和方法三必须设置宽和高，高必须固定，设置auto会出现页面显示不完整的情况。（亲测方法三会出现滚动条）。个人认为方法一在静态页面中的使用比较合适
服务器托管 混合云 静态的html页面 html静态页面 静态html页面 生成静态html页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106852.html

相关文章

  • HTML 代码复用实践

    摘要：安装好之后，来简单的组织一下文件的目录生产环境的存放文件夹公共部分的存放文件夹编辑后的文件在新建的，配置好接着新建两个文件，分别是头部和底部这是的内容这是的内容最后在新建一个，把要用到的和给进来。 前言 通常我们所做的一些页面，我们可以从设计图里面看出有一些地方是相同的。例如：头部，底部，侧边栏等等。如果是制作静态页面的同学，对于这些重复的部分只能够通过复制粘贴到新的页面来，如果页面...

    Profeel 评论0 收藏0

  • 利用ajax 引入静态页公共的头部与底部

    摘要：利用引入公共的头部与底部或者多个页面需要用到的重复的组件，对于新入门的前端来说是很实用的方法，自己也是新手菜鸟一枚，折腾了好久，实现的方法有很多种，这是我个人觉得比较简单方便的首先得把公用的头部与底部分开创建模板，，这里我举例主页面引入头 利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件，对于新入门的前端来说是很实用的方法，自己也是新手菜鸟一枚，折腾了好久，实现的方法有...

    adam1q84 评论0 收藏0

  • 利用ajax 引入静态页公共的头部与底部

    摘要：利用引入公共的头部与底部或者多个页面需要用到的重复的组件，对于新入门的前端来说是很实用的方法，自己也是新手菜鸟一枚，折腾了好久，实现的方法有很多种，这是我个人觉得比较简单方便的首先得把公用的头部与底部分开创建模板，，这里我举例主页面引入头 利用ajax引入公共的头部与底部或者多个页面需要用到的重复的组件，对于新入门的前端来说是很实用的方法，自己也是新手菜鸟一枚，折腾了好久，实现的方法有...

    weakish 评论0 收藏0

  • 打造一个“精致的”个人博客

    摘要：百度统计先注册个百度统计的账号站长账号，适合个人博客，注册成功后按照提示，把代码复制到中的的标签里这里特指我的博客文件好了，这样你的博客就差不多了，是不是感觉很酷今天就到这儿，下篇文章见。 我为什么要写博客？其实我最初打算写博客，原因很简单，我就是想把工作中、学习中遇到 的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。Tips:...

    用户83 评论0 收藏0

  • 打造一个“精致的”个人博客

    摘要：百度统计先注册个百度统计的账号站长账号，适合个人博客，注册成功后按照提示，把代码复制到中的的标签里这里特指我的博客文件好了，这样你的博客就差不多了，是不是感觉很酷今天就到这儿，下篇文章见。 我为什么要写博客？其实我最初打算写博客，原因很简单，我就是想把工作中、学习中遇到 的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。Tips:...

    gotham 评论0 收藏0

发表评论

登陆后可评论

0条评论

tigerZH

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<