HTML 布局
2025-04-24
17
参考资料
HTML 布局
基本介绍
HTML 布局是指使用 HTML 元素和 CSS 样式来组织和排列网页内容的结构方式。合理的布局能提升用户体验和页面可读性。
常用布局标签
1. <div>
用途：块级容器，用于分组内容
特点：默认占满整行
示例：
<div id="header">这是头部</div>
2. <span>
用途：内联容器，用于小范围文本分组
特点：不换行
示例：
<p>这是<span class="highlight">重点</span>内容</p>
3. <header>
用途：定义文档或节的页眉
示例：
<header> <h1>网站标题</h1> </header>
4. <nav>
用途：定义导航链接
示例：
<nav> <a href="/">首页</a> <a href="/about">关于</a> </nav>
5. <section>
用途：定义文档中的节
示例：
<section> <h2>章节标题</h2> <p>章节内容...</p> </section>
6. <article>
用途：定义独立的自包含内容
示例：
<article> <h2>文章标题</h2> <p>文章内容...</p> </article>
7. <aside>
用途：定义侧边栏内容
示例：
<aside> <h3>相关链接</h3> <ul>...</ul> </aside>
8. <footer>
用途：定义文档或节的页脚
示例：
<footer> <p>版权信息 © 2023</p> </footer>
CSS 布局扩展
1. Flexbox 布局
.container {
display: flex;
justify-content: space-between;
align-items: center;
}2. Grid 布局
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}3. 浮动布局
.float-left {
float: left;
width: 30%;
}4. 定位布局
.absolute {
position: absolute;
top: 10px;
left: 10px;
}完整布局示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 200px 1fr;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
</style>
</head>
<body>
<header>网站标题</header>
<nav>导航菜单</nav>
<main>主要内容</main>
<footer>页脚信息</footer>
</body>
</html>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
