学习JavaWeb第二天

day02

表单

什么是表单

• 接收用户录入数据，通过http请求把数据带入到后台与服务器进行数据交互
• 参数提交:都是以键值对方式提交到后台

组成 ：

• 表单域

  • form

    • action

      • 提交服务器地址

    • method

      • get

        • 1、暴露用户信息到url地址上
        • 2、允许数据量大小 最大2kb
        • 3、交互信息速度要快于post

      • post

        • 1、提交的用户信息在请求体中，比较安全
        • 2、允许的数据量大小无限制
        • 3、慢与get提交

    • enctype

      • application/x-www-form-urlencoded

        • 普通表单提交默认值 它会把表单信息先编码再提交

      • multipart/form-data

        • 文件上传

      • text/plain

        • 以文本的方式去提交数据

• 表单控件

  • type

    • input

      • 文本框

        • text

      • 密码框

        • password

      • 单选框

        • radio

          • checked="checked

            • 默认选中

          • 男

          • 女
            

      • 复选框

        • checkbox

          • checked="checked

            • 默认选中

        • 上网

        • 喝酒

        • 把妹

        • 唱K
          

      • 下拉框

        • select

          • selected=“selected”

            • 默认选中
          • 广东
          • 河南

          • 省

      • 文件框

        • file

      • 日期框

        • date

      • 邮件框

        • email

      • 隐藏域

        • hidden

      • 文本域

        • textarea

          • cols

            • 定义每一列容纳的字符个数

          • rows

            • 定义有几行

• 提示信息

  • name

    • 提示信息 接收表单数据 后台通过name 获取它的value值

  • id

    • 代表当前文本框的唯一标示

案例

认识div

概述

• 是一个图层，说白了它就是一个容器，在这个容器里面你可以写一些html代码，它是一个块级元素

作用

• 对页面布局进行容器的划分

认识行级元素

• 块级元素:div 根据你设置的大小去改变容器的大小,垂直分布
• 行级元素:span 根据你的内容大小来绝对容器的大小,水平分布

div+css

页面布局

• div是一个容器，可以放html代码，这个代码将来在页面中哪个位置去展示给用户看，就得需要css进行定位

css

css概述

• 层叠样式表

• 作用

  • 美化页面

引入方式

• 行内

• 内部

• 外部

  • 第一步先写外部的css文件

  • 第二步引入外部的css文件

    • rel:stylesheet 样式表
    • href:外部css的具体距离位置
    • type:引入css样式

• 优先级

  • 行内>内部>外部

css语法特点

• 选择器{属性名:属性值;属性名:属性值;属性名:属性值}

常见选择器

• id选择器

• 类选择器

• 标签选择器

• 优先级

  • id>类>标签

扩展选择器

• 派生选择器

• 选择器分组

• 属性选择器

• 伪类选择器

属性学习

• 背景色

  • background: yellow;

• 显示或隐藏

  • display

    • none

      • 隐藏容器

    • block

      • 按照块级方式去显示

    • inline

      • 按照行内方式去显示

• 字体大小

  • font-size

• 字体颜色

  • color

• 字体样式

  • font-family

浮动

• css定位的一种手段，它可以让div由垂直分布变为水平分布

盒子模型

CSS定位

• 绝对定位

• 相对定位