如何使用HTML5导入来加载和重复使用HTML文档？-H5教程-PHP中文网

如何使用HTML5导入来加载和重复使用HTML文档？

HTML5导入是一项功能，允许开发人员在其他HTML文档中加载和重复使用HTML文档。您可以使用它：

创建一个用于导入的HTML文档：
首先，您需要创建要导入的HTML文件。例如，将以下内容保存为header.html ：

 <code class="html"><header> <h1>Welcome to My Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header></code>

登录后复制

导入HTML文档：
在主HTML文档中，您可以使用header.html元素将rel属性设置<link> import 。这是如何做的：

 <code class="html">   <title>My Website</title> <link rel="import" href="header.html">   <div id="imported-header"></div> <script> var link = document.querySelector(&#39;link[rel="import"]&#39;); var content = link.import; var header = content.querySelector(&#39;header&#39;); document.getElementById(&#39;imported-header&#39;).appendChild(header.cloneNode(true)); </script>  </code>

登录后复制

在此示例中， header.html被导入，其内容将附加到主文档中的div元素上。

使用HTML5进口用于管理HTML内容有什么好处？

HTML5进口为管理HTML内容提供了几种好处：

可重复使用：
您可以创建模块化的HTML组件，这些组件可以在多个页面或项目中重复使用，从而促进干燥（不要重复自己）原则。
可维护性：
导入的HTML文档的更改会自动反映在其使用的所有地方，从而使维护更加容易。
关注的分离：
导入使您可以分开HTML内容的不同部分，从而使您的代码库更有条理且易于管理。
有效的发展：
开发人员可以独立地在网站的不同部分工作，因为它们可以在整合到主要项目之前孤立开发和测试。
表现：
正确使用时，HTML5导入可以帮助仅加载必要的内容，从而导致页面加载时间更快。

HTML5是否可以与CSS和JavaScript（例如CSS和JavaScript）一起使用HTML5？

是的，HTML5导入可以与其他Web技术（例如CSS和JavaScript）无缝集成：

CSS：
您可以在导入的HTML文档中包含样式表。导入文档时，样式将在导入页面的上下文中适用于其内容。这是一个例子：

在header.html中：
```
 <code class="html"><style> header { background-color: #f8f9fa; padding: 1em; } </style> <header>  </header></code>
```
登录后复制
当您将header.html导入另一个文档时，该样式将范围范围为导入的header元素。
JavaScript：
您还可以在导入的文档中包含JavaScript。脚本将在导入页面的上下文中执行，使您可以动态地操纵导入内容。例如：

在header.html中：
```
 <code class="html"><script> document.addEventListener(&#39;DOMContentLoaded&#39;, function() { var header = document.querySelector(&#39;header&#39;); header.style.backgroundColor = &#39;lightblue&#39;; }); </script> <header>  </header></code>
```
登录后复制
导入header.html时，脚本将运行，更改header元素的背景颜色。

如何在Web应用程序中优化HTML5导入的性能？

要优化您的Web应用程序中HTML5导入的性能，请考虑以下策略：

最小化导入文件的大小：
通过删除不必要的空格，评论和未使用的代码，尽可能将导入的HTML文档尽可能小。缩小文件还可以帮助减少加载时间。
使用缓存：
利用浏览器缓存存储本地导入的HTML文件。这减少了重复下载的需求，从而改善了后续页面加载时间。您可以在服务器上设置适当的高速缓存标头来控制它。

懒惰加载：
仅在需要时才实现懒惰的加载技术来加载导入的HTML文档。例如，您可以使用JavaScript加载导入，同步：

 <code class="javascript">function loadImport(url, callback) { var link = document.createElement('link'); link.rel = 'import'; link.href = url; link.onload = callback; document.head.appendChild(link); } loadImport('header.html', function() { var link = document.querySelector('link[rel="import"]'); var content = link.import; var header = content.querySelector('header'); document.getElementById('imported-header').appendChild(header.cloneNode(true)); });</code>

登录后复制