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>
相关推荐
王哲晓6 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4119 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v10 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云20 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058722 分钟前
web端手机录音
前端
齐 飞28 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试