HTML列表与表格：语义与表单应用-优快云博客

本文介绍了HTML中的列表标签，包括无序列表、有序列表和定义列表，以及它们在不同场景下的应用。接着讲解了表格标签的重要性和表格结构，如caption、thead、tbody和tfoot的作用。此外，还探讨了表单元素和如何收集用户信息，涵盖了基本的表单格式和常用表单元素。

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

1.1列表标签

列表标签的作用: 给一堆数据添加列表语义, 也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

分类：无序列表（最多）、有序列表（最少）、定义列表（其次）

无序列表：没有先后之分，例如，中国的美食

有序列表：有先后之分，例如，排行榜

1.2无序列表

<body>
<!-- type的值的使用
        disc 默认值 实心圆
        circle 空心圆
        square 实心方块 -->
<ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>
</body>

应用场景

1.新闻列表 2.商品列表 3.导航条

1.3有序列表

<!-- type取值
        1  顺序为1 2 3 4……
        A  顺序为A B C D……
        a  顺序为a b c d……
        以此类推 -->
    <ol type="1">
        <li>珠穆朗玛峰</li>
        <li>乔戈里峰</li>
        <li>干城章嘉峰</li>
    </ol>

1.4定义列表

<dl>
        <!-- dt 列表标题 -->
        <dt>钓鱼岛</dt>
        <!-- dd 对列表标题的描述 -->
        <dd>钓鱼岛是中国的</dd>
        <dt>小男孩</dt>
        <dd>小男孩是日本的</dd>
    </dl>

应用场景

网站尾部的相关信息

做图文混排

2.1表格标签

表格标签作用: 用来给一堆数据添加表格语义其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

<body>
    <!-- 对齐 table tr td 设置水平对齐 align:left center right -->
    <!-- table 标签就是一个表格 -->
    <!-- tr 一个代表一行 -->
    <!-- td 一个代表一列 -->
    <!-- cellspacing 单元格与单元格的外边距 cellpadding 单元格与内容的内边距 -->
    <!-- 边框合并 cellspacing="0"
        利用css样式
         -->
    <table cellspacing="0" cellpadding="3" border="1" width="300px" height="200px" align="center">
        <tr>
            <!-- th是表头标签  -->
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <!-- <tr align="center" valign="bottom"> -->
            <!-- valign是垂直对齐 top mid bottom -->
            <td valign="top">张三</td>
            <!-- <td valign="top">张三</td> -->
            <td>15</td>
            <td>男</td>
        </tr>
    </table>

使用cellspacing=0合并的边框，虽然放大了看起来有一些立体感，但还是不美观，而细线表格能使得边框变为一条线

细线表格

<table bgcolor="black" cellspacing="1">
        <tr bgcolor="white">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr bgcolor="white">
            <td>李四</td>
            <td>15</td>
            <td>男</td>
        </tr>
    </table>

2.2完整的表格结构

    <!-- 完整的表格结构 -->
    <table border="1">
        <!-- 表格的标题标签 -->
        <caption align="left">个人信息</caption>
        <!-- 表头标签 -->
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <!-- 标题标签 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>女</td>
                <td>18</td>
            </tr>
        </tbody>
        <!-- 表底标签 -->
        <tfoot></tfoot>
    </table>

由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类表格中存储的数据可以分为4类

表格的标题
表格的表头信息
表格的主体信息
表格的页尾信息

caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

注意点：如果我们没有编写tbody，系统会自动添加tbody

2.3单元格合并

<table border="1" align="center">
        <tr>
            <!-- 列合并 colspan="3" 合并三列 -->
            <!-- 行合并 rowspan="3" 合并三行 -->
            <td colspan="3">11</td>
            <!-- <td>12</td>
            <td>13</td> -->
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
        <tr>
            <td>21</td>
            <td rowspan="2">22</td>
            <td>23</td>
            <td colspan="3" rowspan="2">24</td>
            <!-- <td>25</td>
            <td>26</td> -->
        </tr>
        <tr>
            <td>31</td>
            <!-- <td>32</td> -->
            <td>33</td>
            <!-- <td>34</td>
            <td>35</td>
            <td>36</td> -->
        </tr>
    </table>

合并掉的单元格，要注释掉或者删除掉，否则会被推出去，显得表格不美观

3.1form表单

表单就是专门用来收集用户信息的

表单元素

表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能

3.2 表单格式及常用表单元素

<form action="">
        <!-- readonly只能看 disabled禁用 -->
        <!-- 明文输入框 -->
        账号：<input readonly type="text" name="accout"><br>
        <!-- 暗文输入框 -->
        密码：<input disabled type="password" name="pwd"><br>
        <!-- 单选按钮 -->
        角色：
        管理员: <input type="radio" name="role" value="admin">
        服务员: <input type="radio" name="role" value="customer">
        顾客: <input type="radio" name="role" value="employee"><br>
        <!-- 复选框 -->
        爱好：
        唱<input type="checkbox" name="hobbies" value="sing">
        跳<input type="checkbox" name="hobbies" value="dance">
        rap<input type="checkbox" name="hobbies" value="rap"><br>
        <!-- 附件上传的表单元素 -->
        <input type="file" name="file">
        <!-- 普通按钮 -->
        <input type="button" value="我是一个按钮">
        <!-- 配合js做一些操作 -->
        <!-- 隐藏域 希望向服务器提交一些数据 -->
        <input type="hidden" name="token" value="">
        <!-- 图片按钮 图片为百度图片 -->
        <input type="image" width="100px" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
        <!-- 重置按钮 将用户选择到的选项重置 -->
        <input type="reset" value="重置按钮">
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
        <!-- json格式字符串 -->
    </form>

3.3其他表单元素

 <!-- lable 使文字和输入框相关联 -->
    <form action="xxx">
        <label for="one">用户名</label>
        <input type="text" id="one" name="username"><br>
        <!-- 下拉框 -->
        <select name="city" id="">
            <optgroup label="一线城市">
                <option value="shanghai">上海</option>
                <option value="beijing">北京</option>
                <!-- selected 默认选中 -->
                <option value="guangzhou" selected>广州</option>
            </optgroup>
        </select>
        <!-- 多行文本框 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <!-- fieldest类似于div加边框 -->
        <fieldset>
            <legend>请登录</legend>
            账号：<input type="text">
            密码：<input type="password">
            <input type="submit" value="提交">
        </fieldset>
    </form>

列表及表单