【HTML入门】第二十一课 - 【实战】做一个简单的数据表格

经海路大白狗

于 2024-08-01 15:07:10 发布

阅读量246

点赞数 5

分类专栏： WEB前端小白从这里出发文章标签： html 前端学习

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140847441

版权

WEB前端小白从这里出发专栏收录该内容

25 篇文章 4 订阅

订阅专栏

这一小节，我们继续练习纯HTML，开发一个简单的数据表格吧。就像这样：

1 设计需求分析

2 用到的标签

3 实战代码

1 设计需求分析

做之前，我们仍然是分析一下这张图，以便更好的更快的开发出来。

分2个大部分
第一个大部分是第一行，有个小图标，后面跟着“创作历程”4个字；
第二个大部分呢，是一个表格。
表格又分两行四列
而每一列呢，里面的内容又是可点击可跳转的
每一列呢，又分两小行，第一行是篇数，第二行是年份
还有个重点呢，就是第一小行字体稍微大一些，第二小行字体稍微小一些

2 用到的标签

做了布局的设计分析以后呢，我们就要快速的想一想，都会用到哪些标签，这样心理有个初步判断，手里的代码就敲的更快了。都说HTML编写不算开发，逻辑简单。哈哈，其实并不难，但这都源于最初的基础足够扎实。

那么包含的标签都会有哪些呢？来看一下：

分2部分，那么就是2个块元素，也就是2个 div 标签；
第一行，是2个行内元素，一个是图标，想到了 img 标签，第二个文字，我们可以用 span 标签
第二部分呢，明显是个表格，所以我们使用 table tr td 的组合
需要注意的是，在项目开发布局中，其实越来越不推荐使用 table 标签了，因为他有一定的弊端，都是使用 div + css 的方式来布局。但这里为了练习纯HTML标签的使用呢，还是先用 table 来做
每个单元格 td 标签里呢，都是可点击可跳转的，所以我们用 a 标签将其他内容包裹起来；
里面分2小行，所以需要2个块级元素，比如div p 都行。但如果不用css的话，很难区分字体的大小不同，所以我们想到了 h1 到 h6标签，这个可以区分字体的大小，对吧。

3 实战代码

其实HTML实战没多少内容，就是分析一下部分，想一想这些标签们，用着用着就熟了。我们先一小块一小块的实战，等学了CSS，我们做大一些的，漂亮一些的页面。慢慢的，学校期末要求的那些页面们，我们就实战出来了。

下面看一下这一小节的实战代码部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div>
            <img src="./files/imgs/time.png" />
            &nbsp;&nbsp;
            创作历程
        </div>
        <div>
            <table>
                <tr>
                    <td width="90">
                        <a href="https://blog.csdn.net/xingyu_qie">
                            <h3>260篇</h3>
                            <h5>2024年</h5>
                        </a>
                    </td>
                    <td width="90">
                        <a href="https://blog.csdn.net/xingyu_qie">
                            <h3>93篇</h3>
                            <h5>2023年</h5>
                        </a>
                    </td>
                    <td width="90">
                        <a href="https://blog.csdn.net/xingyu_qie">
                            <h3>103篇</h3>
                            <h5>2022年</h5>
                        </a>
                    </td>
                    <td width="90">
                        <a href="https://blog.csdn.net/xingyu_qie">
                            <h3>3篇</h3>
                            <h5>2020年</h5>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </body>

</html>