html静态页面引入公共html页面
时间: 2023-10-01 07:02:16 浏览: 158
可以使用HTML的<iframe>标签来引入公共的HTML页面,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<!-- 引入公共页面 -->
<iframe src="header.html" frameborder="0"></iframe>
</header>
<main>
<!-- 页面内容 -->
</main>
<footer>
<!-- 引入公共页面 -->
<iframe src="footer.html" frameborder="0"></iframe>
</footer>
</body>
</html>
```
在上面的代码中,<iframe>标签的src属性指定了要引入的公共页面的路径,如header.html和footer.html。这样,页面中的头部和底部内容就可以在多个页面中复用,减少了重复的代码。
相关问题
html静态页面怎么用include 引入公共html页面
可以使用以下代码将公共的HTML页面引入到静态页面中:
```html
<!DOCTYPE html>
<html>
<head>
<title>静态页面</title>
</head>
<body>
<!-- 引入头部 -->
<?php include 'header.html'; ?>
<!-- 页面内容 -->
<p>这是静态页面的内容</p>
<!-- 引入底部 -->
<?php include 'footer.html'; ?>
</body>
</html>
```
其中,`header.html` 和 `footer.html` 是公共的HTML页面,可以在需要的地方引入。使用 `<?php include '文件路径'; ?>` 的方式可以将文件引入到当前页面中。
景点介绍静态页面html
以下是一个简单的景点介绍静态页面的HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>景点介绍</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到XXX景区</h1>
<nav>
<ul>
<li><a href="#">景点介绍</a></li>
<li><a href="#">交通指南</a></li>
<li><a href="#">门票信息</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>景点介绍</h2>
<p>XXX景区位于XXX市XXX区,是一处优美的旅游胜地。景区内有丰富的自然资源和人文景观,包括...</p>
</section>
<section>
<h2>旅游攻略</h2>
<p>1. 最佳游玩时间:春季和秋季是最适合游览的季节;</p>
<p>2. 交通方式:可以乘坐公共汽车、出租车等;</p>
<p>3. 门票信息:成人票XX元/人,儿童票XX元/人;</p>
</section>
</main>
<footer>
<p>版权所有 © XXX景区</p>
</footer>
</body>
</html>
```
在这个示例中,我们使用了HTML5的基本结构,包括`<head>`、`<body>`等元素。头部中定义了文档的标题、字符集和响应式布局的视口信息,并引入了一个CSS样式表文件。主体部分分为头部、主要内容和页脚,其中头部包含了网站的标题和导航栏,主要内容包含了两个节(section)分别介绍景点和旅游攻略,页脚包含了版权信息。通过这些HTML元素的组合,我们可以创建一个简单但功能齐全的景点介绍静态页面。
阅读全文