在html页面中引入另一个html页面

我们在使用html编写一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。

在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择

如果有些浏览器本地实现不了，那么放到服务器上面！（重要！！！）

注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置

<style type="text/css">*{margin: 0;padding: 0;}</style>

一、import引入(中引入文件，

href链接引入的html文件，id可以看做页面引导，在script中用到

<head><meta charset="utf-8" /><title>主页面</title><!--import引入--><link rel="import" href="top.html" id="page1"/><link rel="import" href="fotter.html" id="page2"/>
</head>

<!--注意顺序-->
<!--import在头部引入，里面是啥就是啥-->
<script type="text/javascript">document.write(page1.import.body.innerHTML);</script>
hello world！<!--本页面写入内容-->
<script type="text/javascript">document.write(page2.import.body.innerHTML);</script>

二、通过JQuery的load()方法加载页面

相当于把引入的html中head和body标签中的数据拖出来，在外面包了一个你自己写的标签，比如说上面代码中的

<!--注意顺序-->
<!--使用js引入，引入整个文档，但是没有html和body，相当于body里面的数据-->
<div class="top">top</div>
<div class="center"><p>你好，我在中间！</p>
</div>
<div class="footer">footer</div>
<script src="js/jq/jquery-3.2.1.min.js"></script>
<script type="text/javascript">//在js中引入
$(document).ready(function () {$('.top').load('top.html');$('.footer').load('fotter.html');
});</script>

三、object引入和iframe引入（带有滚动条，视情况使用）

<!--object引入，相当于把整个页面拉过来（在一个html中嵌套另一个html），包括title,meta,body,html等-->
<!--此处的高是嵌套进去的整个html的高，不包括边框，padding等-->
<objectstyle="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object><!--iframe引入，同object方式一样，页面整个嵌套，默认高度为150,frameborder设置为1时边框宽度为2-->
<iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>

两中引入方式比较：

相同点：默认高度为150引入后本页面html嵌套引入页面html，整个引入
不同点：iframe引入使用scrolling="no"可以不让页面进行滚动，取消右侧滚动条iframe中 frameborder="no"可以修改为0或1，这里不是指宽度，可以理解为布尔型，当设为1时border宽度为2

四、thymeleaf

在html页面中引入另一个html页面相关推荐

如何在一个html页面中引入另一个html页面
1.分别写出两个html页面01.html和02.html <!DOCTYPE html> <html lang="en"> <head>< ...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topm ...
HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
在一个JSP页面中包含另一个JSP页面的三种方式
转载自://http://blog.163.com/neu_lxb/blog/static/179417010201121343132918/ (1)include指令 include指令告诉容器:复 ...
html里面怎么引别的页面_如何在一个html文件中引入另一个html文件？
展开全部在html页面中引入另一个html页面的标签 1.32313133353236313431303231363533e58685e5aeb931333365633864用iframe标签 2. ...
HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
1. 使用HTML的link标签import另一个HTML页面 1.1 在HTML页面的<head>标签内使用<link>标签引入另一个HTML页面("centerH ...
同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...

在html页面中引入另一个html页面

在html页面中引入另一个html页面相关推荐

最新文章

热门文章