这一小节，我们还是继续练习纯HTML标签的内容，多练一些，把HTML标签练熟。这就像练武功前的扎马步和一些基本功，功底越深，后边才能练更高深的武功。
这一小节，我们用纯HTML标签做一个侧边栏菜单的功能。就像这样：
目录
1 设计需求分析
2 所用到的标签
3 实战代码
1 设计需求分析
我们看这张图，这是我从CSDN文章管理端截的图，你自己的管理端应该也能看到这个侧边栏。那么在做之前，我们分析一下布局：
- 这是一个纵向排列；
- 从首页、管理到数据，很明显，这是一个纵向的列表，我们可以想到ul li 列表标签，对吧；
- 首页，管理，数据左侧都有一个小图标，图标跟后面的文字是横向排列，我们很容易想起行内标签和块级标签；
- 然后内部的 内容管理、评论管理、专栏管理这些呢，又是一个列表；
- 外部的大列表，都是可点可跳转的，内部的子列表呢，也都是可跳转的，我们想起了链接 a 标签。
2 所用到的标签
通过上面分析了布局，我们可以想到一些标签，比如
- 展示图标用的img
- 比如跳转需要的链接 a
- 比如列表需要的 ul li
- 比如为了使相近业务功能放于一个整体容器的div。
3 实战代码
那么我们最终通过以上布局，通过对所用到标签的回忆，可以开发出下面这样的代码内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>
<a href="https://blog.csdn.net/xingyu_qie">
<img src="./files/imgs/home.png" /> 首页
</a>
</li>
<li>
<a href="https://blog.csdn.net/xingyu_qie">
<img src="./files/imgs/manage.png" /> 管理
</a>
<div>
<ul>
<li>
<a href="https://blog.csdn.net/xingyu_qie">内容管理</a>
</li>
<li>
<a href="https://blog.csdn.net/xingyu_qie">评论管理</a>
</li>
<li>
<a href="https://blog.csdn.net/xingyu_qie">专栏管理</a>
</li>
</ul>
</div>
</li>
<li>
<a href="https://blog.csdn.net/xingyu_qie">
<img src="./files/imgs/manage.png" /> 数据
</a>
<div>
<ul>
<li>
<a href="https://blog.csdn.net/xingyu_qie">作品数据</a>
</li>
<li>
<a href="https://blog.csdn.net/xingyu_qie">作品数据</a>
</li>
<li>
<a href="https://blog.csdn.net/xingyu_qie">作品数据</a>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
是不是有点丑，丑点没关系。分析一个设计图的布局，快速反应要用哪个标签。这就是纯HTML实战中需要掌握的能力。
