如何在html5页面中引入公共的html页面
时间: 2024-02-27 18:55:30 浏览: 20
可以使用HTML5的`<object>`标签或者`<iframe>`标签引入公共的HTML页面。其中,`<object>`标签可以在页面中嵌入外部HTML文档,并且可以通过`data`属性指定外部文档的URL,例如:
```html
<!-- common.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公共部分</title>
</head>
<body>
<p>这是公共部分的内容</p>
</body>
</html>
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<!-- 引入公共部分 -->
<object data="common.html"></object>
<p>这是首页的内容</p>
</body>
</html>
```
另外,`<iframe>`标签也可以用于在页面中嵌入其他HTML页面,例如:
```html
<!-- common.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公共部分</title>
</head>
<body>
<p>这是公共部分的内容</p>
</body>
</html>
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<!-- 引入公共部分 -->
<iframe src="common.html"></iframe>
<p>这是首页的内容</p>
</body>
</html>
```
`<iframe>`标签也可以通过设置`width`、`height`等属性来控制嵌入页面的样式。需要注意的是,由于`<iframe>`是在页面中嵌套另一个页面,所以可能会影响页面性能和SEO优化。