JavaEE Day08 HTML&CSS

今日内容

HTML标签：表单标签
CSS：页面样式控制，美化页面，完成页面布局

一、表单标签

1.概述

用于采集用户输入数据的，如输入的用户名和密码，用于与服务器进行交互

使用from标签

form：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围

属性：

action：指定数据提交的url

method：指定提交方式

分类：一共7种，两种比较常用

get：

1.请求参数会在地址栏中显示，会封装到请求行中（HTTP协议会讲解）

2.请求参数的长度是有限制的

3.get不安全

post

1.请求参数不会再地址栏中显示，会被封装在请求体中（HTTP协议会讲解）

2.请求参数的大小没有限制

3.post较为安全

表单中的数据（表单项）要想被提交，必须指定其name属性，不然就不会被提交

F12--->开发者工具查看提交的数据

隐藏在了协议内部

 <form action="#" method="post">

            用户名：<input name="username"><br>

            密码：<input name="password"><br>

            <input type="submit" value="登录" >

        </form>

        <hr />

        密码不会提示：<input name="password"><br>

        不会被提交：<input type="text"><br>

2.HTML标签_表单标签_表单项标签input

input：可以通过type属性值，改变元素展示的样式

常见的type属性值：button checkbox hidden password radio reset submit text

注意：

label的for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点

text：文本输入框，默认

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

password：密码输入框
radio：单选框

注意：

要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
一般会给每一个单选框提供value属性，指示选中后被提交的值
checked可以指定默认值

checkbox：复选框

注意：

一般会给每一个复选框提供value属性，指示选中后被提交的值
checked可以指定默认值

file：文件
hidden：隐藏域，用于提交一些信息
按钮

submit：提交按钮，用于提交表单
button：一个按钮，和后端交互
image：图片提交按钮，通过src属性指定图片的路径

H5的input属性

取色器color
自选日期date
日期时间date-time-local
邮箱email自动校验
数字 number：自动校验

tel用于手机，电脑浏览器用不了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单项标签</title>

</head>

<body>

    <form action="#" method="get">

        <!--placeholder给出提示信息，value达不到此效果-->

        <label for="username">用户名：</label><input type="text" name="username" placeholder="请输入用户名" id="username"><br>

        密码：<input type="password" name="password" placeholder="请输入密码"><br>

        性别：<input type="radio" name="gender" value="male" checked="checked"> 男

              <input type="radio" name="gender" value="female"> 女 <br>

        爱好：<input type="checkbox" name="hobby" value="shopping">逛街

            <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"><br>

        <label for="date" >日期：</label><input type="date" id="date" name="birthday"><br>

        生日：<input type="datetime-local" name="birthday"><br>

        邮箱：<input type="email" name="email"><br>

        年龄：<input type="number" name="age"><br>

        <input type="button" value="一个按钮"><br>

        <input type="image" src="logo.jpg"><br>

        <input type="submit" value="登录">

    </form>

</body>

</html>

3.表单项标签select和textarea

select：下拉列表

子元素：option，指定列表项
selected

textarea：文本域

cols：指定列数
rows：指定行数

4.案例：注册页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

</head>

<body>

    <!--定义表单-->

    <form action="#" method="post">

        <table border="1" align="center" width="400">

            <tr>

                <td><label for="username">用户名</label></td>

                <td><input type="text" name="username" id="username" placeholder="请输入用户名"></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="number" name="tel" id="tel"></td>

            </tr>

            <tr>

                <td>性别</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">

                    <input type="image"src="img/verify_code.jpg"></td>

            </tr>

            <tr>

                <!--合并单元格用td-->

                <td colspan="2">

                    <center>

                        <input type="submit" value="注册">

                    </center>

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

二、CSS：页面美化和布局控制

1.概述：Cascading Style Sheet层叠样式表

层叠：多个样式可以作用在同一个html元素上【m:n】，同时生效

2.好处（与html的属性控制样式相比）

功能比较强大
之前<font color='red'>耦合度高，现在将内容展示和样式控制分离，好处

降低耦合度，实现了解耦
让分工协作更容易
提高开发的效率

3.CSS的使用--与 html结合方式

内联样式：在标签内使用style属性指定css代码

如：<div style="color:red;">hello css</div>
不推荐使用，并未降低耦合性

内部样式：在head标签内定义style标签，style标签体内容就是css代码

多个div的样式会相同

<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div{
color:blue;
}
</style>
</head>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>内部样式</title>

    <style>

        div{

            color:blue;

    </style>

</head>

<body>

    <!--

        内部样式：

            在head标签内定义style标签，style标签体内容就是css代码

-->

    <div>hello css</div>

    <br>

    <div>hello java</div>

</body>

</html>

外部样式
1.定义css的资源文件
2.在head内定义link标签，引入外部的资源文件

如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>外部样式</title>

    <link rel="stylesheet" href="css/a.css" />

</head>

<body>

    <!--

        外部样式：

            1.定义css的资源文件

            2.在head内定义link标签，引入外部的资源文件

        -->

    <div>hello css</div>

    <br>

    <div>hello java</div>

</body>

</html>

注意：

1，2，3种方式，css范围越来越大
1方式不常用，常用第2和3种
第三种格式的另一种写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>外部样式</title>

    <!--<link rel="stylesheet" href="css/a.css" />-->

    <style>

        @import "css/a.css";

    </style>

</head>

<body>

    <!--

        外部样式：

            1.定义css的资源文件

            2.在head内定义link标签，引入外部的资源文件

        -->

    <div>hello css</div>

    <br>

    <div>hello java</div>

</body>

</html>

4.CSS的语法：

格式：

  选择器{

属性名1：属性值1；

          属性名2：属性值2；

……

  }

选择器：具有相似特征的元素
注意事项：

每一对属性需要使用分号隔开，最后一对属性可以不加分号（类似数据库建表时的逗号）

div{

    color:green;

}

p{

    color:red;

    font-size:30px

}

5.选择器有哪些☆

概念：筛选具有相似特征的元素div、p等

分类

基础选择器

id选择器：选择器具体的id属性值的元素，建议在一个html页面中id值为1

语法：#id属性值{}

元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

注意：id选择器的优先级要高于元素选择器！

类选择器：选择具有相同class值的元素

语法：.class属性值{}

注意：类选择器的优先级要高于元素选择器！

元素选择器优先级低，类选择器和id选择器优先级高

扩展选择器

选择所有元素：*{}
并集选择器

选择器1，选择器2｛｝

子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2｛｝

父选择器：筛选选择器2上的选择器1（父子）

语法：选择器1>选择器2｛｝

属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名="属性值"]{ }
常用于input

伪类选择器：选择一些元素所具有的状态

语法：元素：状态{}
如：<a>

状态：

link：初始化的状态
visited：访问过的状态
active：正被访问的状态
hover：鼠标悬浮状态

6.属性

6.1字体、文本

font-size：字体大小
color：文本颜色
text-align：文本对齐方式
line-height：文本行高

6.2背景

background：复合属性

6.3边框

border：设置边框，是一个复合属性（4条线可以分开设置）

6.4尺寸

width：宽度
height：高度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>字体属性</title>

    <style>

        p{

            color:#ff0000;

            font-size: 30px;

            text-align: center;

            line-height: 100px;

            /*

                border 边框

            */

            border:1px solid red;

        }

        div{

            border:1px solid red;

            /*

                尺寸

            */

            width:200px;

            height:200px;

            background: url("img/logo.jpg") no-repeat center;

        }

    </style>

</head>

<body>

        <p>传智播客</p>

        <div>

            黑马程序员

        </div>

</body>

</html>

6.5盒子模型：控制页面的布局

两个属性：

margin：外边距
padding：内边距

默认情况下，内边距会影响整个盒子的大小
解决方案：设置盒子的属性，让width和height就是盒子最终的大小
box-sizing:border-box;

浮动float

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>字体属性</title>

    <style>

       div{

           border:1px solid red;

           width:100px;

           /*

                浮动起来，可以位于第一行

           */

       }

        .div1{

            width:100px;

            height:100px;

            /*margin-left: 50px;*/

            /*margin-top:50px;*/

        }

        .div2{

            width:200px;

            height:200px;

            /*设置内边距*/

            padding:50px;

            /*这样的话，外部盒子会变大

            解决方案：设置盒子的属性，让width和height就是盒子最终的大小

            */

            box-sizing:border-box;

        }

        .div3{

            float:left;

        }

       .div4{

           float:left;

       }

       .div5{

           float:right;

       }

    </style>

</head>

<body>

<div class="div2">

    <!--里面的盒子为主体，居中显示则需要设置外边距-->

    <div class="div1">  </div>

</div>

<div class="div3">aaaaa</div>

<div class="div4">bbbbb</div>

<div class="div5">ccccc</div>

</body>

</html>

三、案例--CSS美化注册页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册页面</title>

    <style>

        *{

            margin:0px;

            padding:0px;

            box-sizing:border-box;

        }

        body{

            background:url("image/register_bg.png") no-repeat center;

        }

        .rg_layout{

            width:900px;

            height:500px;

            border:8px solid #eeeeee;

            /*takecolor取色器工具*/

            background-color:white;

            /*让div水平居中*/

            margin: auto;/*水平居中*/

            margin-top: 15px;/*外边距*/

        }

        .rg_left{

            /*border:1px solid red;*/

            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{

            /*border:1px solid red;*/

            float:left;

            width: 450px;

        }

        .rg_right{

            /*border:1px solid red;*/

            float:right;

            margin:15px;

        }

        .rg_right p{

            font-size: 15px;

        }

        .rg_right p a{

            color:pink;

        }

        .td_left{

            width: 100px;

            text-align: right;

            height: 45px;

        }

        .td_right{

            padding-left: 50px;

        }

        #username, #password, #email, #tel, #checkcode, #birthday, #name{

            width: 251px;

            height:32px;

            border:1px solid grey;

            /*设置边框为圆角*/

            border-radius:5px;

            padding-left: 10px;

        }

        #checkcode{

            width: 110px;

        }

        #img_check{

            height: 32px;

            /*设置垂直居中*/

            vertical-align: middle;

        }

        #btn_sub{

            width: 150px;

            height: 40px;

            background-color: yellow;

            border: 1px solid yellow;

        }

    </style>

</head>

<body>

    <div class="rg_layout">

        <div class="rg_left">

            <p>新用户注册</p>

            <p>USER REGISTER</p>

        </div>

        <div class="rg_center">

            <div class="rg_form">

                <table>

                    <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="请输入邮箱"></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 src="img/verify_code.jpg" id="img_check">

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>

                    </tr>

                </table>

            </div>

        </div>

        <div class="rg_right">

            <p>已有帐号？<a href="#">立即登录</a>   </p>

        </div>

    </div>

</body>

</html>

来自为知笔记(Wiz)

JavaEE Day08 HTML&CSS的更多相关文章

【转】谁说Vim不是IDE？（一）
谁说Vim不是IDE?(一) 话说操作系统.编程语言和编辑器似乎是程序员永恒的吐槽话题,技术发展了几十年,大家讨论起这几个“之争”还是充满愤怒.津津乐道.有人描述过Emacs和VI程序员,大家沿着 ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...
day08：软件系统的体系结构&Tomcat详解&Web应用&http协议
day08 软件系统体系结构常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端 ...
JavaEE开发基础
1 JavaEE简介 Java平台有三个版本,分别是JavaSE(Java Platform, Standard Edition),JavaEE(Java Platform, Enterprise E ...
JavaEE中Web服务器、Web容器、Application服务器区别及联系
在JavaEE 开发Web中,我们经常会听到Web服务器(Web Server).Web容器(Web Container).应用服务器(Application Server),等容易混淆不好理解名词. ...
用CSS绘制箭头等三角形图案 [译]
最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...
我的JavaEE学习路线图
从学习Java开发到现在虽然也已经快三年了,但是要说到分享一下经验实在是不敢当.权当是对自己的一个总结吧,希望大家不吝指教,互相交流. 照旧,还是现来整理一下我学习Java的一个路线图吧,然后按照这个 ...
JavaEE程序员必读图书大推荐
下面是我根据多年的阅读和实践经验,给您推荐的一些图书: 第一部分: Java语言篇 1 <Java编程规范> 星级: 适合对象:初级,中级介绍:作者James Gosling(Java之 ...
[转载]javaEE规范和SSH三大框架到底有什么关系
转载自: http://blog.csdn.net/bingjing12345/article/details/20641891 1994-2000 年是互联网的大航海时代. 请注意,下面的时间点及其 ...

随机推荐

【微服务】- Nacos - 注册中心
微服务 - 注册中心 - Nacos 生命不息,写作不止继续踏上学习之路,学之分享笔记总有一天我也能像各位大佬一样一个有梦有戏的人 @怒放吧德德分享学习心得,欢迎指正,大家一起学习成长! 上一 ...
Rust-语句和表达式
语句和表达式 Rust 的函数体是由一系列语句组成,最后由一个表达式来返回值,例如: fn add_with_extra(x: i32, y: i32) -> i32 { let x = x + ...
Minio设置永久下载链接
目前了解到的有如下两种方法建议采用第二种办法第一种方法:设置Access Policy为public 不论文件是否已经操作过分享动作,只要存储桶中有这个文件就能通过如下形式直接访问: http:/ ...
查看当前看k8s集群支持的版本命令
# kubectl api-versions admissionregistration.k8s.io/v1 admissionregistration.k8s.io/v1beta1 apiexten ...
使用ko安装的nexus想作为maven仓库使用
默认安装的nexus并不能作为maven仓库使用,只能添加maven仓库来使用,具体可以查看该文档:使用nexus3配置maven私有仓库 https://www.cnblogs.com/sanduz ...
使用Logstash把MySQL数据导入到Elasticsearch中
总结:这种适合把已有的MySQL数据导入到Elasticsearch中有一个csv文件,把里面的数据通过Navicat Premium 软件导入到数据表中,共有998条数据文件下载地址:https ...
linux系统下查看某个进程内存使用量
typescript-void-object-unknown-never-Function类型
viod object类型 unknown类型 never类型 function类型 {{uploading-image-89562.png(uploading...)}}
从nuxt开始的SEO之路
故事从一个"美好"的早上开始...... 大清早的来到公司,打开电脑,emm, 还是熟悉的味道,鱼儿被我摸熟了的味道......就在开始准备一天的摸鱼之旅的时候,一种不详的预感涌上 ...
【.NET 6+Loki+Grafana】实现轻量级日志可视化服务功能
前言:日志功能是几乎所有程序或系统都必备的一个功能.该文章通过使用Loki+Grafana来实现日志记录与可视化查询,欢迎围观. 有关环境: 操作系统:WIN 10 .NET环境:.NET 6 开发环 ...

JavaEE Day08 HTML&CSS

JavaEE Day08 HTML&CSS的更多相关文章

随机推荐

热门专题