前端HTML(二)【带动图，便于理解】

新一代小卷王

已于 2022-05-20 12:03:54 修改

阅读量811

点赞数 100

分类专栏：【扬帆起航】HTML CSS 文章标签：前端 jquery javascript

于 2022-05-13 18:52:06 首次发布

本文链接：https://blog.csdn.net/m0_70571756/article/details/124754840

版权

【扬帆起航】HTML CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的列表标签，包括无序列表、有序列表和自定义列表的使用。接着讲解了表格标签，涵盖基本结构、属性、标题与表头单元格的创建，以及单元格的合并。最后探讨了表单标签，如input、button、select和textarea，为网页中的表单结构搭建提供基础。

摘要由CSDN通过智能技术生成

前言：

考虑到大家没看过之前的文章，所以来回顾一下上一篇的内容：、

我们学完此专栏 HTML CSS 能干什么？

我们学完HTML和CSS可以制作如下图所示的特效：

目录：

🍓学习目标：

能够使用列表标签实现网页中列表结构的搭建
能够使用表格标签及属性实现网页中表格结构的搭建
能够使用表单标签及属性实现表单类网页结构搭建

🍒列表标签

1.列表的应用场景

场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

特点：按照行的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

无序列表

有序列表

自定义列表：

2.无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表。

标签组成：

标签名说明
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容

显示特点：

• 列表的每一项前默认显示圆点标识

注意点：

• ul标签中只允许包含li标签

• li标签可以包含任意内容

代码：
<body>
    <ul>
        <li>兄弟们</li>
        <li>卷起来</li>
        <li>冲冲冲</li>
    </ul>
</body>

3.有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜。

标签组成：

标签名说明
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容

显示特点：

• 列表的每一项前默认显示序号标识

注意点：

• ol标签中只允许包含li标签

• li标签可以包含任意内容

代码：
<body>
    <ol>
        <li>兄弟们</li>
        <li>卷起来</li>
        <li>冲冲冲</li>
    </ol>
</body>

4.自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现。

标签组成：

标签名说明
di 表示自定义列表的整体，用于包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表的针对主题的每一项内容

显示特点：

• dd前会默认显示缩进效果

注意点：

• dl标签中只允许包含dt/dd标签

• dt/dd标签可以包含任意内容

代码：
    <dl>
        <dt>帮助中心</dt>
        <dd>账号管理</dd>
        <dd>查询账单</dd>
        <dd>咨询客服</dd>
    </dl>

🍓表格标签

1.表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签：

注意点：

• 标签的嵌套关系：table > tr > td

2.表格相关属性

场景：设置表格基本展示效果

常见相关属性：

注意点：

• 实际开发时针对于样式效果推荐用CSS设置

3.表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

其他标签：

注意点：

• caption标签书写在table标签内部

• th标签书写在tr标签内部（用于替换td标签）

4. 表格的结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

注意点：

• 表格结构标签内部用于包裹tr标签

• 表格的结构标签可以省略

5.合并单元格

场景：将水平或垂直多个单元格合并成一个单元格

合并单元格步骤：

1. 明确合并哪几个单元格

2. 通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他

• 左右合并→只保留最左的，删除其他

3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

注意点：

• 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

代码：
<!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>Document</title>
</head>
<body>
    <table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <tr>
                
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">100分</td>
                <td>真棒, 第一名</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>真棒, 第二名</td>
            </tr>    
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

6.总结

① 表格基本标签：table > tr > td

② 表格标题和表头单元格标签：table > caption + tr > th

③ 表格结构标签：table > thead > tr > td

④ 表格相关属性

⑤ 合并单元格步骤

1. 明确合并哪几个单元格

2. 通过左上原则，确定保留谁删除谁

• 上下合并→只保留最上的，删除其他

• 左右合并→只保留最左的，删除其他

3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

🍉表单标签

1. input系列标签

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input

• input标签可以通过 type属性值的不同，展示不同效果

type属性值：

现在演示的比较粗略，后期会有案例来进行讲解

<!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>Document</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>

（拓展）value属性和name属性作用介绍

value属性：用户输入的内容，提交之后会发送给后端服务器

name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

后端接收到数据的格式是：name的属性值 = value的属性值

2. button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值（同input的按钮系列）：

注意点：

• 谷歌浏览器中button默认是提交按钮

• button标签是双标签，更便于包裹其他内容：文字、图片等

代码：

   <button type="submit">
        提交
    </button>

代码：

   <button type="reset">
        重置
    </button>

后期学会CSS后：

代码：

<!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>Document</title>
    <style>
        /* From www.lingdaima.com */
        button {
            position: relative;
            padding: 19px 36px;
            display: block;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            border-radius: 40px;
            border: none;
        }

        button span {
            position: relative;
            color: #fff;
            font-family: Arial;
            letter-spacing: 8px;
            z-index: 1;
        }

        button .liquid {
            position: absolute;
            top: -80px;
            left: 0;
            width: 100%;
            height: 200px;
            background: #4973ff;
            box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
            transition: .5s;
        }

        button .liquid::after,
        button .liquid::before {
            content: '';
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -75%);
            background: #fff;
        }

        button .liquid::before {
            border-radius: 45%;
            background: rgba(20, 20, 20, 1);
            animation: animate 5s linear infinite;
        }

        button .liquid::after {
            border-radius: 40%;
            background: rgba(20, 20, 20, .5);
            animation: animate 10s linear infinite;
        }

        button:hover .liquid {
            top: -120px;
        }

        @keyframes animate {
            0% {
                transform: translate(-50%, -75%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -75%) rotate(360deg);
            }
        }
    </style>

</head>

<body>




    <div>
        <button>
            <span>卷起来 兄弟们</span>
            <div class="liquid"></div>
        </button>
    </div>


</body>

</html>

3. select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

• select标签：下拉菜单的整体

• option标签：下拉菜单的每一项

常见属性：

• selected：下拉菜单的默认选中
<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
    </select>

</body>

4. textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

• cols：规定了文本域内可见宽度

• rows：规定了文本域内可见行数

注意点：

• 右下角可以拖拽改变大小

• 实际开发时针对于样式效果推荐用CSS设置

<body>
    <textarea cols="60" rows="30"></textarea>
</body>

后期学会CSS后：

<!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>Document</title>

    <style>
        /* From www.lingdaima.com */
        .card {
            width: 190px;
            height: 254px;
            background: rgb(255, 255, 255);
            border-radius: 0.4em;
            box-shadow: 0.3em 0.3em 0.7em #00000015;
            transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: rgb(250, 250, 250) 0.2em solid;
        }

        .card:hover {
            border: #006fff 0.2em solid;
        }
    </style>

</head>

<body >




    <textarea class="card"></textarea>



</body>

</html>

5. label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法①：

1. 使用label标签把内容（如：文本）包裹起来

2. 在表单标签上添加id属性

3. 在label标签的for属性中设置对应的id属性值

使用方法②：

1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2. 需要把label标签的for属性删除即可
<!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>Document</title>
</head>

<body>
    性别:
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <label><input type="radio" name="sex"> 女</label>
</body>

</html>

新一代小卷王

关注

100
点赞
踩
81

收藏

觉得还不错? 一键收藏
打赏
75
评论
前端HTML(二)【带动图，便于理解】

目录：1.学习需要准备的工具 1.VS Code 2.浏览器🐟属于自己的第一个网页2.HTML标签学习🌳排版系列标签1.标题标签2.段落标签3.水平线标签4.换行标签🍀文本格式化标签💫媒体标签1.图片标签2.路径3.音频标签4.视频标签5.链接标签🍒列表标签🍓表格标签🍉表单标签
复制链接

扫一扫

专栏目录

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

标签名	说明
di	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容