Java小农养成记第三十一天

最新推荐文章于 2024-05-19 18:51:10 发布
最新推荐文章于 2024-05-19 18:51:10 发布
阅读量518 收藏
点赞数
分类专栏： Java学习笔记 文章标签： java html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45265623/article/details/122865281
版权

day31

今日内容

  1. HTML标签：表单标签
  2. CSS

表单标签

  • 表单：
    • 概念：用于采集用户输入的数据的。用于和服务器进行交互。
    • 使用的标签：form
  • 表单项标签
标签描述
<form>定义一个HTML表单，用于用户输入。
<input>定义一个输入控件。
<textarea>定义多行的文本输入控件。
<button>定义按钮。
<select>定义选择列表（下拉列表）。
<optgroup>定义选择列表中相关选项的组合。
<option>定义选择列表中的选项。
<label>定义input元素的标注。
<fieldset>定义围绕表单中元素的边框。
<legend>定义fieldset元素的标题。
<datalist>规定了input元素可能的选项列表。
<keygen>规定用于表单的密钥对生成器字段。
<output>定义一个计算的结果。
<body>
    <!--
        form:用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
            * 属性：
                action：指定提交数据的URL
                method：指定提交方式
                    分类：一共7种，2种比较常用
                        get:
                            1.请求参数会在地址栏中显示，会封装到请求行中(HTTP协议后讲解)
                            2.请求参数大小是有限制
                            3.不太安全
                        post:
                            1.请求参数不会在地址栏中显示，会封装在请求体中(HTTP协议后讲解)
                            2.请求参数的大小没有限制
                            3.较为安全
            * 注意：表单项中的数据要想被提交，必须指定器name属性
        表单项标签：
            * input:可以通过type属性值，改变元素展示的样式
                * type属性：
                    text：文本输入框，默认值
                        placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
                    password：密码输入框
                    radio：单选框
                        注意：
                            1.要想让多个单选框事项单选的效果，则多个单选框的name属性值必须一样。
                            2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
                            3.check属性，可以指定默认值
                    checkbox：复选框
                        注意：
                            1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
                            2.check属性，可以指定默认值
                    file：文件选择域
                    hidden：隐藏域，用于提交一些信息
                    按钮：
                        submit：提交按钮。可以提交表单
                        button：普通按钮
                        image：图片提交按钮
                            src属性指定图片的路径

                * label：指定输入项的文字描述信息
                    * 注意：
                        * label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
            * select：下拉列表
                * 子元素：option，指定列表项

            * textarea：文本域
                cols：指定列数，每一行有多少个字符
                rows：默认多少行
    -->
    <form action="#" method="get">
        <label for="username">用户名:</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>
        密码:<input type="password" name="password" placeholder="请输入密码"><br>
        性别:<input type="radio" name="sex" value="male" checked="checked">男
            <input type="radio" name="sex" value="female">女
        <br>
        爱好：<input type="checkbox" name="hobby" value="shopping" checked> 逛街
            <input type="checkbox" name="hobby" value="Java"> Java
            <input type="checkbox" name="hobby" value="game"> 游戏
        <br>
        图片：<input type="file" name="file">
        <br>
        隐藏域：<input type="hidden" name="id" value="aaa">
        <br>
        取色器：<input type="color" name="color">
        <br>
        生日：<input type="date" name="birthday">
        <br>
        生日：<input type="datetime-local" name="birthday">
        <br>
        email：<input type="email" name="email">
        <br>
        年龄：<input type="number" name="age">
        <br>
        省份：<select name="province">
                <option value="">--请选择--</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">陕西</option>
                <option value="4" selected>深圳</option>
            </select>
        <br>
        自我描述：
            <textarea cols="20" rows="5" name="des"></textarea>
        <br>
        <input type="submit" value="登录">
        <br>
        <input type="button" value="一个按钮">
        <br>
        <input type="image" src="img/regbtn.jpg">
        <br>

    </form>

</body>

案例——注册案例(html)

<body>
    <!--定义表单form-->
    <form action="#" method="post">
        <table border="1" align="center" width="40%">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>
            <tr>
                <td><label>性别</label></td>
                <td>
                    <input type="radio" name=gender value="male">男
                    <input type="radio" name=gender value="female">女
                </td>
            </tr>
            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>
            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td>
                    <input type="text" name="checkcode" id="checkcode">
                    <img src="img/verify_code.jpg">
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</body>

CSS：页面美化和布局控制

  1. 概念：CSS 指层叠样式表 (Cascading Style Sheets)

    • 层叠：多个样式可以作用在同一个html的元素上，同时生效

  2. 好处：

    1. 功能强大
    2. 将内容展示和样式控制分离
      • 降低耦合度，解耦
      • 让分工协作更容易
      • 提高开发效率

CSS的使用：css和html

  • 内联样式：
<body>
    <!--
        内联样式
            * 在标签内使用style属性指定css代码
    -->
    <div style="color: red">hello css</div>
</body>
  • 内部样式：
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <!--
        内部样式
            * 在head标签内，定义style标签的标签内容就是css代码
    -->
    <div>hello css</div>
</body>
  • 外部样式：
<!--a.css-->
div{
    color:red;
}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/a.css">
    <!--使用以下代码和link的效果是一样的
        <style>
            @import "css/a.css";
        </style>
    -->
</head>
<body>
    <!--
        外部样式
            1. 定义css资源文件
            2. 在head标签内，定义link标签，引入外部的资源文件
    -->
    <div>hello css</div>
</body>

CSS语法：

  • 格式：
    选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ……
    }
  • 选择器：筛选具有相似特征的元素
  • 注意：
    • 每一对属性需要使用;隔开，最后一对属性可以不加;

选择器：筛选具有相似特征的元素

* 分类：
	1. 基础选择器：id选择器、元素选择器、类选择器
	2. 扩展选择器：

基础选择器：

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: green;
        }
        .cls1{
            color: blue;
        }
    </style>
</head>
<body>
    <!--
        基础选择器：
            1. id选择器：选择器具体的id属性值的元素,建议在一个html页面中id值唯一
                语法：#id属性值{}
            2. 元素选择器：选择具有相同标签名称的元素
                语法：标签名称{}
            3. 类选择器：选择具有相同的class属性值的元素
                语法：.class属性值{}
            注意优先级：id选择器>类选择器>元素选择器
    -->
    <div id="div1">传智播客</div>
    <div>黑马程序员</div>
    <div class="cls1">黑马程序员</div>
</body>

扩展选择器：

<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p {
            color: red;
        }
        div > p {
            border: 1px solid;
        }
        input[type="text"]{
            border: 5px solid;
        }
        a:link{
            color: pink;
        }
        a:visited{
            color: red;
        }
        a:hover{
            color: yellow;
        }
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <!--
        扩展选择器：
            1.选择所有元素：
                语法：*{}
            2.并集选择器：几个元素具有相同的样式，用逗号分隔每个元素的名称。
                语法：选择器1,选择器2{} 如：div,p 	选择所有<div>元素和<p>元素
            3.子选择器：用于选择元素内部的元素。
                语法：选择器1 选择器2{}  如：div p 	选择<div>元素内的所有<p>元素
            4.父选择器：用于选择特定父元素。
                语法：选择器1 > 选择器2{} 如：div>p 	选择所有父级是 <div> 元素的 <p> 元素
            5.属性选择器：选择元素名称,属性名=属性值的元素
                语法：元素名称[属性名="属性值"]{}
            6.伪类选择器：选择一些元素具有的状态
                语法：元素:状态{} 如<a>
                状态：
                    :link向未访问的链接添加特殊的样式
                    :visited 选择器设置访问过的页面链接的样式
                    :hover选择器当有鼠标悬停在其上的链接样式
                    :active 选择器设置当你点击链接时的样式
    -->
    <div id="div1">
        <p>传智播客</p>
    </div>
    <p>黑马程序员</p>
    <div>传智播客</div>
    <input type="text"><br>
    <input type="password"><br>
    <a href="#">传智播客</a>
</body>

属性

  • 字体
属性说明
font在一个声明中设置所有字体属性
font-family规定文本的字体系列
font-size规定文本的字体尺寸
font-style规定文本的字体样式
font-variant规定文本的字体样式
font-weight规定字体的粗细
@font-face一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体
font-size-adjust为元素规定 aspect 值
font-stretch收缩或拉伸当前的字体系列

font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
注意：line-height属性设置行与行之间的空间。

  • 文本
属性说明
color设置文本的颜色
line-height设置行高
text-align规定文本的水平对齐方式
  • 背景
    background 复合属性。设置对象的背景特性。
    语法：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
值说明
background-color指定要使用的背景颜色
background-position指定背景图像的位置
background-size指定背景图片的大小
background-repeat指定如何重复背景图像
background-origin指定背景图像的定位区域
background-clip指定背景图像的绘画区域
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
background-image指定要使用的一个或多个背景图像
  • 边框
    border 复合属性。设置对象边框的特性。
    可以设置的属性分别（按顺序）：border-width, border-style,border-color.
    border-width 指定边框的宽度
    border-style 指定边框的样式
    border-color 指定边框的颜色
  • 尺寸
    height 设置元素的高度
    width 设置元素的宽度
  • 盒子模型：控制布局

外边距：

属性说明
margin在一个声明中设置所有外边距属性
margin-bottom设置元素的下外边距
margin-left设置元素的左外边距
margin-right设置元素的右外边距
margin-top设置元素的上外边距

内边距：

属性说明
padding在一个声明中设置所有填充属性
padding-bottom设置元素的底填充
padding-left设置元素的左填充
padding-right设置元素的右填充
padding-top设置元素的顶部填充
  • 注意：默认情况下内边距会影响整个盒子的大小
  • 可以设置盒子的属性，让width和height就是最终盒子的大小
  • box-sizing: border-box;

float属性指定一个盒子（元素）是否应该浮动。
注意： 绝对定位的元素忽略float属性！
属性值

值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显示在其在文本中出现的位置。

案例——注册案例(CSS)

/*11_案例2_注册页面(css).css*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background: url("../img/register_bg.png") no-repeat center;
}
.rg_layout{
    width: 900px;
    height: 500px;
    border: 5px solid #eeeeee;
    background: white;
    /*
    让div水平居中
     */
    margin: auto;
    margin-top: 15px;
}
.rg_left{
    float: left;
    margin: 15px;
}
.rg_left p:first-child{
    color: #FFd026;
    font-size: 20px;
}
.rg_left p:last-child{
    color: #A6A6A6;
    font-size: 20px;
}
.rg_center{
    float: left;
    width: 550px;
}
.td_left{
    text-align: right;
    width: 100px;
    height: 45px;
}
.td_right{
    padding-left: 50px;
}
#username,#email,#password,#name,#tel,#checkcode{
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6;
    /*
    设置边框圆角
     */
    border-radius: 5px;
    padding-left: 10px;
}
#checkcode{
    width: 110px;
}
#img_check{
    height: 32px;
    vertical-align: middle;
}
#btn_sub{
    width: 150px;
    height: 40px;
    background: #FFd026;
    border: 1px solid #FFd026;
    border-radius: 5px;
}
.rg_right{
    float: right;
}
.rg_right p{
    font-size: 15px;
}
.rg_right p a{
    color:pink;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/11_案例2_注册页面(css).css">
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <!--定义表单form-->
            <form action="#" method="post">
                <table border="0" align="center" width="550px">
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name=gender value="male">男
                            <input type="radio" name=gender value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right">
                            <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" value="注册" id="btn_sub">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="rg_right">
            <p>已有账户?<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>
舍得..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小农signcode算法测试源码
11-03
小农signcode算法测试源码 解压密码xiami2834
Java小农养成记第二十一天
qq_45265623的博客
01-26 415
Java入门笔记
Java小农养成记第三十九天
qq_45265623的博客
02-20 354
javaEE的cookie和session会话
Java小农养成记第三十天
qq_45265623的博客
02-08 86
Java入门笔记
Java小农养成记第三十三天
qq_45265623的博客
02-12 546
java入门笔记
小农sign code算法源码分享，欢迎一起学习交流
11-04
小农sign code算法源码分享，欢迎一起学习交流，如需要小农，贵旅优品，黄果树，安心e购，空港商城也可以联系。解压密码：lnzhwh
安装java JDK教程.rar
11-08
64位的Java JDK安装包。博客上有免费的配套安装教程！
小农与市场化.ppt
11-29
小农与市场化.ppt
小农水安全施工方案.docx
10-01
小农水安全施工方案.docx
jar包增量更新分析
junlaiyan的专栏
05-16 242
借助jdeps分析出jar包的增量文件
docker中安装jenkins，并在node和cloud上跑通基于源码控制SCM的pipeline
最新发布
qq_29022265的博客
05-19 797
从安装jenkins到创建jenkins的node和cloud，最后再将scm和FreeStyle两种流水线跑通。
java实现拼图小游戏
monkey108的博客
05-16 607
本文主要提供用java实现的拼图小游戏源代码。
命令执行漏洞（二）
XLbb的博客
05-15 891
POST方法，S2-045-bypass-2漏洞存在！,程序更改为S2-045-bypass-2漏洞测试模式, 响应码: 200。POST方法，S2-046-bypass漏洞存在！POST方法，S2-045-bypass漏洞存在！POST方法，S2-046-1漏洞存在！POST方法，S2-046-2漏洞存在！POST方法，S2-046-3漏洞存在！POST方法，S2-045-1漏洞存在！POST方法，S2-045-3漏洞存在！POST方法，S2-045-2漏洞存在！POST方法，S2-045-4漏洞存在！
c【语言】了解指针，爱上指针（1）
yzqy_的博客
05-16 880
在计算机中，数据是存储在内存中的，cpu从内存中读取数据，为了方便读取数据，内存又被划分为了一个个的内存单元，一个内存单元的大小就是一字节，一字节等于8bit位，我们给内存进行编号，这个编号就是地址，在c语言中给这个地址起了个名字。是的，亲爱的读者你肯定发现了，&a、p和pc输出的地址是一样的,但&a+1与p+1输出的地址是一样的00EFF940，一次都跳过了4字节，而pc+1输出的却是00EFF93D，一次只跳过一个字节。但是硬件与硬件之间是相互独立的，这该如何实现数据传输呢？”答案当然是否定的。
java数据结构与算法(验证二叉搜索树)
磐门的博客
05-17 241
节点返回空为ture,节点的值不在对应数据大小范围内返回false。将验证二叉搜索树计算同样可以转换为相同子问题，所以比较适合用递归。node为root的左节点时，max更新为root.val。node为root的右节点时，min更新为root.val。
Kubernetes 审计日志采集与分析最佳实践
观测云的博客
05-17 1013
​Kubernetes 在 1.7 版本中发布了审计（Audit）日志功能，通过审计日志，我们能够非常清晰的知道 K8S 集群到底发生了什么事情。
java导出excel动态加载多sheet多复杂表头
weixin_43931108的博客
05-14 242
java导出excel动态加载多sheet多复杂表头
Android Model引入其他aar包 导致无法打包成aar
qq_27400335的博客
05-16 339
Android Model引入其他aar包 导致无法打包成aar
小农耕作可持续性模型
10-07
小农耕作可持续性模型是一种为了解决全球饥饿问题而提出的农业模型。该模型通过提高农民的产出效率和农田的生产潜力，以确保农民能够养活更多的人口，同时保护土壤和环境资源。小农耕作可持续性模型的关键在于精确的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值