网页开发从无到有——html前端学习（四）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40301728/article/details/125531580

本文详细介绍了HTML中列表和表格的使用方法，包括无序列表、有序列表、自定义列表及表格的基本结构、水平和垂直标题、单元格合并等，并解释了相关标签的含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、列表的使用

列表在网页中是最常用的几种样式之一了，下面就将列表的每种形式列举出来，以供参考使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
    <h1>无序列表</h1>
    <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>banana</li>
    </ul>
    <h1>有序列表</h1>
    <ol start="994">
        <li>Apple</li>
        <li>Orange</li>
        <li>banana</li>
    </ol>

    <h1>自定义列表</h1>
    <dl>
        <dt>Color</dt>
        <dd>- Red Pink Black</dd>
        <dt>Language</dt>
        <dd>- Java Python C#</dd>
    </dl>

    <h1>不同编号的有序列表（下面就是他们的type)</h1>
    <ol type="a">
        <li>a</li>
        <li>1</li>
        <li>A</li>
        <li>I</li>
        <li>i</li>
    </ol>

    <h1>不同编号的无序列表（下面就是他们的type)</h1>
    <ul style="list-style-type:square">
        <li>list-style-type:disc</li>
        <li>list-style-type:circle</li>
        <li>list-style-type:square</li>
    </ul>

    <h1>列表可以随机无限嵌套</h1>
    <ol>
        <li>data1</li>
        <li>
            <ul style="list-style-type:square">
                <li>unorder1</li>
                <li>unorder2</li>
                <li>
                    <dl>
                        <dt>element</dt>
                        <dd>-a b c d</dd>
                    </dl>
                </li>
            </ul>
        </li>
        <li>data2</li>
    </ol>
</body>
</html>

展示结果如下：
在这里插入图片描述

二、表格的使用

表格同样作为网页中是最常用的几种样式之一，下面将列表的形式列举出来，以供参考使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>


    <h1>水平标题:</h1>
    <table border="1">
    <!--  设置表头  -->
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr>
        <td>row 1, column 1</td>
        <td>row 1, column 2</td>
        <td>row 1, column 3</td>
    </tr>
    <tr>
        <td>row 2, column 1</td>
        <td>row 2, column 2</td>
        <td>row 2, column 3</td>
    </tr>
    </table>



    <h1>垂直表格:</h1>
    <caption>这是标题</caption>
    <table border="1">
    <tr>
        <th>第一行</th>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <th>第二行</th>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
    </table>



    <h1>跨单元格（单元格合并） 水平合并</h1>
    <table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td colspan="2" align="middle">555 77 854</td>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
    </table>



    <h1>跨单元格（单元格合并） 垂直合并</h1>
    <table border="1">
    <tr>
        <th>Name</th>
        <td>MrHong</td>
    </tr>
    <tr>
        <th rowspan="2">Name</th>
        <td >MrsXu</td>
    </tr>
    <tr>
        <td >XiaoHong</td>
    </tr>
    <tr>
        <th>Name</th>
        <td>Kid</td>
    </tr>
    </table>

    <h1>表格内特殊填写</h1>
    <table border="1" align="middle">
        <tr>
            <td>
                <ul>
                    <li>hong</li>
                    <li>xu</li>
                </ul>
            </td>
            <td>
                <table border="1">
                    <tr>
                        <td>A</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</body>
</html>

在这里插入图片描述

上面最难记的肯定是那些奇奇怪怪的标签了！如果我们能明白这些标签代表的含义就能很快地记下来

敲黑板：

标签的含义：
ul是unordered lists的缩写 (无序列表)
li是list item的缩写（列表项目）
ol是ordered lists的缩写（有序列表）
dl是definition lists的英文缩写 (自定义列表)
dt是definition term的缩写 (自定义列表组)
dd是definition description的缩写（自定义列表描述）
nl是navigation lists的英文缩写（导航列表）
tr是table row的缩写（表格中的一行）
th是table header cell的缩写（表格中的表头）
td是table data cell的缩写（表格中的一个单元格）