HTML之表格和表单

一、表格

第一点：
align设置表格在网页内居中
border设置表格边框
cellspacing设置表格与表格之间的距离
cellpadding设置表格内容与表格边框之间的距离

第二点：
th—表头单元格，有加粗居中的效果
td—普通单元格，无特殊效果
tr—代表一行
caption—表格标题

我是一个表格

    
     	姓名
        性别
        年龄
         照片
    

第三点：
①rowspan—跨行合并，选择合并单元格个数，并删除多余单元格，一般是从上到下进行合并
②colspan—跨列合并，选择合并单元格个数，并删除多余单元格，一般是从左到右进行合并

    花花
    男
    30
   照片

 
     易烊千玺
     男
     20
      

第四点：
thead—表格的头部
tbody—表格的主体部分
tfoot—表格的脚注部分

二、表单

form用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器
action—用于指定接收并处理表单数据的服务器的url地址
method—用于设置表单数据的提交方式，其取值为get或post
name—用于指定表单的名称，区分同一个页面中的多个表单

text—单行文本输入框

用户名：

password—密码输入框

密码: 

radio—单选按钮
checked—默认选中状态

男
女

checkbox—复选按钮

唱歌
画画
打篮球
踢足球

button—普通按钮
value—按钮上的值

submit–提交按钮，有默认值为–提交查询，可通过value修改

input type="submit">

reset–重置按钮，有默认值为–重置，可通过value修改

image–图片提交按钮必须包含src属性

file–上传文件

获取光标------使用label标签（当鼠标点击label标签内的文字时，表单会自动获取光标）
第一种：所有内容都包含在label标签内
第二种：解释内容不包含在label标签内，使用for和id进行连接

  姓名：
  
  

  ----------------------------------------------------------------------
  
  年龄：
  
  

textarea文本域，双标签，可显示多行文本

用户评论：

select下拉列表
selected="selected"默认选中项

籍贯：
        
            ---请选择省份---
            北京
            上海
            河南
            广州
        

三、表格和表单合并练习

效果图

代码实现

    
    
    


    

        
520快来脱单吧
        

            
性别
            

                男
                女       
            
        
        

            
生日
            

                
                    请选择年
                    1999
                    1998
                    1997
                    1996
                    1995
                
                
                    请选择月
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                
                
                    请选择日
                    1
                    2
                    3
                    4
                    5
                    6
                    7
                    8
                    9
                    10
                    11
                    12
                    13
                    14
                    15
                    16
                    17
                    18
                    19
                    20
                    21
                    22
                    23
                    24
                    25
                    26
                    27
                    28
                    29
                    30
                    31
                
            
        
        

            
所在地区
            

                
            
           
        
        

            
婚姻状况
            

                未婚
                离婚
                丧偶
            
    
        
        

            
学历
            

        
        

            
月薪
            

        
        

            
手机号
            

        
        

            
昵称
            

        
        

            
喜欢的类型
            

                妩媚
                柔美
                可爱
                小鲜肉
                型男
                气质
            
        
        

            
自我介绍