JavaWeb——html表单与CSS

2021/7/10 20:35:59

编程Tag： 选择器属性标签 css 元素 html javaweb color

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！