如何使用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>

登入後複製