【HTML入门】第十九课 - 【实战】做一个简单的博客头部

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

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

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

目录

1 本节设计稿

2 HTML设计分析

3 实战部分

3.1 标题

3.2 第二行数据行

3.3 文章标签

3.4 文字内容

3.5 看一下效果

1 本节设计稿

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

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

2 HTML设计分析

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

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

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

3 实战部分

3.1 标题

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

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

3.2 第二行数据行

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

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

<div>
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" />
            &nbsp;&nbsp;
            <span>经海路大白狗</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" />
            &nbsp;&nbsp;
            <span>于 2024-07-23 16:50:02 发布</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" />
            <span>阅读量510</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" />
            <span>收藏20</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Black.png" />
            <span>点赞数17</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>公开</span>
        </div>

3.3 文章标签

第三行，有分类专栏的显示，还有文章的所属标签的显示。跟第二行差不多。其实下一行专栏的数据信息，也跟第二行差不多，我们就不做第四行了。这里把第三行做一下。

但是，你如果正在练习HTML标签，你一定不要偷懒哦，一定要坚持着把第四行做了。

<div>
            <span>分类专栏：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://blog.csdn.net/xingyu_qie/category_12719311.html">WEB前端小白从这里出发</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>文章标签：</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://blog.csdn.net/xingyu_qie/category_12719311.html">前端</a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://blog.csdn.net/xingyu_qie/category_12719311.html">html</a>
        </div>

3.4 文字内容

接下来，就是文章主体文字内容了。还记得文章段落用哪个标签吧？P标签，对吧。那你还记得P标签是块级标签，还是行内标签吗？哈哈，多练着使用，就记住了。

<p>我们利用一些章节做了HTML入门的标签学习，其实HTML标签呢，就是一个一个标签，他们都有独自的含义。记住这句话，他们有独自的含义。</p>
        <p>他们就像水浒传里的英雄们一样，各自有各自的本领，又像复仇者联盟里的英雄们一样，他们各自有自己的章节。但不得不说，只有运用到实战中，只有把他们组合起来，才能发挥更大的作用。要不然，就只能是零件一样的东西，只有通过实战组合起来，他们才能发挥作用。</p>

3.5 看一下效果

我们看一下效果，如果不使用CSS，只是单纯的用HTML标签布局，如果还能让人一眼看出来你做的是什么，那么就算成功了。