html有多个页面是相同的怎么用一个页面引用

html-css07

html有多个页面是相同的怎么用一个页面引用,第1张

将多个html页面里引进相同的一个头部页面的方法如下:

1. iframe 包含法。

页头和页尾分别做成一个页面,然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用,因为当页头页尾高度不固定时,需要iframe根据页面内容自适应高度,

html文件嵌套,最简单的办法是使用SSI(Server Side

Include)技术,也就是在服务器端两个文件就被合并了。除了少数免费网页寄存服务外,几乎所有的网页寄存服务器都支持

SSI。这也是一个比较推荐的方法,它与ASP和ASP.NET网页使用的语法一模一样。如果网站管理员偏向使用PHP或JSP的话,语法会稍有不同。

对于不能使用SSI、ASP、ASP.NET、PHP和JSP等服务器端动态页面语言的情况,这里还将介绍两种客户端镶嵌的办法:JavaScript和iframe的方法。当这两种客户端的方法都有很大的弊病,一般不推荐使用。

需要用iframe标签

先把用到的标签样式写出来再分析

<!DOCTYPE>

<html>

<head>

</head>

<body>

<iframe src="top.html" width="100%" height="464" scrolling="no"></iframe>

<iframe src="main.html" width="100%" height="800" scrolling="no"></iframe>

<!-- 其实这里应该是主体展示的内容,不同页面不一样,我们现在只把头部和底部单独拿出来讲解分析 -->

<iframe src="foot.html" width="100%" height="147" scrolling="no"></iframe>

</body>

</html>

一、我们看一下多个html文件

这里,把头部top.html和底部foot.html两个单独写出来了,接下来就是如何把他们都写在index.html里面,确保在浏览首页的时候,页面调取正常

二、再看一下写在index.html里的位置和样式

中间是主体展示内容

三、需要注意的就是,调取top.html和foot.html的时候要给width值和height值

不然,默认只会调出来左上角的一小块内容

总结一下:

单独的top.html和foot.html里面的样式,页要保证完整性,截图说明

要确保这样的结构正常,而不是单单红框里的内容