Web前端一套全部清晰 ④ day3 列表 表格 表单标签

总有坎坷,迈过去就是成长

------ 24.4.27

一、列表

作用:

内容排列整齐的区域

列表分类:

**无序列表:**不需要规定排列顺序

**有序列表:**需要规定排列顺序

**定义列表:**一个标题下有多个分类,排列整齐

使用、工作都以无序列表为重点

1.无序列表

作用:

布局排列整齐的不需要规定顺序的区域

标签:

ul 嵌套 li,ul是无序列表,li是列表条目

html 复制代码
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ......
</ul>

注意事项:

ul 标签里面只能包裹li标签

li 标签里面可以包裹任何内容

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>
            列表条目1
        </li>
        <li>
            列表条目2
        </li>
        <li>
            列表条目3
        </li>
    </ul>
</body>
</html>

2.有序列表

作用:

布局排列整齐的需要规定顺序的区域

标签:

ol 嵌套 li,ol 是有序列表,li是列表条目

html 复制代码
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    ......
</dt>

注意事项:

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>
            步骤1
        </li>
        <li>
            步骤2
        </li>
        <li>
            步骤3
        </li>
    </ol>
</body>
</html>

3.定义列表

标签:

dl 嵌套 dt 和 dd,dl 是 定义列表,dt 是定义列表的标题,dd 是定义列表的描述/详情

html 复制代码
<dl>
    <dt>列表标题</dt>
    <dd>列表描述/详情</dd>
    ......
</dl>

注意事项:

dl 里面只能包含 dt 和 dd

dt 和 dd 里面可以包含任何内容

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>
            服务中心
        </dt>
        <dd>
            申请售后
        </dd>
        <dd>
            售后政策
        </dd>
        <dd>
            客服管理
        </dd>
    </dl>
</body>
</html>

二、表格

1.表格基本使用

标签:

table 嵌套 tr,tr嵌套 tr / th

提示:

在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格-基本使用</title>
</head>
<body>
    <!-- border属性是表格的边框 -->
    <table border="1">
        <!-- th 表头单元格 -->
        <tr>
            <!-- 其他单元格 -->
            <th>
                姓名
            </th>
            <th>
                语文
            </th>
            <th>
                数学
            </th>
            <th>
                英语
            </th>
            <th>
                总分
            </th>
        </tr>
        <tr>
            <!-- td 内容单元格 -->
            <td>
                张三
            </td>
            <td>
                97
            </td>
            <td>
                100
            </td>
            <td>
                100
            </td>
            <td>
                297
            </td>
        </tr>
        <!-- 有几行 有几个tr属性 -->
        <tr>
            <td>
                李四
            </td>
            <td>
                95
            </td>
            <td>
                100
            </td>
            <td>
                98
            </td>
            <td>
                293
            </td>
        </tr>
        <tr>
            <td>
                总结
            </td>
            <td>
                全市第一
            </td>
            <td>
                全市第一
            </td>
            <td>
                全市第一
            </td>
            <td>
                全市第一
            </td>
        </tr>
    </table>
</body>
</html>

2.表格结构标签

作用:

用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰

标签:

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格结构标签</title>
</head>
<body>
    <!-- border属性是表格的边框 -->
    <table border="1">
        <!-- th 表头单元格 -->
        <thead>
            <tr>
                <!-- 其他单元格 -->
                <th>
                    姓名
                </th>
                <th>
                    语文
                </th>
                <th>
                    数学
                </th>
                <th>
                    英语
                </th>
                <th>
                    总分
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- td 内容单元格 -->
                <td>
                    张三
                </td>
                <td>
                    97
                </td>
                <td>
                    100
                </td>
                <td>
                    100
                </td>
                <td>
                    297
                </td>
            </tr>
            <!-- 有几行 有几个tr属性 -->
            <tr>
                <td>
                    李四
                </td>
                <td>
                    95
                </td>
                <td>
                    100
                </td>
                <td>
                    98
                </td>
                <td>
                    293
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    总结
                </td>
                <td>
                    全市第一
                </td>
                <td>
                    全市第一
                </td>
                <td>
                    全市第一
                </td>
                <td>
                    全市第一
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

3.合并单元格

作用:

将多个单元格合并成一个单元格,以合并同类信息

合并单元格的步骤:

① 明确合并的目标

② 保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)

------ 跨行合并,保留最上单元格,添加属性 rowspan

------ 跨列合并,保留最左单元格,添加属性 colspan

③ 删除其他单元格

示例:

跨行合并:
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>

</head>
<body>
        <!-- border属性是表格的边框 -->
    <table border="1">
        <!-- th 表头单元格 -->
        <thead>
            <tr>
                <!-- 其他单元格 -->
                <th>
                    姓名
                </th>
                <th>
                    语文
                </th>
                <th>
                    数学
                </th>
                <th>
                    英语
                </th>
                <th>
                    总分
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- td 内容单元格 -->
                <td>
                    张三
                </td>
                <td>
                    97
                </td>
                <td rowspan="2">
                    100
                </td>
                <td>
                    100
                </td>
                <td>
                    297
                </td>
            </tr>
            <!-- 有几行 有几个tr属性 -->
            <tr>
                <td>
                    李四
                </td>
                <td>
                    95
                </td>
                <td>
                    98
                </td>
                <td>
                    293
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    总结
                </td>
                <td>
                    全市第一
                </td>
                <td>
                    全市第一
                </td>
                <td>
                    全市第一
                </td>
                <td>
                    全市第一
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
跨列合并
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>

</head>
<body>
        <!-- border属性是表格的边框 -->
    <table border="1">
        <!-- th 表头单元格 -->
        <thead>
            <tr>
                <!-- 其他单元格 -->
                <th>
                    姓名
                </th>
                <th>
                    语文
                </th>
                <th>
                    数学
                </th>
                <th>
                    英语
                </th>
                <th>
                    总分
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- td 内容单元格 -->
                <td>
                    张三
                </td>
                <td>
                    97
                </td>
                <td rowspan="2">
                    100
                </td>
                <td>
                    100
                </td>
                <td>
                    297
                </td>
            </tr>
            <!-- 有几行 有几个tr属性 -->
            <tr>
                <td>
                    李四
                </td>
                <td>
                    95
                </td>
                <td>
                    98
                </td>
                <td>
                    293
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    总结
                </td>
                <td colspan="4">
                    全市第一
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

三、表单

作用:

收集用户信息

使用场景:

登陆页面

注册页面

搜索区域

1.input 标签基本使用

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

html 复制代码
<input type="...">

type属性值:

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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>
    <!-- 必选的选项之间用单选框 radio 进行显示 小圆点 -->
    单选框:<input type="radio">
    <br>
    <br>
    <!-- 多选框 checkbox 同意协议页面 小方块-->
    多选框:<input type="checkbox">
    <br>
    <br>
    上传文件:<input type="file">
</body>
</html>

2.input标签占位文本

占位文本:

提示信息

标签:

html 复制代码
<input type="..." placeholder="提示信息">

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <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="请输入密码:">
    <br>
    <br>
</body>
</html>

3.单选框 radio

标签:

html 复制代码
<input type="radio" name="组名" checked> 默认属性

常用属性:

案例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选框</title>
</head>
<body>
    性别:
    <input type="radio" name="gender" checked> 男
    <input type="radio" name="gender"> 女
</body>
</html>

4.上传文件-file

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

标签:

html 复制代码
<input type="file" multiple>

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传多个文件</title>
</head>
<body>
    上传文件:<input type="file" multiple>
</body>
</html>

5.多选框-checkbox

多选框也叫复选框

默认选中:checked

标签:

html 复制代码
<input type="checkbox" checked> 敲前端代码

示例:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多选框 - checkbox</title>
</head>
<body>
    兴趣爱好:
    <input type="checkbox">敲代码
    <input type="checkbox">敲前端代码
    <input type="checkbox" checked>敲前端HTML代码
</body>
</html>
相关推荐
乐闻x2 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚4 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd79420 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You28 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生40 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_1 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js