【技术教程】HTML 网页引用公共的头部和底部

HTML 静态页面引用公共的头部和底部

方法一:

通过 load() 函数,分别引入公共头部和底部文件;

header.html 顶部页面

<!DOCTYPE html>
<html>
<head>
<link href=”./header.css” rel=”stylesheet”>
</head>
<body>
<div class=”header”>
<h4>头部</h4>
</div>
</body>
</html>

footer.html 底部页面
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class=”footer”>
<h4>这里是底部</h4>
</div>
</body>
</html>

index.html 正文页面
<!DOCTYPE html>
<head></head>
<body>
<!– 顶部导航 –>
<div class=”headerpage”></div>
<!–顶部导航 over–>

<!–中部主体–>
<p>正文部分</p>
<!–中部主体 over–>

<!–footer–>
<div class=”footerpage”></div>
<!–footer over–>
/*引用或下载官网最新js代码*/

</body>
</html>
注意:load 函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的。

方法二:
引用 <object> 来实现
<object type=”text/x-scriptlet” data=”header.html” width=100% height=30></object>

方法三:
HTML5 中的 <embed> 标签
<embed type=”text/html” src=”header.html” />
可乐认为方法一在 HTML 静态页面中的使用是最合适不过的哦。

注意:方法二和方法三必须设置宽和高,高必须固定,设置 auto 会出现页面显示不完整的情况。(亲测方法三会出现滚动条)
这里不提 iframe,主要因为设计网页相对比较困难,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录。

标签

发表评论