在HTML页面中引入另一个HTML文件内容
一、在标签中使用import引入
include.html
<meta charset="utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- 导入基本样式 -->
<link rel="stylesheet" href="/css/default.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/js/bootstrap.min.js"></script>
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>include标题</title>
<!-- 引入include.html文件内容 -->
<link rel="import" href="include.html" />
</head>
<body>
</body>
</html>
二、使用jQuery导入HTML内容
header.html
<header>
<h1>这是页面顶部内容</h1>
</header>
footer.html
<footer>
<h1>这是页面底部内容</h1>
</footer>
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header id="headerContent"></header>
<div>
这是整个页面的中心内容
</div>
<footer id="footerContent"></footer>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#headerContent").load("header.html");
$("#footerContent").load("footer.html");
});
</script>
</html>
效果展示
