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

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

因为这里我们主要实战练习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>