如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)
时间: 2023-12-23 18:19:03 浏览: 30
可以使用HTML的模板技术来实现多个HTML文件公用一个头部和尾部。具体实现可以使用以下两种方式:
1. 使用HTML的iframe标签:可以将头部和尾部分别编写成独立的HTML文件,例如`header.html`和`footer.html`,然后在需要引用的HTML文件中使用iframe标签来引入这些文件。例如:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<iframe src="header.html" width="100%" height="100"></iframe>
<div class="content">
<!-- 页面内容 -->
</div>
<iframe src="footer.html" width="100%" height="100"></iframe>
</body>
</html>
```
这样,在每个需要引用头部和尾部的HTML文件中,只需要引用相同的`header.html`和`footer.html`文件即可。
2. 使用HTML的模板标签:可以在HTML中定义可复用的代码模板,例如`header-template`和`footer-template`,然后在需要引用的HTML文件中使用template标签来引用这些模板。例如:
```
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<template id="header-template">
<!-- 头部内容 -->
</template>
<template id="footer-template">
<!-- 尾部内容 -->
</template>
</head>
<body>
<header>
<template name="header-template"></template>
</header>
<div class="content">
<!-- 页面内容 -->
</div>
<footer>
<template name="footer-template"></template>
</footer>
</body>
</html>
```
这样,在每个需要引用头部和尾部的HTML文件中,只需要引用相同的模板即可。
以上两种方式都可以实现多个HTML文件公用一个头部和尾部,具体使用哪种方式可以根据实际情况选择。