你不睡，我不睡，你看我兩多般配
果然程序猿和程序媛還是最般配的
如何實現多個.html靜態頁，引用同一個header.html 和footer.html 文件
方法一：
公共頭文件
//不用寫標準的html文檔格式
<div>
頭部內容
</div>
公共尾部文件：footer.html
//不用寫標準的html文檔格式
<div>
頁腳內容
</div>
js文件：
當前方法：通過load()函數，引入公共頭部和尾部文件;
代碼預覽：
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo演示</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 頂部導航 -->
<div class="headerpage"></div>
<!--頂部導航 over-->
<!--中部主體-->
<p>···代碼省略···</p>
<!--中部主體 over-->
<!--footer-->
<div class="footerpage"></div>
<!--footer over-->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
/*公共部分
* 導航欄
* footer CopyRight
*/
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
});
</script>
</body>
</html>
在header.html和footer.html文件中，並非是標準的html文檔格式！
與此同時，通過index.html中的jQuery函數load()將上述的兩個公共文件引入進來，從而形成一個完整的頁面；
並且，不會影響到其他頁面對於公共文件的引用和使用；
問題：
解決方法:load函數裏最好不要寫本地的文件，容易引起跨域問題導致瀏覽器找不到頁面，我這裏是用域名來解決的.
把本地文件部署到Tomcat也是可以找到的
方法二：實現
<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>
方法三：HTML5 中的 標籤
<embed type="text/html" src="header.html" />
順便說一下
如何把他人的網站引入到自己的網頁模塊中
譬如：我想把我的csdn博客引入到我的網頁中。
這裏我使用了iframe標籤
<iframe src="https://blog.csdn.net/qq_43009710" marginWidth=0 marginHeight=0 frameBorder=0 width=1200 height=800 scrolling="yes"></iframe>
我是樂樂呀，感謝您的閱讀。如果您覺得不錯，那就點個贊吧，您的支持是我最大的動力。謝謝😜
以上均是個人觀點，有錯的地方還請大家指正。感謝您閱讀。