• HTML详细基础（三）表单控件

    本帖介绍web开发中非常核心的标签——表格标签。

    在日常我们使用到的各种需要输入用户信息的场景——如下图，均是通过表格标签table创造出来的：

    目录

    一.表格标签

    二.表格属性

     三.合并单元格

    四.无序列表

    五.有序列表

    六.自定义标签

    七.表单域 

    八.Input标签

    九.Label标签

    十.select标签

    一.表格标签

    • table：用来定义一个表格
    • tr：表示表格的一行
    • th：表示表头，可以实现着重显示的效果
    • td：表示一个单元格

    总的来说，table未与位于最外层，用来声明一个表格；table内部又嵌套了多个tr，表示表格的每一行；而每一个tr内部包含了一个th和多个td，用来区别不同级别的单元格~

    如下所示：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <table align="center" border="2" cellpadding="30" cellspacing="1" width="350" hight="350">
    11.         
    12.         <tr> <th>姓名th> <th>性别th> <th>年龄th> tr>
    13.         
    14.         <tr> <td>Lovetd> <td>男td> <td>19td> tr>
    15.         
    16.         
    17.         <tr> <td>JSLtd> <td>男td> <td>18td> tr>
    18.         
    19.         <tr> <td>HYHtd> <td>男td> <td>19td> tr>
    20.     table>
    21. body>
    22. html>

     至于这里为什么居中，是因为在table标签中添加了align="center"属性；其他的样式效果也是如此，暂时不展开叙述~

    二.表格属性

    • align：表示对齐方式
    • border：表示边框
    • width：单元格宽度
    • height：单元格高度
    • cellpadding：表示内容与空白的距离
    • cellspacing：表示单元格之间的距离

    实例代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <table align="center" border ="1" width="500" height="400" cellpadding="20"cellspacing="1">
    11.         
    12.         <tr><th>排名th> <th>球队th><th>积分th> tr> 
    13.         <tr><td>1td> <td>拜仁慕尼黑td> <td>21td> tr> 
    14.         <tr><td>2td> <td>多特蒙德td> <td>18td>  tr> 
    15.         <tr><td>3td> <td>沙尔克04td> <td>15td>  tr> 
    16.         <tr><td>4td> <td>霍芬海姆td> <td>14td>  tr> 
    17.         <tr><td>5td> <td>门兴格拉德巴赫td><td>11td>  tr> 
    18.         <tr><td>6td> <td>沃尔夫斯堡td> <td>9td>     tr> 
    19.         <tr><td>7td> <td>勒沃库森td> <td>7td>       tr> 
    20.    
    21.     table>
    22. body>
    23. html>

     三.合并单元格

    顾名思义，和Excel中的功能相一致，不过在Html中要靠代码实现~
     

     横排合并用colspan，这里表示横排合并3个：

    <tr><th colspan="3"> 德甲积分榜th>  tr>

    竖排合并用rowspan，这里表示竖排合并7个：

    <tr><td rowspan="7"> td> <td>拜仁慕尼黑td> <td>21td> tr>

    完整代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <table align="center" border ="1" width="500" hight="400" cellpadding="20"cellspacing="0">
    11.         <tr><th colspan="3"> 德甲积分榜th>  tr> 
    12.         
    13.         <tr><td rowspan="7"> td> <td>拜仁慕尼黑td> <td>21td> tr> 
    14.         
    15.         <tr> <td>多特蒙德td> <td>18td>  tr> 
    16.         <tr> <td>沙尔克04td> <td>15td>  tr> 
    17.         <tr> <td>霍芬海姆td> <td>14td>  tr> 
    18.         <tr> <td>门兴格拉德巴赫td><td>11td>  tr> 
    19.         <tr> <td>沃尔夫斯堡td> <td>9td>     tr> 
    20.         <tr> <td>勒沃库森td> <td>7td>       tr> 
    21.    
    22.     table>
    23. body>
    24. html>

     如图：

    四.无序列表

    • ul：定义无序列表
    • li：定义列表的项

    （如上的格式就是一个无序列表~）

    1.     <ul>      
    2.         <li>榴莲li>
    3.         <li>臭豆腐li>
    4.         <li>螺蛳粉li>
    5.         <li>鲱鱼罐头li>
    6.     ul>

    五.有序列表

    • ol：定义有序列表
    • li：定义列表的项
    1.     <ol>
    2.        <li>穆勒 1000li>
    3.        <li>C罗 900li>
    4.        <li>梅西 800li>
    5.     ol>

    展示一下两种列表的效果，如下：

    六.自定义标签

     这个标签基本上没什么应用场景，大家了解一下语法格式即可：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <dl>
    11.         <dt>线下门店dt>
    12.         <dd>小米之家dd>
    13.         <dd>服务网点dd>
    14.         <dd>授权体验店dd>
    15.         
    16.         <dt>线下门店dt>
    17.         <dd>小米之家dd>
    18.         <dd>服务网点dd>
    19.         <dd>授权体验店dd>
    20.     dl>
    21.     
    22. body>
    23. html>

    七.表单域 

    HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。

    表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据。

    通俗地说，在web项目中，表单内部的数据会被传送到后台——即服务器端，这部分涉及到后端开发的知识，暂时不展开详细介绍~

    1.     <form action="19号 自定义标签.html" method="dialog" name="表单一">
    2.     
    3.     
    4.     
    5.  
    6.  
    7.     form>

    如上是一个表单域的格式，用form来定义；action属性规定了：当表单内的数据被提交这一事件发生后，跳转到的页面~

    八.Input标签

    用户录入数据的核心标签，非常重要~

    type属性可以规定输入表单元素的属性：

    • type="text"：输入框
    • type="file"：文件选择
    • type="radio"：单选框
    • type="password"：密码框
    • type="checkbox"：多选框
    • type="submit"：提交框
    • type="reset"：重置框 

    如下是一段代码，注释了包括maxlength在内的一些其他属性，请注意这些细节：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <form action="E:\HTML 文件\案例14号 综合练习-招新网站项目\2级目录\14号网页框架.html" method="GET"> <br>
    11.         姓名：<input type="text"> br>
    12.         
    13.         
    14.         点击上传头像 <input type="file">br>
    15.         
    16.         性别：男<input type="radio" name="sex" checked="checked">  女<input type="radio" name="sex"> br>
    17.         
    18.         
    19.         
    20.         
    21.         专业班级：<input type="text"> br>
    22.         学号：<input type="text" maxlength="10" minlength="10"> br>
    23.         
    24.         
    25.         密码：<input type="password"> br>
    26.         
    27.         
    28.         擅长技能：PS<input type="checkbox" name="hobby"> word<input type="checkbox"  name="hobby"> ppt<input type="checkbox"  name="hobby">br>
    29.         
    30.         <input type="submit" value="登录">
    31.         
    32.         <input type="reset" value="再次输入">
    33.         
    34.      form>
    35. body>
    36. html>

    效果如下： 

    九.Label标签

    所谓label标签，顾名思义，就是用标签来实现某种功能——比如我们点击CSDN网站的头像，即可跳转到用户界面，而不需要非得点击文本才行

    label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 

    格式如下：

    1.     <form>
    2.        性别：<br>
    3.        <label for="sex1">男<input type="radio" name="sex" id="sex1"> label>
    4.        <label for="sex2">女<input type="radio" name="sex" id="sex2"> label>
    5.        
    6.        
    7.     form>

    上述代码块的意义是：只需要点击“男”这个字，即可选中性别，而并非要必须通过复选框实现~

    十.select标签

    select 元素中的 option标签用于定义列表中的可用选项，本质上就是下拉列表：

    1. <body>
    2.     你的专业方向：
    3.     <select>
    4.      <option>软件开发option>
    5.      <option selected="selected">移动互联option>
    6.      <option>大数据option>
    7.      <option>信息安全option>
    8.      <option>人工智能option>
    9.     select>
    10. body>

    其中被selected的属性注明的选项是默认选项~

  • 相关阅读:
    浅谈大数据背景下用户侧用电数据在电力系统的应用与发展分析
    【复盘】接口自动化测试框架建设的经验与教训！
    【蓝桥2025备赛】容斥原理
    【java】java 类型安全 与 unchecked warning
    基于Go/Grpc/kubernetes/Istio开发微服务的最佳实践尝试 - 1/3
    1V1音视频实时互动直播系统
    GeoServer发布地图服务（WMS、WFS）
    Oracle LiveLabs实验：Automatic Partitioning in Autonomous Database
    【LeetCode刷题】--9.回文数
    retrofit-spring-boot-starter这款轻量级 HTTP 神器好用到爆
  • 原文地址：https://blog.csdn.net/jsl123x/article/details/133337918