【Java EE】Day08 HTML&CSS

一、表单

1、概述

• 采集数据，与服务器交互包括
• form表单，需要提交则必须设置name属性，action方式主要包
  • get：参数会在地址栏显示(请求行)，长度有限
  • post：参数被封装在请求体，参数大小无限制
  • 查看提交的数据：F12

2、常用标签--Input

• type属性值：button checkbox hidden password radio  reset submit text
• text：
  • 文本框 ，默认
  • placehold：提示信息
• ratio单选框
  • 实现单选，则多个单选框的name属性值必须相同，并提供value属性表示提交的值
  • checked指定默认值
• tel：电话号码字段
  • 只用于手机　　
• 其他：hidden隐藏域、image图像
• H5的input属性
  • 取色器color
  • 自选日期date
  • 日期时间date-time-local
  • 邮箱email自动校验　　　
  • 数字number自动校验　

 3、表单项标签select和文本域textarea

• select：下拉列表
  • 子选项option，指定列表项
  • selected
• textarea：文本域
  • cols：指定列数
  • rows：指定行数　　　

二、CSS层叠样式表

1、概述

• Cascading Style Sheet
• 层叠：多个样式可以作用在同一个元素

2、好处

• 较降低耦合度
• 将内容和样式控制分离

3、使用

• 内联样式
  • 标签内使用style属性指定css
  • 不推荐，并未降低耦合度
• 内部样式
  • head内定义style标签
  • 标签内部：div{    }
• 外部样式
  • 单独css资源文件
  • head内定义link标签：
  • 其他写法 

4、CSS语法

• 格式：选择器{属性名1:属性值1;……}
• 选择器
  • 具有相似特征的元素
  • 如div、p等

5、选择器

• 基础选择器
  • id选择器：#id属性值{}
  • 元素选择器(优先级低)：元素名{}
  • 类选择器：.class值{}
• 扩展选择器
  • 选择所有：*{}
  • 并集选择器：A,B{}
  • 子选择器：A B{}(选择A下的B)
  • 父选择器：A>B{}(选择B上的A)
  • 属性选择器：元素名[属性名="属性值"]{}
  • 伪类选择器：元素:状态{}
    • 常见状态：link：初始化、visited：访问过、active：正被访问、hover：鼠标悬浮

6、属性

• 字体/文本
  • font-size：字体大小
  • color：文本颜色
  • text-align：文本对齐方式
  • line-height：文本行高
• 背景
  • background：复合属性
• 边框
  • border
  • 复合属性，4条线分开设置
• 尺寸：
  • width：宽度
  • height：高度

    
    
    


        
传智播客
        

            黑马程序员
        

7、盒子模型

• 控制页面的布局
• 属性：
  • 外边距：margin
  • 内边距：padding
    • 会影响盒子大小
    • 解决： box-sizing:border-box;
• 浮动

    
    
    



    
    
  

aaaaa
bbbbb
ccccc

三、案例：使用CSS美化注册页面

    
    
    


    

        

            
新用户注册
            
USER REGISTER
        
        

            

                

                    

                        
用户名
                        

                    

                    

                        
密码
                        

                    

                    

                        
Email
                        

                    

                    

                        
姓名
                        

                    

                    

                        
手机号
                        

                    

                    

                        
性别
                        

                             男
                             女
                        
                    

                    

                        
出生日期
                        

                    

                    

                        
验证码
                        

                            
                        
                    


                    

                        

                    
                


            
        
        

            
已有帐号？立即登录