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

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

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

目录

一.表格标签

二.表格属性

 三.合并单元格

四.无序列表

五.有序列表

六.自定义标签

七.表单域 

八.Input标签

九.Label标签

十.select标签

---

一.表格标签

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

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

如下所示：

    
    
    
    


    

        
        
 
姓名
 
性别
 
年龄
 
        
        
 
Love
 
男
 
19
 
        
        
        
 
JSL
 
男
 
18
 
        
        
 
HYH
 
男
 
19
 
    

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

二.表格属性

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

实例代码如下：

    
    
    
    


    

        
        
排名
 
球队
积分
 
 
        
1
 
拜仁慕尼黑
 
21
 
 
        
2
 
多特蒙德
 
18
  
 
        
3
 
沙尔克04
 
15
  
 
        
4
 
霍芬海姆
 
14
  
 
        
5
 
门兴格拉德巴赫
11
  
 
        
6
 
沃尔夫斯堡
 
9
     
 
        
7
 
勒沃库森
 
7
       
 
   
    

 三.合并单元格

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

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

 德甲积分榜  

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

  拜仁慕尼黑 21 

完整代码如下：

    
    
    
    


    

        
 德甲积分榜
  
 
        
        
 
 
拜仁慕尼黑
 
21
 
 
        
        
 
多特蒙德
 
18
  
 
        
 
沙尔克04
 
15
  
 
        
 
霍芬海姆
 
14
  
 
        
 
门兴格拉德巴赫
11
  
 
        
 
沃尔夫斯堡
 
9
     
 
        
 
勒沃库森
 
7
       
 
   
    

 如图：

四.无序列表

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

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

    
      
        
榴莲
        
臭豆腐
        
螺蛳粉
        
鲱鱼罐头
    

五.有序列表

• ol：定义有序列表
• li：定义列表的项

    

       
穆勒 1000
       
C罗 900
       
梅西 800
    

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

六.自定义标签

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

    
    
    
    


    

        
线下门店
        
小米之家
        
服务网点
        
授权体验店
        
        
线下门店
        
小米之家
        
服务网点
        
授权体验店
    
    

七.表单域 

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

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

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

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

八.Input标签

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

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

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

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

    
    
    
    


    
 

        姓名： 

        
        
        点击上传头像 

        
        性别：男  女 

        
        
        
        
        专业班级： 

        学号： 

        
        
        密码： 

        
        
        擅长技能：PS word ppt

        
        
        
        
        
     

效果如下： 

九.Label标签

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

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

格式如下：

    

       性别：

       男 
       女 
       
       
    

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

十.select标签

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

    你的专业方向：
    
     软件开发
     移动互联
     大数据
     信息安全
     人工智能
    

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