html中引用公共header footer等

最新推荐文章于 2024-07-24 21:45:01 发布

原创最新推荐文章于 2024-07-24 21:45:01 发布 · 3.2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#公共头部header

收录于

header 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何创建并使用公共的header和footer组件，通过将重复的代码片段封装成独立文件，实现页面间的一致性和减少代码冗余。文章展示了具体的HTML结构，以及如何利用jQuery的load方法动态加载这些组件，从而提高网站的开发效率。

<!--新建一个放公共header.html和footer.html两个文件-->
<!--新建的文件里面"只写入"公共的代码部分 不要其他的代码片段或标签 比如:body html标签等-->
<!-- header.html-->
    <div class="header">
	<div class="logo">
		<a href="index.html"><img src=""/></a>
	</div>
	<div class="login">
		<a href="person_center.html" >个人中心</a>
		<a href="login.html" >登录</a>
		<a href="register.html" >注册</a>
		<a href="#" >退出</a>
		<a href="">
			<span><img src="web/img/charge.png" alt="" /></span>
			<span class="name">大灰狼</span>
		</a>		
	</div>
</div>
<!-- 需要公共头部的文件 -->
<!-- index.html-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
	</head>
	<body>
		<div id="header"></div><!--引入的公共头部-->
		<div class="content"></div>	
	</body>
	<script type="text/javascript" src="web/js/jquery-2.2.4.js"></script> <!--js文件-->	
	<script type="text/javascript">
		$("#header").load("header.html");<!--需用js把公共头部加载到当前页面-->
	</script>
</html>