创建包含多个标签的网页
时间: 2023-11-13 12:02:35 浏览: 53
要创建包含多个标签的网页,你需要使用 HTML 和 CSS。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>多标签网页</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体 */
margin: 0; /* 去掉默认边距 */
}
/* 定义标签样式 */
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.nav {
background-color: #eee;
padding: 10px;
text-align: center;
}
.content {
padding: 20px;
}
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header class="header">
<h1>这是页眉</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</nav>
<div class="content">
<h2>这是内容</h2>
<p>这是一段文本。</p>
</div>
<footer class="footer">
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
在上面的代码中,我们定义了四个标签:`header`、`nav`、`div` 和 `footer`,并为每个标签设置了样式。`header` 和 `footer` 标签用于定义网页的页眉和页脚,`nav` 标签用于定义导航栏,`div` 标签用于包含页面内容。
注意,我们使用了 CSS 样式来定义标签的外观和布局。在 `<style>` 标签中,我们为每个标签定义了不同的样式,如背景颜色、内边距和文本对齐方式等。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)