这一小节，我们还是练习HTML标签的应用，目的就是

将一些常用的HTML标签熟练的应用；看见一个设计稿，我们快速反应，看看如何布局；只有心有布局，才能很快知道如何下手，应该使用哪些HTML标签，每个标签该放哪些内容，是上下布局，还是左右布局；练的多了，熟了，自然开发起来就快了。

所以，我们这个专栏：WEB前端小白从这里出发 ，不单单是讲解前端的基本知识，会慢慢的拓展到实战，喜欢的小伙伴可以订阅一下专栏，如果觉得内容有用，可以给个回复评论，或者告诉我，文章底部有联系方式。让我知道我不是一个人在写博客，而是真的有用，真的有人在看，好吧。

目录

1 本节设计稿

2 HTML设计分析

3 实战部分

3.1 标题

3.2 第二行数据行

3.3 文章标签

3.4 文字内容

3.5 看一下效果

1 本节设计稿

 这一小节呢，我们练习用纯HTML标签知识，做一个博客文档头部内容。就像这样：

怎么样，猛地一看好零碎，对吧，内容还真不少。项目开发嘛，各种各样的页面都可能会遇到，练着练着就熟了。

2 HTML设计分析

我们看上面的设计稿，可以这样分析一下需求内容：

一共有5行内容；第一行是标题；第二行有“原创”，有作者昵称，有发布时间，有阅读量，有收藏量，有点赞量，还有是否公开；很多数量前面呢，又有小图标，对吧第三行是分类专栏名称，有文章的标签第三行除了正常的显示，我们注意看，专栏名称是个链接，可以跳转；标签也是链接，也需要跳转，所以要想到哪个标签？第四行呢，是专栏的名称，订阅量，专栏中的文章数量接下来就是博客的主体内容

因为这里我们主要实战练习HTML标签的应用，不适用CSS的话，网页可能会显得比较丑。但目的就是，在不使用CSS的情况下，我们还能把主体内容给绘制出来。

3 实战部分

3.1 标题

第一行是标题，我们想到了H1 到 H6 标签，对吧。

<code><h1>【HTML入门】第十八课 - 【实战】做一个百度顶部导航条</h1>

3.2 第二行数据行

第二行呢，有很多数据，我们暂且称之为数据行。

这里我们就要想到，用一个DIV标签，与第一行的标题标签换行显示。然后DIV标签下面呢，这些数量应该成一排显示，而不换行。

<div>

<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" />code>

  

<span>经海路大白狗</span>

    

<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" />code>

  

<span>于 2024-07-23 16:50:02 发布</span>

    

<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" />code>

<span>阅读量510</span>

    

<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" />code>

<span>收藏20</span>

    

<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Black.png" />code>

<span>点赞数17</span>

    

<span>公开</span>

</div>

3.3 文章标签