这一小节，我们还是练习HTML标签的应用，目的就是
- 将一些常用的HTML标签熟练的应用；
- 看见一个设计稿，我们快速反应，看看如何布局；
- 只有心有布局，才能很快知道如何下手，应该使用哪些HTML标签，每个标签该放哪些内容，是上下布局，还是左右布局；
- 练的多了，熟了，自然开发起来就快了。
所以，我们这个专栏：WEB前端小白从这里出发 ，不单单是讲解前端的基本知识，会慢慢的拓展到实战，喜欢的小伙伴可以订阅一下专栏，如果觉得内容有用，可以给个回复评论，或者告诉我，文章底部有联系方式。让我知道我不是一个人在写博客，而是真的有用，真的有人在看，好吧。
1 本节设计稿
这一小节呢，我们练习用纯HTML标签知识，做一个博客文档头部内容。就像这样：
怎么样，猛地一看好零碎，对吧，内容还真不少。项目开发嘛，各种各样的页面都可能会遇到，练着练着就熟了。
2 HTML设计分析
我们看上面的设计稿，可以这样分析一下需求内容：
- 一共有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" />
<span>经海路大白狗</span>
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" />
<span>于 2024-07-23 16:50:02 发布</span>
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" />
<span>阅读量510</span>
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" />
<span>收藏20</span>
<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2023Black.png" />
<span>点赞数17</span>
<span>公开</span>
</div>
3.3 文章标签
第三行，有分类专栏的显示，还有文章的所属标签的显示。跟第二行差不多。其实下一行专栏的数据信息，也跟第二行差不多，我们就不做第四行了。这里把第三行做一下。
但是，你如果正在练习HTML标签，你一定不要偷懒哦，一定要坚持着把第四行做了。
<div>
<span>分类专栏：</span>
<a href="https://blog.csdn.net/xingyu_qie/category_12719311.html">WEB前端小白从这里出发</a>
<span>文章标签：</span>
<a href="https://blog.csdn.net/xingyu_qie/category_12719311.html">前端</a>
<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标签布局，如果还能让人一眼看出来你做的是什么，那么就算成功了。
本文转载自: https://blog.csdn.net/xingyu_qie/article/details/140789914
版权归原作者 经海路大白狗 所有， 如有侵权，请联系我们删除。
版权归原作者 经海路大白狗 所有， 如有侵权，请联系我们删除。