HTML 静态页面引用公共的头部和底部
方法一：文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
通过 load() 函数，分别引入公共头部和底部文件；文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
header.html 顶部页面文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
<!DOCTYPE html>
<html>
<head>
<link href="./header.css" rel="stylesheet">
</head>
<body>
<div class="header">
<h4>头部</h4>
</div>
</body>
</html>文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
footer.html 底部页面
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="footer">
<h4>这里是底部</h4>
</div>
</body>
</html>文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
index.html 正文页面
<!DOCTYPE html>
<head></head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
<!--中部主体-->
<p>正文部分</p>
<!--中部主体 over-->文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
<!--footer-->
<div class="footerpage"></div>
<!--footer over-->
/*引用或下载官网最新js代码*/文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
</body>
</html>
注意：load 函数里最好不要写本地的文件，容易引起跨域问题导致浏览器找不到页面，我这里是用域名来解决的。文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
方法二：
引用 <object> 来实现
<object type="text/x-scriptlet" data="header.html" width=100% height=30></object>文章源自灵鲨社区-https://www.0s52.com/jc/jsjc/4889.html
方法三：
HTML5 中的 <embed> 标签
<embed type="text/html" src="header.html" />
可乐认为方法一在 HTML 静态页面中的使用是最合适不过的哦。
注意：方法二和方法三必须设置宽和高，高必须固定，设置 auto 会出现页面显示不完整的情况。（亲测方法三会出现滚动条）
这里不提 iframe，主要因为设计网页相对比较困难，占用线程较多，速度慢，而且也不利于搜索引擎的对头尾的收录。
评论