学习HTML第三天

列表、表格、表单不同运用场景

一、列表——无序、有序和定义列表

1、无序列表

ul标签里只能包裹li标签

li标签里可以包裹任何内容

    
    
    


    

        
这是第一行
        
这是第二行
        
这是第三行
    

2、有序列表

ol标签里只能包裹li标签

li标签里可以包裹任何内容

    
    
    


    

        
前缀是什么
        
这是第二行
        
这是第三行
    

3、定义列表

dl标签里只能包裹dt和dd

dt和dd里可以包裹任何内容

    
    
    


    

        
陈嘉敏
        
身高
        
体重
    

二、表格

1、基本使用

标签：table嵌套tr        tr嵌套td/th

    
    
    


    

        

            
姓名
            
性别
            
总分
        
        

            
陈嘉敏
            
女
            
100分
        
    

 2、表格结构标签

（人眼看不出区别，能够让结构更加清晰！）

    
    
    


    

        

        

            
姓名
            
性别
            
总分
        
        
 
        

        

            
陈嘉敏
            
女
            
100分
        
        
        

        

            
总结
            
总结
            
总结
        
        
    

3、合并单元格

    
    
    


    

        

            
姓名
            
性别
            
总分
        
        

            
陈嘉敏
            
女
            
100分
        
        

            
蔡映雪
            
99分
        
        

            
总结
            
优秀
        
    

 运行后网页如图所示：

三、表单

1、input标签

input标签type属性值不同，则功能不同

 1）占位文本：

 2）单选框（radio）：

假设要默认选中性别女，则加上checked属性名

    
    
    


    性别：
    男
    女

3）上传文件：file

multiple属性可实现文件多选功能

4)多选框

checkbox   实现默认选中功能，添加属性checked

2、下拉菜单

select嵌套option

       

、、、

       

、、、

3、文本域

作用：多行输入文本的表单控件

默认提示文本

4、label标签

网页中，某个标签的说明文本，增大表单控件的点击范围，提示用户体验。

写法一：

男

写法二：

女

5、按钮

button 

按钮提示文字

表单区域空间——action发送数据

type=”属性值“有以下几种：

submit 提交按钮，点击后可以提交数据到后台（默认功能）

reset 重置按钮，点击后将表单控件恢复默认值

button 普通按钮，默认无功能，一般配合JavaScript

6、div和span标签和字体实体

1）无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

div:独占一行（大盒子）

div标签，独占一行

span:不换行（小盒子）

span标签，独占一行

2）字符实体

作用：在网页中显示预留字符

空格用 

<用<

>用>