<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- div -->
<div>
上
<div>
<img src="" alt="公司logo">
</div>
<div>
<a href="">跳转页1</a>
<a href="">跳转页2</a>
<a href="">跳转页3</a>
</div>
</div>
<div>
中
<div>左</div>
<div>右</div>
</div>
<div>
下
<div>
©
</div>
<div>
<a href="">跳转页1</a>
<a href="">跳转页2</a>
<a href="">跳转页3</a>
</div>
</div>
<!-- 语义化的容器 -->
<header>
<!-- 页头 -->
<div>
<img src="" alt="公司logo">
</div>
<div>
<a href="">跳转页1</a>
<a href="">跳转页2</a>
<a href="">跳转页3</a>
</div>
</header>
<article>
<!-- 整篇文章 -->
<h1>标题</h1>
<div>时间 作者 阅读人数</div>
<section>
<!-- 文章章节 -->
<p>章节1</p>
<p>章节1</p>
<p>章节1</p>
</section>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum aut quia voluptas modi porro odit quasi nostrum, est quisquam ut? Quia nisi corporis cupiditate accusantium consectetur earum, voluptatibus ad sit.
</article>
<aside>
<!-- 侧边栏 -->
<ol>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ol>
</aside>
<footer>
<!-- 页脚 -->
<div>
版权信息©
</div>
<div>
<a href="">联系链接1</a>
<a href="">联系链接2</a>
<a href="">联系链接3</a>
</div>
</footer>
</body>
</html>
中
左
右
标题
时间 作者 阅读人数
章节1
章节1
章节1