上查看所有课程
HTML 布局是指网站内容的组织和结构方式。它使网站易于导航。例如，
如您所见，页面上以结构化的方式包含各种内容，例如标题、页脚、主页等。
HTML 布局元素
有各种 HTML 布局元素。它们如下：
<header> 标签
<header> 标签定义文档的头部。例如，
<header>Programiz</header>
<nav> 标签
<nav> 标签表示页面中链接到其他页面或页面内部部分的区域。
<section> 标签
HTML 中的 <section> 标签表示文档中独立的内容部分。要了解更多信息，请访问 HTML <section>。
<article> 标签
HTML 中的 <article> 标签表示一个可以重复使用的自包含内容片段。
<aside> 标签
<aside> 标签用于表示文档中与主要内容间接相关的部分。它最常在文档中用作侧边栏。要了解更多信息，请访问 HTML <aside>。
<footer> 标签
HTML <footer> 标签定义 HTML 文档或部分的页脚。要了解更多信息，请访问 HTML <footer>。
<details> 标签
<details> 标签提供用户可以按需查看或隐藏的附加详细信息。例如，
<details>
<summary>Click me</summary>
<p>Hidden content</p>
</details>
<summary> 标签定义 <details> 元素的可见标题。在此，如果单击 Click me，则会显示 Hidden content。
HTML布局
让我们使用 CSS 创建一个简单的布局。
<body>
<div class="box">
<section class="yellow">
</section>
<aside class="blue">
</aside>
</div>
</body>
<style>
.box {
display: flex;
height: 200px;
}
.blue {
width:65%;
height: 200px;
background-color: blue;
}
.yellow {
width: 35%;
height: 200px;
background-color: yellow;
}
</style>
在上面的示例中，我们创建了一个带有类 box 的 <div>。在其中，我们有一个 <section> 元素和一个 <aside> 元素，分别带有类 yellow 和 blue。我们使用 CSS 来排列这些元素。
请注意代码，
.box {
display: flex;
height: 200px;
}这里，
display: flex- 以行排列方式将盒子并排height: 200 px- 将高度设置为 200 像素
然后，我们还为带有类 blue 和 yellow 的 <div> 使用了 CSS。
.blue {
width:65%;
height: 200px;
background-color: blue;
}.yellow {
width: 35%;
height: 200px;
}这里，
width- 设置<div>的宽度height- 设置<div>的高度background-color- 设置<div>的背景颜色
我们将在 CSS 教程中学习更多关于 CSS 布局的知识。
示例：HTML 布局
<body>
<header>
<h2>Title</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn HTML</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<article>
<h1>Home</h1>
<p>This is a home page.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
<style>
* {
box-sizing: border-box;
}
header {
background-color: lightblue;
text-align: center;
padding: 2px;
font-size: 25px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
footer {
background-color: lightblue;
padding: 10px;
text-align: center;
color: white;
}
section::after {
content: "";
display: table;
clear: both;
}
</style>