前端入坑第四弹——html的其它标签

最新推荐文章于 2024-06-02 21:27:33 发布

这辈子不飞线

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量447

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_55354258/article/details/121689593

版权

这次是html系列的最后一部分，主要介绍表格标签、列表标签以及表单标签，这些标签在网页中同样十分实用。

表格

表格在我们的日常生活中由很广泛的应用，而在html里面，表格主要用于展示和显示数据。像下面这种表格，我们可以通过html做出来。

那么表格学习的具体内容都有哪些呢？

表格的基本标签

对于表格来说，基本的标签主要有如下的标签：

table标签，创建整个表格
tr标签，创建表格中的一行
td标签，创建表格中的一个单元格
th标签，创建表格的表头
thead标签，创建表格头部区域
tbody标签，创建表格主干部分

如下所示的代码，是一个课程表的展示：

<!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>
        <thead>
        <th>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
        </th>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>2</td>
            <td>化学</td>
            <td>英语</td>
            <td>物理</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>3</td>
            <td>数学</td>
            <td>物理</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>4</td>
            <td>英语</td>
            <td>化学</td>
            <td>化学</td>
            <td>数学</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>5</td>
            <td>物理</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
        </tr>
        </tbody>
        
    </table>
</body>
</html>

在没有其它任何修饰的情况下，可以得到一个表的大致形状：

但是，这样的表格并不好看。在开发过程中，我们更多使用CSS对其进行修饰。接下来，我会介绍一些表格的相关属性，通过设定一些参数，可以达到同样的效果。

表格的基本属性

通过设置这些属性可以让我们的表格看起来更加美观。在刚才给出的代码上给出一些添加（第10行）：

<!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 align="center" border="1" cellpadding=0 cellspacing=0 width=600 height=300>
        <thead>
        <th>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
        </th>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <td>2</td>
            <td>化学</td>
            <td>英语</td>
            <td>物理</td>
            <td>语文</td>
            <td>数学</td>
        </tr>
        <tr>
            <td>3</td>
            <td>数学</td>
            <td>物理</td>
            <td>语文</td>
            <td>化学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>4</td>
            <td>英语</td>
            <td>化学</td>
            <td>化学</td>
            <td>数学</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>5</td>
            <td>物理</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
        </tr>
        </tbody>
        
    </table>
</body>
</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 align="center" border="1" cellpadding=0 cellspacing=0 width=600 height=300>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

在合并单元格的时候，我们不考虑斜着合并，所以就有跨列（colspan）合并和跨行合并（rowspan）两种方式。采取这两种方式时，在中心单元格（跨行合并时是最上面的单元格，跨列合并时是最左边的单元格）colspan或者rowspan后面写上合并的单元格数，并在其它行或列中去掉相应的单元格。

例如在上述代码的基础上我需要得到如下的效果：

就要做出如下的修改：

<!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 align="center" border="1" cellpadding=0 cellspacing=0 width=600 height=300>
        <tr>
            <td></td>
            <td colspan="2"></td>
            
        </tr>
        <tr>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
           
            <td></td>
        </tr>
    </table>
</body>
</html>

列表

列表在html中主要用于布局，让我们的网页层次更加清晰。

像这样的效果就是列表所为：

列表又分为三种，有序列表、无序列表和自定义列表。接下来一一为大家介绍这三种列表。

无序列表

例如，我想得到某校大二学生的主要课程。这些课程之间是没有先后次序的，我就可以用一个无序列表。无序列表是ul标签，在ul标签中只能存在li标签。li标签用于存放列表中每一项的内容，其中的内容不限，可以是文字、图片、链接、视频等等。

就可以这样来实现：

<!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>
    <ul>
        大学二年级学习的课程主要有：
        <li>大学物理</li>
        <li>电路分析基础</li>
        <li>大学英语</li>
        <li>数据结构与算法设计</li>
        <li>Python高级语言设计</li>
        <li>场论与复变函数</li>
        <li>概率论与数理统计</li>
        <li>马克思主义基本原理</li>
        <li>信号与系统</li>
        <li>数电</li>
        <li>模电</li>
        <li>毛泽东思想和中国特色社会主义理论体系概论</li>
    </ul>
</body>
</html>

这样就实现了无序列表的操作。

有序列表

有时候，我们的列表元素之间并非并列关系，它们之间的顺序不可调换，这时候就需要有序列表了。例如今年东京奥运会的金牌榜，我们可以用html得到如下的效果：

有序列表的操作就是将无序列表中的ul标签换为ol标签，其它都一样。想要得到上面的效果，可以这样写：

<!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>2020东京奥运会奖牌榜</title>
</head>
<body>
    2020东京奥运会最终金牌榜前10如下：
    <ol>
        <li>美国 39</li>
        <li>中国 38</li>
        <li>日本 27</li>
        <li>英国 22</li>
        <li>俄罗斯奥委会 20</li>
        <li>澳大利亚 17</li>
        <li>意大利 10</li>
        <li>德国 10</li>
        <li>法国 10</li>
        <li>荷兰 10</li>
    </ol>
</body>
</html>

自定义列表

自定义列表是区别于有序列表和无序列表的一种列表，像如下所示的就是由自定义列表得到的。

自定义列表由dl来定义，dt则是每个项目的名字，dd用于描述每一个项目。

像这样：

<!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>
        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
        <dt>线下门店</dt>
        <dd>小米之家</dd>
        <dd>服务网点</dd>
        <dd>授权体验店</dd>
        <dt>关于小米</dt>
        <dd>了解小米</dd>
        <dd>加入小米</dd>
        <dd>投资者关系</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>特色服务</dt>
        <dd>F码通道</dd>
        <dd>礼物码</dd>
        <dd>防伪查询</dd>
        
    </dl>
</body>
</html>

可以得到如下的效果：

表单

表单就类似于以前我们去银行会让我们填写的申请单以及现在各种网页的注册页面。在网页中，表单就是用来收集用户信息的。

表单，由表单域、表单控件和提示信息三个部分构成。

其中提示信息就只是输入文字就行，没有什么标签。

表单域

表单域是包含表单元素的区域，在html中我们常用form标签来定义表单域。

form有一些常用的属性：

表单控件（表单元素）

input标签

还是刚才这个表单，其中的性别、生日、常住地、身高、婚姻状况、学历、月薪等内容就需要我们用input标签来实现。

input自身也有很多的属性：

type属性

例如我们想要写一个登录的页面，只考虑输入用户名和密码这两行，如下所示的效果：

html可以这样写(分别使用text和password属性):

<!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>
        用户名：<input type="text"><br>
        密码：<input type="password">
    </form>
</body>
</html>

这时候，如果用户还没有注册账户，我们就需要一个注册的页面。假设注册时，我们需要收集性别、个人爱好等内容。此时我们将性别设置为单选项，爱好设置为多选择项。

在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>
        用户名：<input type="text"><br>
        密码：<input type="password"><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br>
        喜好：读书<input type="checkbox" name="hobby"> 玩游戏<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby"> 其它<input type="checkbox" name="hobby">
    </form>
</body>
</html>

给所有单选项的name属性赋予相同的值是为了让单选不会出现多选的效果，如果去掉了，就会出现这样的效果：

有时候我们希望在填写表单的时候表单自身能够给出一些提示，如下所示：

这时候可以在“用户名”的后面加上value属性，代表默认值。

<!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>
        用户名：<input type="text" value="如：白天不懂夜的黑"><br>
        密码：<input type="password"><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br>
        喜好：读书<input type="checkbox" name="hobby"> 玩游戏<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby"> 其它<input type="checkbox" name="hobby">
    </form>
</body>
</html>

又比如说，上面的网站受众是以女性为主的，所以我们希望在性别一栏默认为女性，像这样：

页面一打开，性别一栏的女性就被选中了，用input的checked属性即可。在性别那里，给女性的后面加上checked属性，属性值为checked。

<!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>
        用户名：<input type="text" value="如：白天不懂夜的黑"><br>
        密码：<input type="password"><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checked"><br>
        喜好：读书<input type="checkbox" name="hobby"> 玩游戏<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby"> 其它<input type="checkbox" name="hobby">
    </form>
</body>
</html>

有uu这时候会发现一个问题，那就是我们设置了这么多但是没有提交按钮。别急，马上就有了。

只需要加上一行对于提交按钮的设置就行了，将type的属性值设置为submit。

<!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>
        用户名：<input type="text" value="如：白天不懂夜的黑"><br>
        密码：<input type="password"><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checked"><br>
        喜好：读书<input type="checkbox" name="hobby"> 玩游戏<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby"> 其它<input type="checkbox" name="hobby"><br>
        <input type="submit">
    </form>
</body>
</html>

还可以加上重置按钮，将type属性值设置为reset就可以了。

<!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>
        用户名：<input type="text" value="如：白天不懂夜的黑"><br>
        密码：<input type="password"><br>
        性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex" checked="checked"><br>
        喜好：读书<input type="checkbox" name="hobby"> 玩游戏<input type="checkbox" name="hobby"> 运动<input type="checkbox" name="hobby"> 其它<input type="checkbox" name="hobby"><br>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

selected标签

与属性radio不同，这个标签就是下拉式的那种选择。

<!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>
        您来自：
    <select>
        <option>北京</option>
        <option>天津</option>
        <option>河北</option>
        <option>山西</option>
        <option>内蒙古</option>
        <option>黑龙江</option>
        <option>吉林</option>
        <option>辽宁</option>
        <option>上海</option>
        <option>江苏</option>
        <option>浙江</option>
        <option>安徽</option>
        <option>江西</option>
        <option>福建</option>
        <option>河南</option>
        <option>山东</option>
        <option>湖北</option>
        <option>湖南</option>
        <option>广东</option>
        <option>四川</option>
        <option>重庆</option>
        <option>贵州</option>
        <option>广西</option>
        <option>云南</option>
        <option>西藏</option>
        <option>陕西</option>
        <option>甘肃</option>
        <option>青海</option>
        <option>宁夏</option>
        <option>新疆</option>
        <option>香港</option>
        <option>澳门</option>
        <option>台湾</option>
        <option>海南</option>

    </select>
    </form>
    
</body>
</html>

textarea标签

像这样需要手动输入较多文字的时候可以考虑用这个标签。

<!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>
        网站介绍：
        <textarea row='5' cols="20">

        </textarea>
    </form>
</body>
</html>

今天主要介绍了表格、表单以及列表的相关内容，希望大家喜欢，并请各位不吝赐教。

（部分图片和素材来自哔哩哔哩黑马程序员pink老师的视频介绍）