html页面布局模板
时间: 2023-07-27 07:13:01 浏览: 101
以下是一个简单的 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="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">链接 1</a></li>
<li><a href="#">链接 2</a></li>
<li><a href="#">链接 3</a></li>
<li><a href="#">链接 4</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>标题 1</h1>
<p>内容 1</p>
</section>
<section>
<h2>标题 2</h2>
<p>内容 2</p>
</section>
<section>
<h2>标题 3</h2>
<p>内容 3</p>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
说明:
- `<!DOCTYPE html>`:声明文档类型为 HTML5。
- `<html>`:HTML 页面的根元素。
- `<head>`:包含页面元数据,例如页面标题、字符编码和样式表链接。
- `<title>`:定义页面标题,在浏览器标签上显示。
- `<meta>`:定义文档元数据,例如字符编码和视口大小。
- `<link>`:链接外部样式表。
- `<body>`:包含页面的主要内容。
- `<header>`:包含页面的头部,例如导航。
- `<nav>`:定义导航。
- `<ul>`:定义无序列表。
- `<li>`:定义列表项。
- `<a>`:定义链接。
- `<main>`:包含页面的主要内容。
- `<section>`:定义一个区块。
- `<h1>`、`<h2>`:定义标题。
- `<p>`:定义段落。
- `<footer>`:包含页面的页脚,例如版权信息。
阅读全文