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>
相关推荐
guojl几秒前
深度剖析Kafka读写机制
前端
FogLetter1 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan2 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan3 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan4 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录4 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee4 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我5 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
Mxuan6 分钟前
vscode webview 插件开发(毛坯篇)
前端
FogLetter7 分钟前
前端性能优化:深入理解回流与重绘
前端·css