Java学习的第三天（前端：表单标签+框架集）

• 表单标签(用于采集用户输入的数据，并且用于和服务器进行交互)

//input的属性
 type---输入框的类型
 name---框的名字，目的是接收方能够接受到对应的键（name）值(用户输入的内容)对（例如user=张三）
 value---默认显示的名字
 readonly--设置输入框只读
 placeholder--输入内容的提示信息，当用户开始输入后提示信息自动消失
 maxlength--输入框的长度

//文本框（注意：type="#"代表文本框）

  用户名：


//密码框（最大长度为8）
密码：

//单选按钮（注意：1.必须加name属性，且name属性值一致；2.展示给用户看的是外部的男女，而真正提交到服务器的是value设置的值）
男
女

//复选按钮（单选和复选默认选中时设置checked="checked"）
篮球
足球
乒乓球

//文件上传


//隐藏域(作用：把需要隐藏的内容放到隐藏域中，不让用户看到，但是需要传到服务器的一些敏感数据)


//下拉列表（默认选中设置selected=selected）

  --请选择--
  湖南
  湖北
  福建


//文本域(rows代表默认多少行；cols代表默认多少列)


//按钮（提交按钮/普通按钮/图片按钮）



//除了使用上述三种方式表示一个按钮还可以...（它的效果和提交按钮功能一样）

  提交按钮


  

• html5新特性

//选色卡

//没有精确到时间的日期

//精确到时分的日期

//邮箱（如果没有@会有提示功能）

//数字

• 框架集frameset

/为什么要使用？？  之前用浏览器打开一个界面时只是一个网页，如果我想在一个界面同时打开多个网页，那么就要用到框架集
/如何去使用
1.去body(因为body只能显示一个网页)
2.放框架集
3.将框架(页面)放入框架集中
4.最后设置框架集分为哪几部分
实例1（设置一个上30%；下70%的框架集）
/center.html（主网页）


    
        
        
    
    
        
        
    


/top.html


    
        
        
    
            
    


/bottom.html


    
        
        
    
    
    


实例2（设置一个左30%；右70%的框架集）
/center.html（主网页）


    
        
        
    
    
        
        
    


/left.html


    
        
        
    
            
    


/right.html


    
        
        
    
    
    


实例3（设置一个上30%；下左50%；下右50%的框架集）
//实现方式：先拆成上下两个部分，然后下部分拆成左右两个部分
/center.html(打开的网页)


    
        
        
    
    
        
        
            
            
        
    


/top.html


    
        
        
    
    
    


/left.html


    
        
        
    
    
    


/right.html


    
        
        
    
    
    

a0.png

a1.png

a2.png

• 框架集指定位置的跳转（框架集中超链接打开的方式）

/如果想跳转至某个指定的界面，这个时候需要给指定界面取个名字 name="abc"
/然后使用targe="abc"去跳转，但是如果想跳转至某张图片，必须指定

target属性：
    _self(跳转至自身，不会占用整个界面)
    _blank(打开一个新界面，会占用整个界面)
    _top(_parent在本身打开一个新界面，页面会占用整个界面)

• 内联框架iframe

/作用：在网页中随意添加网页
/属性：src  width  height  frameboder(内联框架的边框)="0/no"

• 实战练习

    
        
        
    
    
        

        

            

                

                    
 
                           用户名
                    
                    

                              
                    
                
                

                    

                           密码
                    
                    

                          
                    
                
                

                    

                           确认密码
                    
                    

                          
                    
                
                

                    

                           邮箱
                    
                    

                          
                    
                
                

                    

                           姓名
                    
                    

                          
                    
                
                

                    

                           年龄
                    
                    

                          
                    
                
                

                    

                           性别
                    
                    

                         男
                        女
                    
                
                

                    

                           爱好
                    
                    

                         篮球
                        足球
                        乒乓球
                        羽毛球
                    
                
                

                    

                           颜色
                    
                    

                          
                    
                
                

                    

                           籍贯
                    
                    

                         
                        
                            --请选择--
                            湖南
                            湖北
                            福建
                            上海
                        
                    
                
                

                    

                           头像
                    
                    

                         
                        
                    
                
                

                    

                           简介
                    
                    

                          
                    
                
                

                    

                           生日
                    
                    

                          
                    
                
                

                    

                         
                        
                        
                        
                        
                    
                
            
        
    

实战.png