HTML——列表、表格与表单

一、列表

1、无序列表标签

• 用于页面中没有顺序的列举项。    

   格式：    

 

                        type属性设置标号的类型，值可以取：  

                                        1 disc ：实心圆点    

                                        2 circle ：空心圆点  

                                        3 square ：实心方块

    
四大传说：
    

        
梁山伯与祝英台
        
白蛇传
        
牛郎织女
        
孟姜女哭长城
    
    
四大名著：
    

        
红楼梦
        
西游记
        
三国演义
        
水浒传
    
    
四大美女：
    

        
西施
        
貂蝉
        
王昭君
        
杨玉环
    

2、有序列表

 

• 用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。

  格式：  

    

                        type设置标号的类型，值可以取：  

                                1 1：显示数字  

                                2 A：显示大写字母  

                                3 a：显示小写字母  

                                4 I：显示大写罗马数字  

                                5 i：显示小写罗马数字

四大古都：
    
 
        
北京
        
南京
        
西安
        
洛阳
    
    
常用的Web技术：
    

        
JavaScript
        
JSP
        
ASP
    
    
四大名酒：
    

        
茅台
        
泸州老窖
        
汾酒
        
西凤酒
    
  

• HTML注释符( Ctrl+/)：        注释的内容在页面中不显示

 3、嵌套列表

• 一个列表作为另一个列表的一部分，即多层列表。

  
中国的行政区划：
    

        
陕西
            

                
西安
                
咸阳
                
宝鸡
            
        
北京
            

                
朝阳区
                
海淀区
                
大兴区
            
     

 二、表格

 1、表格的作用

1.  用来布局：内容比较整齐时使用
2.  作为信息管理页面的控件使用    

 2、表格标签

      基本结构：

    
标题
     

            

                
学号
                
姓名
                
年龄
            
      
      

            

                
1
                
小沛
                
18
            
        
 

•   ---------表格标签
•  ---------行
•  ---------表头单元格（文字会自动加粗、自动居中）
•  ---------单元格
•  ---------表格标题
•  ---------表格的头部
•  ---------表格的主题部分                 

3、table 的基本属性

属性	属性值
border	边框线的宽度，默认没有边框，border的数值越大，则边框线越粗
align	表格在页面中的对齐方式，left/center/right
bgcolor	表格的背景色
background	背景图片
cellpadding	单元格的内容和单元格边框之间的距离
cellspacing	单元格之间的距离

 4、合并单元格

4.1、合并单元格的方式

• 跨行合并：rowspan=‘合并单元格的个数’
• 跨列合并：colspan=‘合并单元格的个数’ 

4.2、目标单元格：（写合并代码） 

• 跨行：最上侧单元格为目标单，写合并代码
• 跨列：最左侧单元格为目标单，写合并代码

4.3、合并单元格三部曲

1. 先确定是跨行还是跨列合并 

2. 找到目标单元格，写上  合并方式=‘合并的单元格格数’     例： 1 

3. 删除多余的单元格

三、表单

1、用途：

• 用户注册

• 收集信息

• 信息反馈--调查问卷

• 搜索引擎

 2、标签   

2.1、表单标签：所有的表单控件必须放在该标签下

action=“远程服务器地址” method=“提交方式” name=“表单域名称”>

  …各种表单元素控件…

 A、action属性：表单数据提交的远程服务器的地址(服务器的URL)
            
 B、method属性：表单数据的提交方式，其取值为get(对数据大小有限制，速度快但数据会在地址栏出现，不安全)/post(对数据大小无限制，安全但速度慢)

 C、name属性：用于指定表单的名称，以区分同一个页面中的多个表单域

2.2 、表单控件 

     A、input控件：   

                    

	属性值
单行输入文本框	text，
重置按钮	reset，,若没有value属性,按钮上默认显示'重置'   只有放在 中才有效
密码框	password，该字段的字符被掩码
提交按钮	submit，，将表单数据提交给action指定的URL
单选按钮	radio， ,属性'checked'表示选中                                 例如：                                                                男                                             女                                            让单选按钮和文本进行绑定：radio的id属性值和label的for属性值必须一致
复选框	checkbox，
数字	number，
日期选择框	date，
时间选择框	time'，
隐藏控件	hidden，

    B、select控件：下拉列表控件

             
                  列表项
                  列表项
                  列表项
              

   C、textarea控件：文本区,可以输入多行、多列数据

  

   D、button控件：按钮控件

 

  type属性的取值：
                
                   a、type='button'：普通按钮,不含默认的动作(功能)
                   
                   b、type='reset'：重置按钮,重置表单控件
                   
                   c、type='submit'：提交按钮,将表单控

    E、label控件：用于显示文本

• 强调：

              
               (1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复
               
               (2)所有的表单控件都有value属性,value属性的值会提交给远程服务器
               
               (3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签
               
               (4)disabled属性表示input是否可用(置灰)
               
               (5)readonly属性表示input的值是只读的
               
               (6)单行文本输入框()的属性placeholder起提示的作用
               
               (7)required属性表示input是必须要输入的
               
               (8)maxlength属性表示input输入的最大长度
               
               (9)tabIndex属性用于设置表单控件的tab顺序
               
               (10)title属性用来设置鼠标经过时的提示文字