关键词：
在前端开发中，有些页面的头部和尾部是一模一样的，如果我们每个页面都重新写一次，那样会很麻烦，这时候我们可以将头部和尾部提取出来，让所有的页面都可以复用头部和尾部，减轻我们的工作量。
1.实现过程
通过html标签<iframe></iframe>来实现。步骤是:在主页页面开始位置增加以下代码:<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="index6.html" width="100%" height="50px"></iframe>例如下面的例子--假设头部是index6.html,我们正在编辑的页面是index7.html。 头部index6.html(一个简单的导航):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>头部</title>
<style type="text/css">
body
margin:0;
padding:0;
font-size:12px;
ul
list-style:none;
ul li
background: blue;
float:left;
width:70px;
height:30px;
line-height:30px;
margin:5px;
text-align:center;
li:first-child
background: red;
li a
display:block;
color:#fff;
text-decoration:none;
li a:hover
background: red;
</style>
</head>
<body>
<ul>
<li><a href="#">第一项</a></li>
<li><a href="#">第二项</a></li>
<li><a href="#">第三项</a></li>
<li><a href="#">第四项</a></li>
</ul>
</body>
</html>我们的主页面index7.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="index6.html" width="100%" height="50px">
</iframe>
</div>
<div>
办正事的页面
</div>
</body>
</html>2.总结
使用iframe标签的方式实现共用页面的方式不是特别推荐，因为控制起来很麻烦，而且对性能的优化也不是很好，所以现在这种方式使用的很少。我会在下一篇博客中介绍通过使用js代码的方式和Angular指令的方式实现共用页面的步骤。静态的html,怎么共用头部和尾部?
不要用那种iframe的.谢谢参考技术A用包含文件<!include--(+含有头代码的文件名)> 查看详情
如何在html不同的页面中，共用头部与尾部？
...代码：<!–#includefile=”head.asp”–>调用共用底部文件代码是在index.asp文件代码的 查看详情
easyuitabs+yii2.0实现iframe方式打开页面（解决共用静态文件引入加载的问题）
...的需求（防止静态资源起冲突），这个时候常规思路就是使用iframe来实现！但遇到一个比较棘手的问题，当用easyuiTabs打开一个iframe页面时，怎么解决原有共用静态资源引入的问题。有人建议可以考虑将共用静态资源文件放到一... 查看详情
html网页公用头部与尾部的一些方法
方法一：使用框架<iframe></iframe>【不推荐，另据说搜索引擎可能不收录iframe引用的页面】<div> <iframesrc="header.html"width="100%"height="auto"marginwidth="0"marginheight="0"hspace=0vspace=0frameborder="0"scrollin 查看详情
引入公共头部
...引入，就提高了工作效率，整理集中文件引入公共文件的方式如下：1、html文件 新建公共头部文件，利用ifram引入，代码如下： <iframemarginwidth=0marginheight=0hspace=0vspace=0iframeborder=0s 查看详情
将css放在头部，js放在尾部可以优化页面？？？
...在尾部，这样做为什么能够实现页面的优化? 2.在使用jquery的时候，为什么把函数写在$(document).ready()事件中？ 3.javascript会阻塞dom的解析。当解析过程中遇到<scr 查看详情
head标签怎么给多个html引用
...页面；并且，不会影响到其他页面对于公共文件的引用和使用；大部分的pc项目中有很多个页面，而每个页面几乎都有重复的部分，今天分享得是如何将这些公共布局样式封装起来，在其他的页面中直接调用如果你是使用动态语... 查看详情
网站中公用头部与尾部
一、html 1. <iframesrc="1.html"frameborder="0"></iframe> 2. <embedsrc="1.html"/>二、写公用的js 文件，js中写字divde符串，然后在需要的页面适当位置引入公用的js.三、ajax动态拉取填充四、后端语言（inc 查看详情
python去除空格的方法(代码片段)
使用replace（注意replace第一个冒号中间有一个空格）#去掉全部空格头部，尾部，中间key=input("输入内容").replace("","")print("我是头部:"+key+":我是尾部")实现效果 使用join和spilt... 查看详情
可添加头部尾部recyclerview,很帅哦~
...让你轻松为RecyclerView添加头部和尾部。 示例中轮转图使用了Android-LoopView,使用它你可以轻松实现轮转大图。是不是很心动？那么抓紧来starorfork吧！GitHub地址:WrapRecyclerView Android-L 查看详情
html里用iframe引入一个头部页面js下拉菜单显示不全
...以做成一个通用的头部再引用，，除非是内容特别多，想实现前端这样引入最好用jqueryload 参考技术Biframe被下面的图片挡住了，或者是iframe高度不够。 查看详情
每个html都要用同一个header和footer怎么共用啊?
我的每一个页面都用相同的header和footer有共用的代码吗?你可以用html和js的代码转换器把关于header和footer的html代码分别进行转换，转换成两个js文件；然后再每个需要的html页面添加上该js就可以了例：<scripttype=\'javascript\'src=\'js/... 查看详情
简单实现iframe的高度根据页面内容自适应（jquery方式）
...要介绍了简单实现iframe的高度根据页面内容自适应（jQuery方式），以及在ie浏览器下的相关问题方式一：//注意：下面的代码是放在和iframe同一个页面中调用$("#iframeId").load(function(){varmainheight=$(this).contents().find("body").height()+30; ... 查看详情
注册功能的实现
系统并不是显示的第一个网页是注册页面，，而是登录界面，所以注册页面需要通过登录界面进行跳转。 在注册页面，其头部与尾部还有背景图与登录界面一致 HTML：头部：尾部：注册输入框：<divalign="center"class="l... 查看详情
使用iframe父页面调用子页面和子页面调用父页面的元素与方法
在实际的项目开发中，iframe框架经常使用，主要用于引入其他的页面。下面主要介绍一下使用iframe引入其他页面后，父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素。1、父页面获取子页面的元素//jqu... 查看详情
7.5queue集合(代码片段)
目录一、PriorityQueue实现类1、基本方法使用2、排序方式2.1自然排序：采用自然顺序的PriorityQueue集合中的元素必须实现Coparable接口，而且是同一个类的多个实例，否则引发ClassCastException异常2.2定制排序：创建定制排序时，传入一... 查看详情
iframe的优点跟缺点都有哪些？
...在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。5.多数小型的移动设备（PDA手机）无法完全显示框架，设备兼容性差6.多框架的页面会增加服务器的http请求，对于大型网站是不可取的。... 查看详情
每日思考（2019/12/15）(代码片段)
...响整体窗口的刷新（可以实现无刷新上传，在FormData无法使用时）如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；网页如果为了统一风格，头部和版本都是一样的... 查看详情