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

相关推荐
掘金安东尼5 分钟前
换了无数键盘、工学椅，却从没认真选过一块为程序员“注意力”设计的屏
前端·面试·github
Bigger29 分钟前
🍸 Apple Liquid Glass 设计理念与前端实现解析
前端·css·apple
星火飞码iFlyCode32 分钟前
【无标题】
java·前端·人工智能·算法
夏梦春蝉39 分钟前
ES6从入门到精通：变量
前端·javascript·es6
步行cgn43 分钟前
ES6 核心语法手册
前端·javascript·es6
sorryhc1 小时前
React SSR同构渲染方案是什么？
前端·javascript·next.js
biomooc2 小时前
R语言 | 如何使用R书写html文档？
r语言·html
护国神蛙2 小时前
给你一个页面如何定时刷新
前端·javascript·浏览器
一直游到海水变蓝丿2 小时前
el-select下拉框 添加 el-checkbox 多选框
前端·javascript·vue.js
阿奇__3 小时前
element 跨页选中,回显el-table选中数据
前端·vue.js·elementui
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05海康Visionmaster-常见问题排查方法-启动阶段06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】072024五一数学建模B题思路代码与论文分析08DeepSeek各版本说明与优缺点分析09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解