<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
border-radius: 10px;
}
header,
nav,
footer {
height: auto;
}
header,
nav,
footer,
article,
aside {
border: 1px solid #1e9fff;
text-align: center;
font-size: 16px;
color: black;
margin: 10px auto;
}
section article,
section aside {
display: inline-block;
height: 300px;
}
section article {
width: 60%;
}
section aside {
width: 39%;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
hgroup {
height: auto;
}
aside {
vertical-align: top;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<!-- 标题组合 -->
<hgroup>
<h1>标题组合1</h1>
<h2>标题组合2</h2>
</hgroup>
</header>
<!-- 导航 -->
<nav>
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</nav>
<!-- 主体 -->
<main>
<!-- 独立内容 -->
<article>
<!-- 区域-划分快 -->
<section>
<article>
<header>独立内容头部————1</header>
<section>独立内容头部————正文</section>
<footer>独立内容底部————2</footer>
</article>
<aside>侧边导航-辅助信息 自由发挥 可以是ul、a标签</aside>
</section>
<section>
<!-- 描述图像或视频 -->
<figure>
<!-- 描述图像或视频标题部分 -->
<figcaption>描述图像或视频标题部分</figcaption>
</figure>
</section>
<section></section>
</article>
<aside>侧边导航-辅助信息</aside>
</main>
<!-- 底部 -->
<footer>底部导航</footer>
</body>
</html>
~~如果觉得还不够可以在b站上看一些视频或者阅读《程序员面试笔试宝典》