html中使用include引入另一个html文件

最新推荐文章于 2022-12-12 13:26:06 发布
最新推荐文章于 2022-12-12 13:26:06 发布
阅读量4.5w 收藏 16
点赞数 6
CC 4.0 BY-SA版权
分类专栏： web 文章标签： include
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Eflyings/article/details/98732970
本文介绍如何在HTML静态页面中使用SSI（Server Side Includes）来包含其他文件，如header和footer，需在nginx配置中开启SSI服务。通过正确配置，可以实现静态页面的模块化，提高开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!--#include file="top.html"-->不可以放到普通html页面，这是一个asp脚本，是server script。只有在asp/jsp中才能起作用。

如果要在html静态页面中使用include，则需要借助nginx服务且需要开启ssi 服务才能生效。

在nginx配置文件nginx.conf的http标签开启ssi：

http{

......

ssi on;

ssi_silent_errors on;

ssi_types text/shtml;

}

index.html引入header.html和footer.html文件：

如index.html内容:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="shortcut icon" href="/html/images/ico/favicon-16.ico">

<title>fei8meng</title>

<link rel="stylesheet" type="text/css" href="/html/css/main.css">

</head>

<body>

<!-- 切记include的#前不能有空格 -->

<!--#include file="/html/public/header.html"-->

<div class="content">

内容

</div>

<!--#include file="/html/public/footer.html"-->

</body>

</html>

 

header.html文件内容：

<!-- 防止乱码 -->
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<!-- 头部 -->
<div class="header">
    头部内容
</div>

 

footer.html文件内容：

<!-- 防止乱码 -->
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<!-- 底部 -->
<div class="footer">
    底部内容
</div>
 

 

 

html页面使用include导入php文件后多出一空白行
12-14
网上找的方法 管用 用include引入的footer和header文件都在上面多出一空白行，很是影响美观。直接把被引入的文件放入则没问题。 后来一想，以前一直用Gb2312编码，这次用的Utf-8，很可能跟这个有关。 很多都说可能是由于css padding设置等有关，但我这并不是。最后发现是Unicode签名（bom)引起的。 具体修改方法：打开footer 或header，然后在Dreamweaver里 点“修改”，选择“页面属性”，“标题/编码”，把 包括unicode签名(bom) 的勾取消就好了。
html-include-element：轻松在页面中包含外部HTML
02-03
<html-include> 轻松地在页面中包含外部HTML。 总览 <html-include>是一个Web组件，可获取HTML并将其包含到您的页面中。 < html-include src =" ./my-local-file.html " > </ html-include > <html-include>与任何框架一起使用，或者根本不与任何框架一起使用。 默认情况下， <html-include>将HTML呈现在影子根目录中，因此它与页面的其余部分是隔离的。 可以使用no-shadow属性进行配置。 安装 从npm安装： npm i html-include-element
html使用include引入其他页面文件
Jonathan的博客
01-18 6084
HTML从来没有任何方法可以在代码中包含其他HTML文件。例如包含所有页面的页眉和页脚： <body> <include src="./header.html"></include> Content <include src="./footer.html"></include> </body> <!-- html没有这样的include标签 --> 方式： 1、使用PHP <body>
在HTML文件中包含另一个HTML文件
CHCH998的博客
04-20 1308
I have 2 HTML files, suppose a.html and b.html . 我有2个HTML文件，假设a.html和b.html 。 In a.html I want to i
html中include的使用
热门推荐
子谦博客
08-17 2万+
include 1、作用 include的主要作用是用来在当前文件中引入另一个文件，以便在当前文件中使用 2、使用场景 当应用程序的所有页面的某些部分，例如：标题 页脚 导航栏 都一模一样时，就可以考虑把相同的部分提取出来写入另一个单独的文件中，然后通过include指令将文件引入 3、使用方法 include指令 <%@ include file="test.jsp" %> inc...
html文件引入其它html文件的几种方法：include方式
05-10 1512
　　可以在一个html的文件当中读取另一个html文件的内容吗？答案是确定的，而且方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，那今天就总结这几种方法让大家参考一下。 　　1.IFrame引入 　　　　a.html引入b.html的内容 　　　　<iframe name="content_iframe" marginwidth=0 marg...
在html文件里include文件内容的方法小结
12-13
它可以在主页面中嵌入一个窗口，展示另一个HTML文档。IFrame标签包括`src`属性，用于指定要加载的文件路径。例如： ```html ...
HTML静态页面引入公共html文件(ssi服务器端指令详解)
09-30
例如，要在HTML页面中包含另一个页面的内容，可以使用ssi指令如“<!--#include file="path/file.shtml"-->”。这条指令告诉服务器将指定路径下的文件内容插入到当前文件中。 SSI指令除了包含文件，还可以用来执行...
jsp中一个页面引入另一个页面的实现代码
10-26
指令通常使用的是include指令，它的作用是在JSP页面被转换成Servlet时，将另一个文件的内容插入到当前页面中。include指令的语法如下： ```jsp <%@ include file="filename.jsp" %> ``` 其中，filename.jsp是要...
HTML里面include其他文件的方法
weixin_33861800的博客
10-30 235
在html文件引入其它html文件的几种方法简介：在论坛中常常有网友问到，可以在一个html的文件当中读取另一个html文件的内容吗？答案是确定的，而且方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，那今天就总结这几种方法让大家参考一下，本人觉得第三种方式较好！ 1.IFrame引入，看看下面的代码   ...
jquery-include:在 html 文件中包含另一个 html 文件的 jQuery 插件
06-21
jQuery 包含插件 这个 jQuery 插件可以帮助开发人员在 html 文件中包含另一个 html 文件。 在此插件中，您可以访问 $(document).ready 函数中包含的内容。 如何使用它？ 要将插件包含在您的代码中： [removed][removed] 要包含另一个 html 文件： [removed]$.include("include.inc");[removed] 例子 索引.htm : <html> <head> [removed][removed] [removed][removed] [removed] $(document).ready(function () { alert($("#test").
前后端分离html中使用include引入另一个html文件nginx配置
Lancis的博客
07-17 1383
<!–#include file=“top.html”–>不可以放到普通html页面，这是一个asp脚本，是server script。只有在asp/jsp中才能起作用。 如果要在html静态页面中使用include，则需要借助nginx服务且需要开启ssi 服务才能生效。 在nginx配置文件nginx.conf的http标签开启ssi： http{ ...... ssi on; ssi_silent_errors on; ssi_types text/shtml; } index.
html包含html文件的方法
风亦飞的专栏
11-26 5068
     我们在写asp页面的时候，常常使用include命令来包含公共文件。由于这个方法用起来非常方便，于是很多人在HTML页面里尝试使用include，但是发现根本就不起作用。这是因为，include是VBScript的命令，因此可以在asp页面里使用。而HTML静态页面被调用的时候并不经过asp解释器，而是直接发送到用户浏览器，因此include命令就无效了。对于信息量较大的网站，通常我们都
html include
lisa890608的专栏
07-09 955
、、三者之间的本质区别   先从它的几个内置对象说起。   application和session比较简单，这里主要说明request和page的作用范围。   application：全局作用范围，整个应用程序共享，就是在部署文件中的同一个webApp共享，生命周期为：应用程序启动到停止。   session：会话作用域，当用户首次访问时，产生一个新的会话，以后服务器就可以记住这
html页面引入其他html页面
青莳的博客
03-31 3916
之前一直用jsp页面写的，直接使用引入其他页面 现在使用html之后，发现无法直接引入其他页面 百度后找到了解决办法，记录一下 首先创建一个include.js文件 (function(window, document, undefined) { var Include39485748323 = function() {} Include39485748323.prototype = { //倒序循环 forEach: function(array, call
如何在 HTML 文件中包含另一个 HTML 文件？
很酷的站长的博客
12-12 3651
在本教程中，我们将学习在 HTML 文件中包含另一个 HTML 文件。有多种方法可用于在 HTML 文件中包含另一个 HTML 文件。让我们快速浏览一下在网络上支持的技术。
html支持include,html中include include方式
weixin_32322859的博客
06-19 799
与的区别1、#包含文件的相对路径，#包含文件的虚拟路径。2、在同一个虚拟目录内，!--#=""--和!--#=""--效果是相同的，但假设虚拟目录名为，则!--#includevirtual="myweb/file.asp"--也可以通过调试，但我们知道!--#includefile="myweb/file.asp"--是绝对要报错的。3、如果一个站点下有2个虚拟目录myweb1和myweb2，m...
html中include引入文件,怎么在html中include一个文件内容？
weixin_29623163的博客
06-21 420
largeQ在html中include一个文件，方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，本人觉得第三种方式较好：1.IFrame引入，看看下面的代码[代码] 你会看到一个外部引入的文件，但会发现有一个类似外框的东西将其包围，可使用[代码] 但你会发现还会有点问题，就是背景色不同，你只要在引入的文件import.htm中使用相同的背景色也可以，但如果你使用的是IE...
html引入另一个动态html
最新发布
07-04
在 HTML 中引入另一个动态 HTML 文件的方法主要包括使用 JavaScript 动态加载、`<link rel="import">` 引入，以及通过服务端模板引擎实现。以下是几种常见方法： ### 使用 `<link rel="import">` 引入外部 HTML 文件 HTML 提供了 `rel="import"` 的方式用于引入其他 HTML 文件内容，通常与 Web Components 相关技术结合使用。该方法允许将一个 HTML 文档作为资源导入到当前文档中，并通过 JavaScript 操作其内容。 示例代码如下： ```html <head> <meta charset="utf-8" /> <title>主页</title> <link rel="import" href="header.html" id="headerImport"> <link rel="import" href="footer.html" id="footerImport"> </head> <body> <script type="text/javascript"> document.write(document.getElementById('headerImport').import.body.innerHTML); </script> <h1>页面主体内容</h1> <script type="text/javascript"> document.write(document.getElementById('footerImport').import.body.innerHTML); </script> </body> ``` 此方式适合静态网站或基于 Web Components 构建的项目中使用[^3]。 --- ### 使用 JavaScript 动态加载 HTML 内容 可以通过 AJAX 或 Fetch API 请求外部 HTML 文件内容，并将其插入当前页面中，从而实现“动态引入”的效果。 示例代码如下： ```html <div id="content"></div> <script> fetch('dynamic-content.html') .then(response => response.text()) .then(data => { document.getElementById('content').innerHTML = data; }) .catch(error => console.error('加载失败:', error)); </script> ``` 这种方式可以在不刷新整个页面的情况下加载并显示新的 HTML 内容，适用于构建单页应用（SPA）或需要按需加载部分视图的场景。 --- ### 使用服务端模板引擎引入动态 HTML 如果使用的是服务器端渲染（SSR），如 PHP、Node.js、JSP 等技术栈，则可以利用模板引擎的功能动态引入 HTML 片段。例如在 PHP 中可以使用 `include()` 函数： ```php <?php include 'header.html'; ?> <h1>页面主体内容</h1> <?php include 'footer.html'; ?> ``` 这种做法在服务端完成 HTML 合并后再返回给客户端，适合需要 SEO 支持和传统多页应用开发的场景。 --- ###
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值