在HTML页面中，头尾公用可以通过引入外部CSS样式表和JavaScript文件来实现，下面是一个详细的步骤：
（图片来源网络，侵删）
1、创建一个外部CSS样式表文件（styles.css）和一个外部JavaScript文件（scripts.js）。
2、在HTML页面的头部（head标签内）使用<link>标签引入CSS样式表文件，如下所示：
“`html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
“`
3、在HTML页面的尾部（body标签结束前）使用<script>标签引入JavaScript文件，如下所示：
“`html
<body>
<!页面内容 >
<script src="scripts.js"></script>
</body>
“`
4、在CSS样式表文件中定义需要共享的样式，例如头部和尾部的背景颜色、字体样式等。
“`css
body {
backgroundcolor: #f0f0f0;
fontfamily: Arial, sansserif;
}
.header, .footer {
backgroundcolor: #333;
color: #fff;
padding: 10px;
textalign: center;
}
“`
5、在JavaScript文件中编写需要在页面加载完成后执行的代码，例如初始化一些功能或事件处理程序。
“`javascript
window.onload = function() {
// 初始化代码或事件处理程序
};
“`
6、在HTML页面的头部和尾部分别添加相应的元素，并应用定义的样式。
“`html
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">这是头部</div>
<!页面内容 >
<div class="footer">这是尾部</div>
<script src="scripts.js"></script>
</body>
“`
通过以上步骤，你可以在HTML页面中实现头尾公用的效果，CSS样式表中定义的样式将应用于头部和尾部的元素，而JavaScript文件中编写的代码将在页面加载完成后执行。
评论(0)