如何轻松实现 HTML 网站所有页面头部和尾部内容一致
你可以创建一个包含头部和尾部内容的 HTML 文件，并在每个页面中使用 HTML 的 <iframe> 元素将该文件嵌入到页面中。
首先，创建一个名为 header_footer.html 的文件，该文件包含头部和尾部的内容。例如：
<!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
</head>
<body>
<!-- 头部内容 -->
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href='page1.html'>页面1</a></li>
<li><a href='page2.html'>页面2</a></li>
<li><a href='page3.html'>页面3</a></li>
</ul>
</nav>
</header>
<!-- 页脚内容 -->
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
然后，在每个页面中使用 <iframe> 元素嵌入 header_footer.html 文件。例如，在页面1中：
<!DOCTYPE html>
<html>
<head>
<title>页面1</title>
</head>
<body>
<iframe src='header_footer.html' frameborder='0' scrolling='no'></iframe>
<!-- 页面1 的其他内容 -->
<h2>页面1的内容</h2>
<p>这是页面1的内容。</p>
</body>
</html>
同样，在页面2和页面3中也使用相同的方式嵌入 header_footer.html 文件。
这样做的好处是，如果你想要修改头部或者尾部的内容，只需要在 header_footer.html 文件中进行修改，所有嵌入了该文件的页面都会自动更新。这样可以避免在每个页面中都进行修改。
原文地址: https://www.cveoy.top/t/topic/qC66 著作权归作者所有。请勿转载和采集!