html 如何使用include

在HTML中使用include的方法有多种：使用服务器端包含（SSI）、使用PHP、使用JavaScript、使用HTML5的标签。</strong> 其中，<strong>服务器端包含（SSI）<strong>是一种老旧但有效的方法；<strong>PHP</strong>则是最常见的方法之一，尤其在动态网页开发中；<strong>JavaScript</strong>方法适用于客户端操作，而</strong>HTML5的<iframe>标签</strong>则适合嵌入完整的网页内容。下面我将详细介绍如何使用PHP来实现include功能，这是当前最为主流和有效的方法之一。</p> </p> <p><h3>一、使用PHP实现HTML的include功能</h3></p> <p><h4>1、基本用法</h4></p> <p><p>PHP的include功能可以帮助你将一个文件的内容嵌入到另一个文件中，这对于代码复用和维护非常有帮助。你只需要在HTML文件中插入一行PHP代码即可实现。</p> </p> <p><pre><code class="language-php"><?php include 'header.php'; ?></p> <p></code></pre></p> <p><h4>2、实例讲解</h4></p> <p><p>假设你有一个网站，所有页面都有相同的头部和尾部，这时你可以将头部和尾部分别保存为<code>header.php</code>和<code>footer.php</code>，然后在每个页面中使用<code>include</code>语句引入。</p> </p> <p><p><strong>header.php</strong></p> </p> <p><pre><code class="language-html"><!DOCTYPE html></p> <p><html lang="en"></p> <p><head></p> <p> <meta charset="UTF-8"></p> <p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p> <p> <title>My Website</title></p> <p></head></p> <p><body></p> <p> <header></p> <p> <h1>Welcome to My Website</h1></p> <p> </header></p> <p></code></pre></p> <p><p><strong>footer.php</strong></p> </p> <p><pre><code class="language-html"> <footer></p> <p> <p>&copy; 2023 My Website</p></p> <p> </footer></p> <p></body></p> <p></html></p> <p></code></pre></p> <p><p><strong>index.php</strong></p> </p> <p><pre><code class="language-php"><?php include 'header.php'; ?></p> <p><main></p> <p> <p>This is the main content of the page.</p></p> <p></main></p> <p><?php include 'footer.php'; ?></p> <p></code></pre></p> <p><p>通过这种方式，你可以轻松地管理网站的头部和尾部内容，只需修改<code>header.php</code>或<code>footer.php</code>，所有引用它们的页面都会自动更新。</p> </p> <p><h3>二、使用JavaScript实现HTML的include功能</h3></p> <p><h4>1、基本用法</h4></p> <p><p>你可以通过JavaScript的<code>XMLHttpRequest</code>对象来加载外部HTML文件并插入到当前页面中。这种方法适用于客户端操作。</p> </p> <p><pre><code class="language-html"><div id="header"></div></p> <p><script></p> <p> function includeHTML() {</p> <p> var z, i, elmnt, file, xhttp;</p> <p> z = document.getElementsByTagName("*");</p> <p> for (i = 0; i < z.length; i++) {</p> <p> elmnt = z[i];</p> <p> file = elmnt.getAttribute("include-html");</p> <p> if (file) {</p> <p> xhttp = new XMLHttpRequest();</p> <p> xhttp.onreadystatechange = function() {</p> <p> if (this.readyState == 4 && this.status == 200) {</p> <p> elmnt.innerHTML = this.responseText;</p> <p> elmnt.removeAttribute("include-html");</p> <p> includeHTML();</p> <p> }</p> <p> }</p> <p> xhttp.open("GET", file, true);</p> <p> xhttp.send();</p> <p> return;</p> <p> }</p> <p> }</p> <p> }</p> <p> includeHTML();</p> <p></script></p> <p></code></pre></p> <p><h4>2、实例讲解</h4></p> <p><p>首先，你需要创建一个HTML文件，比如<code>header.html</code>，然后在你想要包含这个文件的地方加上<code>include-html</code>属性。</p> </p> <p><p><strong>header.html</strong></p> </p> <p><pre><code class="language-html"><header></p> <p> <h1>Welcome to My Website</h1></p> <p></header></p> <p></code></pre></p> <p><p><strong>index.html</strong></p> </p> <p><pre><code class="language-html"><div include-html="header.html"></div></p> <p><main></p> <p> <p>This is the main content of the page.</p></p> <p></main></p> <p><script src="include.js"></script></p> <p></code></pre></p> <p><p>通过这种方式，你可以在多个页面中复用相同的HTML片段。</p> </p> <p><h3>三、使用服务器端包含（SSI）实现HTML的include功能</h3></p> <p><h4>1、基本用法</h4></p> <p><p>服务器端包含（SSI）是一种在服务器端处理的简单文本替换技术。你需要将文件的扩展名改为<code>.shtml</code>，并使用<code></code>语法。</p> </p> <p><pre><code class="language-html"></p> <p><main></p> <p> <p>This is the main content of the page.</p></p> <p></main></p> <p></p> <p></code></pre></p> <p><h4>2、实例讲解</h4></p> <p><p><strong>header.shtml</strong></p> </p> <p><pre><code class="language-html"><header></p> <p> <h1>Welcome to My Website</h1></p> <p></header></p> <p></code></pre></p> <p><p><strong>footer.shtml</strong></p> </p> <p><pre><code class="language-html"><footer></p> <p> <p>&copy; 2023 My Website</p></p> <p></footer></p> <p></code></pre></p> <p><p><strong>index.shtml</strong></p> </p> <p><pre><code class="language-html"></p> <p><main></p> <p> <p>This is the main content of the page.</p></p> <p></main></p> <p></p> <p></code></pre></p> <p><p>这种方法虽然简单，但需要服务器支持SSI，并且在现代开发中使用较少。</p> </p> <p><h3>四、使用HTML5的<iframe>标签实现HTML的include功能</h3></p> <p><h4>1、基本用法</h4></p> <p><p><code><iframe></code>标签可以嵌入一个完整的HTML页面到另一个页面中。这种方法适用于嵌入第三方内容或是完全独立的页面。</p> </p> <p><pre><code class="language-html"><iframe src="header.html"></iframe></p> <p><main></p> <p> <p>This is the main content of the page.</p></p> <p></main></p> <p><iframe src="footer.html"></iframe></p> <p></code></pre></p> <p><h4>2、实例讲解</h4></p> <p><p><strong>header.html</strong></p> </p> <p><pre><code class="language-html"><header></p> <p> <h1>Welcome to My Website</h1></p> <p></header></p> <p></code></pre></p> <p><p><strong>footer.html</strong></p> </p> <p><pre><code class="language-html"><footer></p> <p> <p>&copy; 2023 My Website</p></p> <p></footer></p> <p></code></pre></p> <p><p><strong>index.html</strong></p> </p> <p><pre><code class="language-html"><iframe src="header.html"></iframe></p> <p><main></p> <p> <p>This is the main content of the page.</p></p> <p></main></p> <p><iframe src="footer.html"></iframe></p> <p></code></pre></p> <p><p>通过这种方式，可以嵌入完整的HTML页面，但需要注意的是<code><iframe></code>会创建一个独立的浏览上下文。</p> </p> <p><h3>五、总结与最佳实践</h3></p> <p><p>在HTML中使用include功能可以大大提高代码的复用性和维护性。<strong>PHP</strong>是最常见和灵活的方法，适用于大多数动态网站的开发；<strong>JavaScript</strong>方法适用于需要在客户端进行操作的情况；服务器端包含（SSI）虽然简单，但使用较少；<strong>HTML5的<iframe>标签</strong>适合嵌入独立的网页内容。根据实际需求选择合适的方法，可以使你的项目开发更加高效和灵活。</p> </p> <p><p>对于项目团队管理系统的需求，推荐使用<strong>研发<span class="wpcom_keyword_link"><a href="https://sc.pingcode.com/bvlpm" title="项目管理">项目管理</a></span>系统<span class="wpcom_keyword_link"><a href="https://sc.pingcode.com/dxsxk" title="PingCode">PingCode</a></span></strong>和<strong>通用项目协作软件<span class="wpcom_keyword_link"><a href="https://sc.pingcode.com/zwe04" title="Worktile">Worktile</a></span></strong>，这两个系统在团队协作和项目管理方面有很强的优势，能够帮助你更好地管理项目进度和团队协作。</p> </p> <h2><strong>相关问答FAQs：</strong></h2> <p><strong>1. 什么是HTML的include功能？</strong><br />HTML的include功能是一种将多个HTML文件组合在一起的方法。它允许您在一个HTML文件中包含其他HTML文件的内容，以便在多个页面中共享相同的代码段，从而提高代码的可维护性和重用性。</p> <p><strong>2. 如何在HTML中使用include功能？</strong><br />要在HTML中使用include功能，您可以使用服务器端的编程语言（如PHP）或静态网页生成工具（如Sass）来实现。首先，您需要在服务器上配置相应的环境，然后可以使用特定的语法来包含其他HTML文件的内容。</p> <p><strong>3. 有没有其他方法可以实现HTML的include功能？</strong><br />除了使用服务器端的编程语言或静态网页生成工具外，还有一些前端框架（如React和Vue.js）提供了自己的模块化系统，可以实现类似于include的功能。这些框架通常使用特定的语法或组件来包含其他组件的内容，以达到代码重用和模块化的目的。如果您正在使用这些框架，您可以查阅相应的文档以了解如何实现include功能。</p> <div class="entry-copyright"><p>原创文章，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3321268</p></div> </div> <div class="entry-tag"></div> <div class="entry-action"> <div class="btn-zan" data-id="3321268"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner"> <div class="entry-bar-author"> <a data-user="2" target="_blank" href="https://docs.pingcode.com/baike/author/edit1" class="avatar j-user-card"> <img alt='Edit1' src='https://g.izt6.com/avatar/e95e8e089761140e74a62002cdb99a23?s=60&d=robohash&r=g' srcset="https://g.izt6.com/avatar/e95e8e089761140e74a62002cdb99a23?s=120&d=robohash&r=g 2x" class='avatar avatar-60 photo' height='60' width='60' decoding='async'/><span class="author-name">Edit1</span> </a> </div> <div class="entry-bar-info"> <div class="info-item meta"> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="3321268" data-qrcode="https://docs.pingcode.com/baike/3321268"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_image_myimg"> <a href="https://pingcode.com/solutions/white-paper-2023baipishu?utm_source=Docs&utm_medium=%E4%BE%A7%E8%BE%B9%E6%A0%8F%E6%B5%B7%E6%8A%A5%E5%B9%BF%E5%91%8A&utm_campaign=%E6%95%8F%E6%8D%B7%E7%99%BD%E7%9A%AE%E4%B9%A6%E4%B8%8B%E8%BD%BD"> <img class="j-lazy" src="https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/b567a366-7b5a-46dc-8fd7-d7451c87715c.webp" data-original="https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/2024080703123184.png" alt="敏捷白皮书下载"> </a> </div><div class="widget widget_tags"><h3 class="widget-title"><span>热门标签</span></h3> <div class="tagcloud"> <a href="https://docs.pingcode.com/baike/tag/java" title="Java">Java</a> <a href="https://docs.pingcode.com/baike/tag/%e5%bc%80%e6%ba%90%e9%a1%b9%e7%9b%ae%e7%ae%a1%e7%90%86" title="开源项目管理">开源项目管理</a> <a href="https://docs.pingcode.com/baike/tag/%e8%80%83%e5%8b%a4%e7%ae%a1%e7%90%86" title="考勤管理">考勤管理</a> <a href="https://docs.pingcode.com/baike/tag/%e7%94%b5%e5%ad%90%e7%ad%be%e5%90%8d%e5%b9%b3%e5%8f%b0" title="电子签名平台">电子签名平台</a> <a href="https://docs.pingcode.com/baike/tag/%e6%8e%92%e7%8f%ad%e7%b3%bb%e7%bb%9f" title="排班系统">排班系统</a> <a href="https://docs.pingcode.com/baike/tag/%e4%bc%81%e4%b8%9a1%e7%ae%a1%e7%90%86" title="企业1管理">企业1管理</a> <a href="https://docs.pingcode.com/baike/tag/%e9%a1%b9%e7%9b%ae%e5%8d%8f%e4%bd%9c%e5%b7%a5%e5%85%b7" title="项目协作工具">项目协作工具</a> <a href="https://docs.pingcode.com/baike/tag/%e5%b7%a5%e8%b5%84%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f" title="工资管理系统">工资管理系统</a> <a href="https://docs.pingcode.com/baike/tag/%e9%9c%80%e6%b1%82%e8%bf%9b%e5%ba%a6%e7%ae%a1%e7%90%86%e8%bd%af%e4%bb%b6" title="需求进度管理软件">需求进度管理软件</a> <a href="https://docs.pingcode.com/baike/tag/%e9%94%80%e5%94%ae%e7%ae%a1%e7%90%86" title="销售管理">销售管理</a> <a href="https://docs.pingcode.com/baike/tag/%e5%a4%96%e8%b4%b8crm" title="外贸crm">外贸crm</a> <a href="https://docs.pingcode.com/baike/tag/%e7%bb%a9%e6%95%88%e7%ae%a1%e7%90%86" title="绩效管理">绩效管理</a> <a href="https://docs.pingcode.com/baike/tag/%e8%b4%a2%e5%8a%a1%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f" title="财务管理系统">财务管理系统</a> <a href="https://docs.pingcode.com/baike/tag/%e4%bc%81%e4%b8%9a%e8%ae%b0%e8%b4%a6%e8%bd%af%e4%bb%b6" title="企业记账软件">企业记账软件</a> <a href="https://docs.pingcode.com/baike/tag/%e4%bb%bb%e5%8a%a1%e7%ae%a1%e7%90%86" title="任务管理">任务管理</a> <a href="https://docs.pingcode.com/baike/tag/%e8%bf%9b%e5%ba%a6%e8%b7%9f%e8%b8%aa%e7%b3%bb%e7%bb%9f" title="进度跟踪系统">进度跟踪系统</a> <a href="https://docs.pingcode.com/baike/tag/%e6%b5%8b%e8%af%95%e7%ae%a1%e7%90%86" title="测试管理">测试管理</a> <a href="https://docs.pingcode.com/baike/tag/%e7%94%b5%e5%ad%90%e5%90%88%e5%90%8c%e8%bd%af%e4%bb%b6" title="电子合同软件">电子合同软件</a> <a href="https://docs.pingcode.com/baike/tag/%e5%9c%a8%e7%ba%bf%e5%8d%8f%e4%bd%9c%e6%96%87%e6%a1%a3" title="在线协作文档">在线协作文档</a> <a href="https://docs.pingcode.com/baike/tag/wiki%e7%b3%bb%e7%bb%9f" title="wiki系统">wiki系统</a> <a href="https://docs.pingcode.com/baike/tag/%e8%90%a5%e9%94%80%e8%87%aa%e5%8a%a8%e5%8c%96" title="营销自动化">营销自动化</a> <a href="https://docs.pingcode.com/baike/tag/%e7%bb%8f%e9%94%80%e5%95%86%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f" title="经销商管理系统">经销商管理系统</a> <a href="https://docs.pingcode.com/baike/tag/%e8%b4%a2%e5%8a%a1%e4%bc%9a%e8%ae%a1%e7%b3%bb%e7%bb%9f" title="财务会计系统">财务会计系统</a> <a href="https://docs.pingcode.com/baike/tag/%e4%bc%9a%e8%ae%a1%e5%81%9a%e8%b4%a6%e8%bd%af%e4%bb%b6" title="会计做账软件">会计做账软件</a> <a href="https://docs.pingcode.com/baike/tag/%e5%9b%a2%e9%98%9f%e5%8d%8f%e5%90%8c%e7%ae%a1%e7%90%86" title="团队协同管理">团队协同管理</a> <a href="https://docs.pingcode.com/baike/tag/%e5%bb%ba%e8%ae%be%e5%b7%a5%e7%a8%8b%e7%ae%a1%e6%8e%a7%e5%b9%b3%e5%8f%b0" title="建设工程管控平台">建设工程管控平台</a> <a href="https://docs.pingcode.com/baike/tag/%e8%b4%a2%e5%8a%a1%e7%ae%a1%e7%90%86" title="财务管理">财务管理</a> <a href="https://docs.pingcode.com/baike/tag/jira" title="Jira">Jira</a> <a href="https://docs.pingcode.com/baike/tag/%e8%a3%85%e4%bf%ae%e7%ae%a1%e7%90%86%e8%bd%af%e4%bb%b6" title="装修管理软件">装修管理软件</a> <a href="https://docs.pingcode.com/baike/tag/%e5%bb%ba%e7%ad%91%e6%96%bd%e5%b7%a5%e9%a1%b9%e7%9b%ae%e7%ae%a1%e7%90%86" title="建筑施工项目管理">建筑施工项目管理</a> </div> </div><div class="widget widget_image_myimg"> <a href="https://docs.pingcode.com/resource/pingcode-wiki"> <img class="j-lazy" src="https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/b567a366-7b5a-46dc-8fd7-d7451c87715c.webp" data-original="https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/2024080703132669.png" alt="知识管理解决方案"> </a> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-col-wrap footer-with-logo-icon"> <div class="footer-col footer-col-logo"> <img src="https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/2024080706253989.png" alt="PingCode智库"> </div> <div class="footer-col footer-col-copy"> <div class="copyright"> <p><a href="https://pingcode.com/product/ship?utm_source=Docs&utm_medium=%E9%A6%96%E9%A1%B5%2F%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%2F%E4%BA%A7%E5%93%81%E4%B8%8E%E9%9C%80%E6%B1%82%E7%AE%A1%E7%90%86&utm_campaign=%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F">产品管理</a> | <a href="https://pingcode.com/product/project?utm_source=Docs&utm_medium=%E9%A6%96%E9%A1%B5%2F%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%2F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86&utm_campaign=%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F">项目管理</a> | <a href="https://pingcode.com/product/wiki?utm_source=Docs&utm_medium=%E9%A6%96%E9%A1%B5%2F%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%2F%E7%9F%A5%E8%AF%86%E7%AE%A1%E7%90%86&utm_campaign=%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F">知识管理</a> | <a href="https://pingcode.com/product/testhub?utm_source=Docs&utm_medium=%E9%A6%96%E9%A1%B5%2F%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%2F%E6%B5%8B%E8%AF%95%E4%B8%8E%E7%BC%BA%E9%99%B7%E7%AE%A1%E7%90%86&utm_campaign=%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F">测试管理</a> | <a href="https://pingcode.com/product/insight?utm_source=Docs&utm_medium=%E9%A6%96%E9%A1%B5%2F%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%2F%E6%95%88%E8%83%BD%E5%BA%A6%E9%87%8F&utm_campaign=%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F">研发效能度量</a> | <a href="https://pingcode.com/signup?utm_source=Docs&utm_medium=%E9%A6%96%E9%A1%B5%2F%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%2F%E5%85%8D%E8%B4%B9%E8%AF%95%E7%94%A8&utm_campaign=%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F">更多</a></p> <p style="text-align: left;"><span style="font-size: 10px;"><span class="icp-info-pc"><a class="icp-num" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">京ICP备13017353号</a><a class="icp-num" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802032686" target="_blank" rel="noopener">京公网安备 11010802032686号</a> </span><span class="split-words">| </span><span class="copyright copyright-info-pc">© 2024 pingcode.com</span></span></p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/qrcode_for_gh_f570290a2dd2_344.jpg');"></span> </a> </div> </div> </div> </div> </footer> <div class="action action-style-1 action-color-1 action-pos-1" style="bottom:20%;"> <a class="action-item" href="https://pingcode.com/signup?utm_source=Docs&utm_medium=%E6%96%B0%2F%E6%82%AC%E6%B5%AE%E6%B3%A8%E5%86%8C%E6%8C%89%E9%92%AE"> <i class="wpcom-icon fa fa-chain action-item-icon"></i> <span>免费注册</span> </a> <div class="action-item"> <i class="wpcom-icon fa fa-phone-square action-item-icon"></i> <span>电话联系</span> <div class="action-item-inner action-item-type-2"> <p>4008001024</p> </div> </div> <div class="action-item"> <i class="wpcom-icon fa fa-wechat action-item-icon"></i> <span>微信咨询</span> <div class="action-item-inner action-item-type-1"> <img class="action-item-img" src="https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/08/2024080802583135.png" alt="微信咨询"> </div> </div> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> <span>返回顶部</span> </div> </div> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/docs.pingcode.com\/baike\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/docs.pingcode.com\/baike\/wp-content\/themes\/justnews","slide_speed":"5000","is_admin":"0","lang":"zh_CN","js_lang":{"share_to":"\u5206\u4eab\u5230:","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"lightbox":"1","post_id":"3321268","poster":{"notice":"\u8bf7\u300c\u70b9\u51fb\u4e0b\u8f7d\u300d\u6216\u300c\u957f\u6309\u4fdd\u5b58\u56fe\u7247\u300d\u540e\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"484","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@400;500&display=swap"}; /* ]]> */ </script> <script type="text/javascript" src="https://cdn-docs-new.pingcode.com/baike/wp-content/themes/justnews/js/main.js?ver=6.18.2" id="main-js"></script> <script type="text/javascript" src="https://cdn-docs-new.pingcode.com/baike/wp-content/themes/justnews/themer/assets/js/icons-2.7.19.js?ver=6.18.2" id="wpcom-icons-js"></script> <script type="text/javascript" src="https://cdn-docs-new.pingcode.com/baike/wp-content/themes/justnews/js/wp-embed.js?ver=6.18.2" id="wp-embed-js"></script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "@id": "https://docs.pingcode.com/baike/3321268", "url": "https://docs.pingcode.com/baike/3321268", "headline": "html 如何使用include", "image": "https://cdn-docs-new.pingcode.com/baike/wp-content/uploads/2024/10/448b98b86d2d87c453a1fc33b52133c3.webp", "description": "在HTML中使用include的方法有多种：使用服务器端包含（SSI）、使用PHP、使用JavaScript、使用HTML5的标签。其中，服务器端包含（SSI）是一种老旧但有效的方法；PHP则是最常见的方法之一，尤其在动态网页开发中；JavaScript方法适用于客户端操作，而HTML5的标签则适…", "datePublished": "2024-10-06T21:28:35+08:00", "dateModified": "2024-10-06T21:28:48+08:00", "author": {"@type":"Person","name":"Edit1","url":"https://docs.pingcode.com/baike/author/edit1"} } </script> </body> </html>