开发静态页面时，不依赖node相关的工具，如何提取出公共部分并引入？

"在开发静态页面时，如果不依赖Node相关的工具，我们可以采用以下方法来提取出公共部分并引入：

1. 创建公共部分的HTML文件：首先，我们可以创建一个包含公共部分代码的HTML文件，比如header.html和footer.html。在这些文件中，我们只需要编写公共部分的代码，例如页面的头部和尾部。

2. 使用HTML的<object>标签引入公共部分：在其他页面中，我们可以使用HTML的<object>标签来引入公共部分的代码。<object>标签可以将一个外部HTML文档嵌入到当前页面中。

<!-- 引入头部 -->
<object data=\"header.html\"></object>

<!-- 页面内容 -->

<!-- 引入尾部 -->
<object data=\"footer.html\"></object>

3. 使用JavaScript的fetch API加载公共部分：如果浏览器支持JavaScript的fetch API，我们也可以使用它来加载公共部分的HTML代码，并将其插入到页面中的相应位置。

<!-- 创建一个容器用于插入公共部分 -->
<div id=\"header\"></div>

<!-- 页面内容 -->

<div id=\"footer\"></div>

<script>
  // 使用fetch API加载头部公共部分
  fetch('header.html')
    .then(response => response.text())
    .then(data => {
      document.getElementById('header').innerHTML = data;
    });

  // 使用fetch API加载尾部公共部分
  fetch('footer.html')
    .then(response => response.text())
    .then(data => {
      document.getElementById('footer').innerHTML = data;
    });
</script>

通过以上方法，我们可以在开发静态页面时，不依赖Node相关的工具，提取出公共部分并引入到其他页面中。这样可以避免重复编写相同的代码，提高代码的复用性和维护性，同时也方便对公共部分进行修改和更新。"