Java教程

JavaWeb——html表单与CSS

本文主要是介绍JavaWeb——html表单与CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

html表单介绍

概念:用于采集用户输入的数据,用于和服务器交互。
使用的标签:from。用于定义表单。可以定义一个范围,范围代表采集用户数据的范围。

表单 属性:
        1.action:指定提交数据的URL。
        2.method:指定提交的方式。
                method分类:一共7种,两种比较常用
                        get:
                                1.请求的参数会在地址栏中显示。
                                 2.请求参数的长度是有限制的。
                                 3.不太安全
                        post
                                1.请求的参数不会再地址栏中显示。
                                2.请求参数的长度没有限制。
                                3.比较安全。

 注意:表单项中的数据要想被提交必须指定name属性。

表单项标签

input标签

input:可以通过type属性值,改变元素展示的样式
type属性:
        1.text:文本输入框,input默认的
            placeholder:指定输入框的提示信息:当输入框的内容发生变化,会自动清空提示信息
        2.password:密码输入框
        3.radio:单选框
            *注意:
                1.要想要多个单选框实现单选的效果,单选框的name必须相同
                2.一般会给每一个单选框提供value属性,指定其提交的值
                3.checked属性,可以指定默认值
        4.checkbox:复选框
                1.一般会给每一个单选框提供value属性,指定其提交的值
                2.checked属性,可以指定默认值
        5.file:文件选择框
        6.hidden:隐藏域,用于提交隐秘信息
        7.按钮:
            submit:提交按钮。可以提交表单
            button:普通按钮
            image:图片提交按钮
                *scr属性指定图片路径
        8.date:日期
        9.datetime-local:日期

label标签

        lable:指定输入项的文字描述信息
        注意:label的for属性一般会和input的id属性值对应。如果对应这点击label区域,会让input区域获得焦点。


select标签

         select:下拉列表
        子元素:option,指定列表项

textarea:文本域

       标签属性:

        1. cols:指定列数,每一行都有多少字符
        2.row:默认多少行。

CSS:页面美化和布局控制

1.概念:Cascading Style Sheets 层叠样式表
        *层叠:多个样式可以同时作用于同一个html上,同时生效

2.好处:
        1.功能比较强大
        2.将内容的展示和样式的控制分离
            *降低耦合度
            *让分工协作更容易
            *提高开发效率
        3.CSS的使用:CSS与html结合方式
            1.内联样式
                *在标签内使用Style属性指定CSS代码
                *如<div style="color: red;">hello css</div>
            2.内部样式
                *在head标签内,定义style标签,style标签的标签体内内容就是CSS代码
                *如 <style>
                    div{
                      color: blue;
                    }
                    </style>
                    <div>hello css</div>
            3.外部样式
                1.定义CSS的资源文件
                2.在head标签内,定义link标签,引入外部资源文件
                *如
                    *a.css
                        div{
                            color: green;
                        }
                 <link rel="stylesheet" href="css/a.css">
             注意:
                *1.2.3种方式,css的作用范围越来越大
                *1方式不常用,后期常用2.3
                *第三种格式可以写为:
                    <style>
                        @import"css/a.css";
                    </style>
3.CSS的语法
        *格式
            选择器{
                属性名1:属性值1;
                属性名2:属性值2;
                属性名3:属性值3;
                ...
                属性名n:属性值n;
            }
         *选择器:筛选具有相同特征的元素
         *注意:
            *每一对的属性需要使用分号分开,最后一对可以不需要加分号

4.选择器筛选具有相同特征的元素
        *分类
            1.基础选择器
                *id选择器
                    语法:#id属性值{}
                *元素选择器:选择具有相同标签名称的元素
                    语法:标签名称{}
                    注意:id选择器的优先级大于元素选择器
                *类选择器:选择具有相同class属性值的元素
                    语法:.class属性值{}
                    注意:类选择器的优先级高于元素选择器
                *优先级:id选择器>类选择器>元素选择器
            2.扩展选择器:
                1.选择所有元素:
                    *语法:*{}
                2.并集选择器
                    *语法:选择器1,选择器2{}
                3.子选择器:筛选选择器1下的选择器2
                    *语法:选择器1 选择器2{}(中间有个空格)
                4.父选择器:筛选选择器1元素的父选择器2
                    *语法:选择器1>选择器2{}
                5.属性选择器:选择元素名称,属性名=属性值
                    *语法:元素名称[属性名="属性值"]{}
                    *input [type="text"]{}
                6.伪类选择器:选择一些元素具有的状态
                    *语法:元素:状态{}
                    *如:<a>
                        *状态:
                            *link:初始化状态
                            *visited:被访问过的状态
                            *active:正在访问的状态
                            *hover:鼠标悬浮的状态
                                   a:link{
                                        color: pink;
                                    }
                                    a:hover{
                                        color: green;
                                    }
                                    a:active{
                                        color: yellow;
                                    }
                                    a:visited{
                                        color: aqua;
                                    }
5.CSS的属性
        1.字体
            *font-size:字体大小
            *color:字体属性
            *text-align:对齐方式
            *line-height:行高
        2.背景
            *background:
                1.background-url("")
                2.background-repeat:是否重复覆盖
        3.边框
            *border:设置边框
        4.尺寸
            *width:宽度
            *height:高度
        5.盒子模型:页面布局的控制
            *Multi:外边距
            *padding:内边距
                *默认情况先内边距会影响整个盒子的大小
                *box-sizing: border-box; 设置盒子的属性,让width与height就是最终盒子的大小。
            *float:浮动
                *left
                *right

        下面附上使用CSS内部样式制作html注册界面的实例:

        成品图:

        

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
  <style>
      *{
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
      }
      body{
          background: url("img/gang1.jpg") no-repeat;
      }
      .div1{
          width: 1200px;
          height: 700px;
          border: 15px solid bisque;
          background-color: white;
          padding: 15px;
          box-sizing: border-box;
          margin: auto;
          margin-top: 200px;
      }
      .div_left{
          float: left;
          margin-right: 150px;
      }
      .div_right a{
          color: pink;
      }
      .div_right{
          float: right;
      }
      .div_center{
          float: left;
          width: 550px;
          margin-top: 70px;
          font-size: 20px;
      }
      .p_1{
          color: #ffd026;
          font-size: 25px;
      }
      .p_2{
          color: #a6a6a6;
          font-size: 25px;
      }
      .td_left{
          width: 100px;
          text-align: right;
          height: 55px;
      }
      .td_right{
          padding-left: 40px;
      }
      #username,#password,#email,#phone,#date,#check{
          width: 300px;
          height: 36px;
          border: 1px solid #a6a6a6;
          border-radius: 5px;
          padding-left: 10px;
      }
      #check{
          width:  250px;
      }
      #img{
          width: 40px;
          left: 40px;
          vertical-align: middle;
      }
      #sum{
          width: 150px;
          height: 40px;
          background-color: yellow;
          border: 1px solid yellow;
          margin-top: 15px;
      }
  </style>
</head>
<body>
<div class="div1">
    <div class="div_left">
        <p class="p_1">新用户注册</p>
        <p class="p_2">USER REGISTER</p>
    </div>
    <div class="div_center">
      <div class="div_table">
        <table>
            <tr>
                <td class="td_left">用户名:</td>
                <td class="td_right"><input type="text" name="username" placeholder="请输入账号" id="username"></td>
            </tr>
            <tr>
                <td class="td_left">密码:</td>
                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td class="td_left">邮箱:</td>
                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
            </tr>
            <tr>
                <td class="td_left">手机:</td>
                <td class="td_right"><input type="tel" name="phone" id="phone" placeholder="请输入手机号"></td>
            </tr>
            <tr>
                <td class="td_left">性别:</td>
                <td class="td_right"><input type="radio" name="gender" id="gender" value="man">男&nbsp&nbsp<input type="radio" id="genders" name="gender" value="woman">女
                </td>
            </tr>
            <tr>
                <td class="td_left">出生日期:</td>
                <td class="td_right"><input type="date" name="date" id="date"></td>
            </tr>
            <tr>
                <td class="td_left">验证码:</td>
                <td class="td_right"><input type="text" name="check" id="check"><img src="img/116.jpg" id="img"></td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="submit" value="注册" id="sum"></td>
            </tr>
        </table>
      </div>
    </div>
    <div class="div_right">
        <p>已有帐号?<a href="#">立即登录</a></p>
    </div>
</div>
</body>
</html>

这篇关于JavaWeb——html表单与CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!