【HTML5】使用结构标签进行网页布局
程序员文章站
2022-03-14 08:54:00
...
使用结构标签进行网页布局
| 标签名 | 说明 |
|---|---|
| <header></header> | 标记头部区域的内容 |
| <footer></footer> | 标记脚部区域的内容 |
| <section></section> | Web页面中的一块独立区域 |
| <article></article> | 独立的文章内容 |
| <aside></aside> | 相关内容或应用（常用于侧边栏） |
| <nav></nav> | 导航类辅助内容 |
HTML Code：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>结构标签</title>
<style type="text/css">
header,section,footer{
border: 1px solid black;
}
header{
height: 100px;
}
section{
height: 400px;
}
footer{
height: 100px;
}
</style>
</head>
<body>
<header><h2>网页顶部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页底部</h2></footer>
</body>
</html>
Result ：