在 HTML 中，可以使用以下方法来实现多个页面共用头部和底部的代码复用：
- 使用
<iframe>元素：可以在每个页面中使用<iframe>元素来包含头部和底部的代码。在每个页面的 HTML 文件中添加以下代码：
<!-- 页面头部 -->
<iframe src="header.html" frameborder="0" width="100%" height="200px"></iframe>
<!-- 页面内容 -->
<!-- 页面底部 -->
<iframe src="footer.html" frameborder="0" width="100%" height="200px"></iframe>
在 src 属性中指定头部和底部代码所在的 HTML 文件的路径。这样可以将头部和底部的代码放在单独的 HTML 文件中，然后通过 <iframe> 元素将它们嵌入到每个页面中。
-
使用服务器端模板引擎：如果你在使用服务器端技术（如PHP、Node.js等），可以使用服务器端模板引擎来实现代码复用。你可以创建一个包含头部和底部代码的模板文件，然后在每个页面中使用模板引擎来渲染这些共用部分。具体的实现方式会根据所用的服务器端技术而有所不同。
-
使用前端框架或库：如果你使用的是前端框架或库，如Vue.js、React等，它们通常提供了组件化的方式来实现代码复用。你可以将头部和底部的代码封装为组件，并在多个页面中引用这些组件，以实现代码复用。
头部和底部代码的 HTML 文件中，引入共享的 CSS 样式文件
在使用 <iframe> 元素嵌入头部和底部代码时，可能会遇到样式无法正常显示的问题。这是因为 <iframe> 元素创建了一个独立的浏览上下文，它与父页面的样式隔离开来。
要解决这个问题，你可以在头部和底部代码的 HTML 文件中，引入共享的 CSS 样式文件。这样，头部和底部的代码将共享相同的样式规则。
例如，你可以在头部和底部的 HTML 文件中添加以下代码：
<link rel="stylesheet" href="shared-styles.css">
其中，shared-styles.css 是一个包含共享样式规则的 CSS 文件。在该 CSS 文件中，你可以定义头部和底部的样式规则，以及其他页面共用的样式规则。
这样，通过引入共享的 CSS 文件，可以确保头部和底部的代码能够正确地应用相同的样式规则，从而解决样式无法显示的问题。
希望这次回答解决了你的问题。如果你还有其他疑问，请随时提问。