HTML表格与列表详解-CSDN博客

本文链接：https://blog.csdn.net/hello_wor1d/article/details/118283232

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、表格
二、无序表有序表自定义表
总结

前言

HTML的知识太多，很难通过一篇周记写全，下面我只举几个知识点。

一、表格

表格在实际开发中很常见，也经常用到举个最简单的例子下面这个张图片就用了表格

下面就详细解释。

表格的标签有table thead tbody tr th td等结构如下图所示：
table是包含整个标签的，是最外层的。thead和tbody类似于html的head和body。tr是行。tr标签内的内容为表格的行。th是头部标签，其内容位于第一行。浏览器显示会加粗居中。td则为普通样式。
若要实现开头的表格效果其头部标签代码为`

<thead>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
</thead>

其body部分代码为`

<tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>456</td>
            <td>123</td>
            <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>

        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
        <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
        </tr>
</tbody>

我们可以看到第二行第一个单元格内容就显示简单的排名，填入数字1即可。第二个单元格同理填如“鬼吹灯”即可。第三个单元格是趋势上升，这里只需在单元格内插入我们提前准备好的图片即可。第三和第四个单元格同理填入数字即可。第五个单元格是需要用到超链接。把文字链到相应的网址即可。超链接使用标签a，属性href。

这样这个简单的表格就完成了。

二、无序表有序表自定义表

2.1 无序表

在这里插入图片描述
无需表如上图所示，其就是简单的排列。至于这三个点，可以通过后续CSS把它消除，目前以html为主，不过多阐释。
无需表用到的标签有ul和li
图片中效果可通过如下代码实现

<body>
    <h4>您喜欢的食物?</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        </li>
    </ul>
</body>

可以看到代码简洁易懂。这里就不过多解释。

2.2 有序表

有序表同理
在这里插入图片描述
其效果通过如下代码实现

<body>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>黎明 500</li>
    </ol>
</body>

2.3 自定义列表

相信大家一定常见如上内容，其就是使用自定义列表实现。当然前面的空格也可以通过CSS修饰，这里也不多解释。自定义列表的第一行是大哥，下面是小弟，下面的小弟都是围绕着大哥来展开的。
实现的代码如下

<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>

总结

前端要素过多，一定要多手打，多回顾才能记牢。