HTML include 属性

在 HTML 中，我们通常需要包含外部的 HTML 文件或者模板文件。这时候 include 属性就会派上用场。include 属性可以让我们将一个外部文件的内容包含到当前文档中。这样可以使得我们在多个页面使用同一个内容模板，或者将大的页面分成多个小的模块来维护。

语法

include 属性的语法如下：

<div include="path/to/file.html"></div>

其中 path/to/file.html 表示要被包含的外部文件的路径。这个路径可以是相对路径或者绝对路径。如果是相对路径，则相对的是包含它的 HTML 文件的路径。如果是绝对路径，则相对的是服务器的根目录。

使用方法

要使用 include 属性，我们需要借助 JavaScript 来实现。具体来说，我们需要在 HTML 中添加一个 script 标签，在这个标签中使用 fetch 方法获取外部文件的内容，并将这个内容插入到当前的 HTML 文档中来实现包含功能。以下是一个例子：

<div id="header" include="header.html"></div>

<script>
  const includeHTML = async () => {
    const tags = document.querySelectorAll('[include]');
    for (const tag of tags) {
      const file = tag.getAttribute('include');
      const response = await fetch(file);
      if (response.ok) {
        const html = await response.text();
        tag.insertAdjacentHTML('afterend', html);
        tag.remove();
      } else {
        console.error(`Failed to include ${file}: ${response.status} ${response.statusText}`);
      }
    }
  };

  includeHTML();
</script>

在上面的例子中，我们定义了一个 includeHTML 函数，它会找到页面中所有包含 include 属性的元素，并将这些元素的 include 属性值作为外部文件路径来获取这些文件的内容，最后将这些内容插入到当前 HTML 文档中，并移除原来的 include 元素。

注意事项

1. 使用 include 属性可能会导致一些性能问题，因为在获取外部文件的内容时，浏览器会向服务器发送额外的请求，这可能会导致页面加载速度变慢。
2. 在使用 include 属性时，需要注意外部文件的路径是否正确，否则会导致包含失败。
3. include 属性目前还没有被所有的浏览器支持，具体支持情况可以参考 Can I Use。如果要在不支持 include 属性的浏览器中使用该功能，可以考虑使用其他库或者框架来实现。