HTML 列表、表格、表单

码上奶茶2025-06-12 22:38

1 列表标签

作用：布局内容排列整齐的区域

列表分类：无序列表、有序列表、定义列表。

例如：

1.1 无序列表

标签：ul 嵌套 li，ul是无序列表，li是列表条目。

注意事项：

  • ul 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容

1.2 有序列表

作用：布局排列整齐的需要规定顺序的区域，

标签：ol 嵌套 li，ol 是有序列表，li是列表条目。

注意事项：

  • ol 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容

1.3 定义列表

标签：dl 嵌套 dt 和 dd ，dl是定义列表，dt 是定义列表的标题 ，dd是定义列表的描述／详情。

注意事项：

  • dl 里面只能包含 dt 和 dd
  • dt 和 dd 里面可以包含任何内容
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
        <dd>订单查询</dd>
        <dd>以旧换新</dd>
    </dl>
</body>
</html>

运行效果：

2 表格

标签：table 嵌套 tr，tr 嵌套 td / th

提示：在网页中，表格默认没有边框线， 使用border 属性可以为表格添加边框线。

例子：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <!-- 有几行，就写几个 tr 标签 -->
        <!-- 每个 tr 标签内，再分是表头 th，还是内容 td -->
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>
</html>

运行效果：

2.1 表格结构标签 了解

但这是给浏览器看的，在网页中的展示并不会有什么变化

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <!-- 有几行，就写几个 tr 标签 -->
        <!-- 每个 tr 标签内，再分是表头 th，还是内容 td -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
         </thead>
         <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
         </tfoot>
    </table>
</body>
</html>

2.2 合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息

步骤：

  • 保留最左最上 的单元格，添加属性（取值是数字， 表示需要合并的单元格数量
  • 跨行合并，保留最上单元格，添加属性 rowspan
  • 跨列合并，保留最左单元格，添加属性 colspan
  • 删除其他单元格
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <!-- 有几行，就写几个 tr 标签 -->
        <!-- 每个 tr 标签内，再分是表头 th，还是内容 td -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
         </thead>
         <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td> 
            </tr> 
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
         </tfoot>
    </table>
</body>
</html>

运行效果：

3 表单

  • 作用：收集用户信息
  • 使用场景：登录页面、注册页面、搜索区域

3.1 input 标签

input 标签type 属性值不同，则功能不同

3.1.1 type 属性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input 基本使用</title>
</head>
<body>
    文本框：<input type="text">
    <br><br>
    密码框：<input type="password">
    <br><br>
    单选框：<input type="radio">
    <br><br>
    多选框：<input type="checkbox">
    <br><br>
    上传文件：<input type="file">
</body>
</html>

运行效果：

3.1.2 input 标签占位文本

占位文本：即提示信息，文本框和密码框都可以使用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>占位符</title>
</head>
<body>
    文本框：<input type="text" placeholder="请输入用户名">
    <br><br>
    密码框：<input type="password" placeholder="请输入密码">
</body>
</html>

运行效果：

3.1.3 radio 单选框

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>radio</title>
</head>
<body>
    性别：
    <!-- name 属性保证单选 -->
    <!-- checked 表示刚进入网页的默认选项 -->
    <input type="radio" name="gender"> 男 
    <input type="radio" name="gender" checked> 女 
</body>
</html>

运行效果：

3.1.4 多文件上传

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现 文件多选功能。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多文件上传</title>
</head>
<body>
    上传文件：<input type="file" multiple>
</body>
</html>

运行效果：

3.1.4 checkbox 多选框

  • 多选框也叫 复选框
  • 默认选中：checked
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选框</title>
</head>
<body>
    兴趣爱好：
    <!-- checked 实现默认选中 -->
    <input type="checkbox"> 敲代码
    <input type="checkbox" checked> 敲前端代码
    <input type="checkbox" checked> 敲前端 HTML 代码
</body>
</html>

运行效果：

3.2 下拉菜单

标签：select 嵌套 option ，selec t是下拉菜单整体，option 是下拉菜单的每一项。selected 是默认选项

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单</title>
</head>
<body>
    城市：
    <select>
        <option>南京</option>
        <option selected>杭州</option>
        <option>北京</option>
        <option>上海</option>
        <option>徐州</option>
    </select>
</body>
</html>

运行效果：

3.3 文本域

作用：多行输入文本的表单控件。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本域</title>
</head>
<body>
    <!-- 右下角有拖拽功能，未来都会禁用；未来工作中，会用 CSS 设置尺寸；name id 是发送数据用的 -->
    <textarea></textarea>
</body>
</html>

运行效果：

3.4 label 标签

作用：网页中，基个标签的说明文本

经验：用 label 标签绑定文字和表单控件的关系 ，增大表单控件的点击范围

3.4.1 label 标签增大点击范围

写法一：
  • label 标签只 包裹内容，不包裹表单控件
  • 设置 label 标签的for 属性值和表单控件的id 属性值相同

示例：即点击"男"，也可以选中这个选项，而不是一定要点中"男"对应的那个单选圈

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本域</title>
</head>
<body>
    性别：
    <input type="radio" name="gender " id="man"> <label for="man">男</label>
    <input type="radio" name="gender " id="girl"> <label for="girl">女</label>
</body>
</html>
写法二：

使用 label 标签包裹文字和表单控件，不需要属性

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本域</title>
</head>
<body>
    性别：
    <!-- 第一种写法 -->
    <input type="radio" name="gender" id="man"> <label for="man">男</label>
    <!-- 第二种写法 -->
    <label><input type="radio" name="gender">女</label>         
</body>
</html>

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

3.5 button 按钮

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本域</title>
</head>
<body>
    <!-- form 表单区域 -->
    <!-- action 是发送数据的地址，比如要提交到哪 -->
    <form action="">
        用户名：<input type="text">
        <br><br>
        密码：<input type="password">  
        <br><br>
        <button type="submit">提交</button>
        <!-- 需要将所有表单信息放入 form 标签内，重置的功能才会生效 -->
        <button type="reset">重置</button>   
    </form>
</body>
</html>

运行效果：

3.6 无语义的布局标签

作用：布局网页(划分网页区域，摆放内容）

  • div：独占一行
  • span：不换行

3.7 字符实体

作用：在网页中显示预留字符

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本域</title>
</head>
<body>
    <!-- 在代码中敲键盘的空格，网页只识别一个 -->
    毕业&nbsp;&nbsp;快乐！
</body>
</html>

运行效果：

参考链接：

17-列表-无序和有序和定义列表_哔哩哔哩_bilibili
18-表格-基本使用与表格结构标签_哔哩哔哩_bilibili
19-合并单元格_哔哩哔哩_bilibili
20-表单-input标签_哔哩哔哩_bilibili
21-表单-下拉菜单_哔哩哔哩_bilibili
22-表单-文本域_哔哩哔哩_bilibili
23-表单-label标签_哔哩哔哩_bilibili
24-表单-按钮_哔哩哔哩_bilibili
25-div和span标签和字体实体_哔哩哔哩_bilibili

相关推荐
ywf12155 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭5 小时前
2026，Android Compose 终于支持 Hot Reload 了，但是收费
android·前端·flutter
hpoenixf11 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特11 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷11 小时前
阶段一：从 0 看懂 JSVMP 架构，先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian12 小时前
前端node常用配置
前端
华洛12 小时前
利好打工人，openclaw不是企业提效工具，而是个人助理
前端·javascript·产品经理
xkxnq12 小时前
第六阶段：Vue生态高级整合与优化(第93天)Element Plus进阶：自定义主题（变量覆盖）+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A13 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常13 小时前
被EdgeToEdge适配折磨疯了，谁懂！
前端
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07OpenClaw Control UI安全上下文访问配置08UV安装并设置国内源09AI 编程三剑客：Spec-Kit、OpenSpec、Superpowers 深度对比与实战指南10“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）