一、HTML表单(重点)
作用: 将用户在页面输出的数据,发送给java服务器(.net)
<!--
表单(容器):<form></form>
常用属性:
action:请求java服务器的地址 #(代表当前页面 )userAction
name:表单的名称
method:表单的提交方法,有很多种:get(默认)、psot
get:参数在url地址后面进行拼接,
post:参数不会再url地址后面进行拼接
区别:
1)get相对来说不安全、post相对来说比较安全
2)get提交大小的限制(4KB),post提交没有限制
文本框:<input/>
常用属性:
type:type属性的值不同声明次表单项的功能和样式不同
常见的属性值11个(掌握)
1)text:文本框(默认值)
2)password:密码框 特点:输入掩码
3)date:日期选择框 html5提供
4)radio:单选框,特点:name属性相同分为一组,完成互斥效果
checked="chekced" true 该表项默认被选中
5)CheckBox:复选框 特点:name属性相同分为一组
checked="chekced" true 该表项默认被选中
6)button:普通按钮(在表单中作用不大,一般会结合js脚本完成页面交互效果)
7)submit:提交按钮,找form表单的action属性地址,发送请求
8)reset: 重置按钮, 使表单项回复默认状态
9)image:图像提交,与submit功能一样
10)file:文件上传
11)hidden:隐藏域 特点:页面看不到(存放id)
name: 表单项的名称
表单项想要被提交必须有name属性
格式: key=value& key=value
?password=
&birthday=1999-01-01
&gender=1&hobby=perm
value:表单的值
下拉列表
<select name="edu">
<option value="1">列表项</option>
</select>
注意:select标签name的属性=option标签value的值
select= "selected" true 该列表项默认被选中
文本域
<textarea name=""> value</textarea>
常用属性:
rows:行高
cols:列宽
-->
代码
<body>
<form action="#" name="myForm" method="post">
<!--表单项-->
用户名:<input type="text" name="username" value="德玛西亚"><br>
密码:<input type="password" name="password"><br>
生日:<input type="date" name="birthday" value="1999-01-01"><br>
性别:
<input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1" checked="true"> 女<br>
爱好:
<input type="checkbox" name="hobby" value="somke"> 抽烟
<input type="checkbox" name="hobby" value="drinke"> 喝酒
<input type="checkbox" name="hobby" value="perm" checked="checked"> 烫头<br>
普通按钮:<input type="button" name="btn" value="普通按钮"><br>
提交按钮:<input type="submit" value="注册"><br>
重置按钮:<input type="reset" value="重置"><br>
图像提交:<input type="image" src="../img/sub.png"><br>
个人头像:<input type="file" name="pic"><br>
隐藏域:<input type="hidden" name="id" value="1000"><br>
学历:
<select name="edu" id="">
<option value="1">青铜</option>
<option value="2">白银</option>
<option value="3" selected="selected">王者</option>
</select><br>
个人简介:
<textarea name="intro" cols="30" rows="10">我是默认的value值</textarea>
</form>
</body>
二 、css样式
2.1 概述
- Cascading Style Sheet 层叠样式表,简单来说专门用于网页的美化。
美化好处:
- 实现了样式和内容的分离,提高显示的效果和样式的复用性
- 功能性更强,例如,给font标签设置超大字体
- 降低耦合性,css样式美化网页html标签搭建网页
2.2html与css样式结合方式
<!--
html和css样式结合方式分为三种:
1)行内样式(简单,一般不用)
所有标签有一个style属性,在此属性编写css样式
2)内部样式:一般会放在head头部, 先加载到浏览器内存中
使用<style>标签,在标签体重编写css样式
3)外部样式
使用<link>标签,使用href属性引入外部的css文件(掌握)
使用<style>标签,在标签体重使用@import引入外部的css文件,加载效率不高(了解)
优先级:就近原则,相同的样式会被覆盖
浏览器的加载的顺序: 自上而下
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_html和css样式结合方式</title>
<!--
relation="stylesheet" 关系,当前页面与外部文件的关系 css样式,浏览器在解析到此标签默认转换器就变成了css格式
-->
<link rel="stylesheet" href="../css/mycss.css">
<style>
@import "../css/mycss.css";
</style>
<!--
默认值:type="text/css" 声明此类标签的类型,浏览器在解析到此标签默认转换器就变成css格式
-->
<style>
font{
font-size: 25px;
color: green;
}
</style>
</head>
<body>
<font style="font-size: 20px; color: red">城市套路深,要不要回农村</font><br>
<font>java从入门到放弃 </font>
</body>
</html>
2.3 CSS样式书写规范
/*
css样式文件的注释
格式:选择器(css样式)
1)属性名和属性值之间使用冒号分隔
2)多个属性之间使用分号分隔
3)属性名由多个组成,使用减号分隔
4)属性值由多个组成,使用空格分隔
5)不区分大小写
*/
2.4 选择器
<!--
基本选择器
1)标签选择器
格式:标签名{css样式}
2)id选择器
格式: #id属性的值{css样式}
特点:具有唯一性
3)类选择器
格式: .class属性的值{css样式}
特点:代表一组
选择器使用优先级:id选择器>类选择器>标签选择器
-->
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_基本选择器</title>
<style type="text/css">
div{
color: red;
font-size: 20px;
}
#myDiv{
color: green;
font-size: 30px;
}
.myClass{
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
</body>
<div>第一种选择器,标签选择器</div>
<div id="myDiv" class="myClass">第二种选择器,id选择器</div>
<div class="myClass">第三种选择器:类选择器</div>
<p class="myClass">第三种选择器:类选择器</p>
</html>
2.5 拓展选择器
<!--
拓展选择器
1)层级选择器
格式:父选择器 子选择器 孙子选择器....{css样式}
2)属性选择器
格式:基本选择器[属性名="属性值"]{css样式}
3)伪类选择器
同一个元素(标签),在不同操作下层下出不同的样式,
文本框:
选择器:focus{css样式}
超链接:
正常状态 a:link{css样式}
鼠标上移 a:hover{css样式}
鼠标点击 a:active{css样式}
访问过后 a:visited{css样式}
4)并集选择器
格式:选择器1,选择器2,选择器3 ...{css样式}
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_拓展选择器</title>
<style>
.div2 div .sp1 {
color: red;
}
input[type="text"] {
background-color: skyblue;
}
input[type="text"]:focus {
background-color: orangered;
}
input[type="password"] {
background-color: hotpink;
}
a:link {
color: gray;
}
a:hover {
color: green;
}
a:active {
color: red;
}
a:visited {
color: orangered;
}
font, p, b {
color: hotpink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="div1">
<div>
<span class="sp1">span11</span>
<span class="sp2">span22</span>
</div>
</div>
<div class="div2">
<div>
<span class="sp1">span33</span>
<span class="sp2">span44</span>
</div>
</div>
<input type="text"><br>
<input type="password"><br>
<a href="#"> letmehjasdadga </a><br>
<font>woshi font</font>
<p>woshi pp</p>
<b>wopshji bbbb</b>
</body>
</html>
2.6 字体和文本
<!--
1)字体
font-size: 大小
font-weight:重量
取值:bold 粗体
font-style: 样式
取值:italic 斜体
font-family:类型呢
取值:宋体,隶书
2)文本
color:颜色
text-decration:装饰
取值:none普通(默认),underline 下滑线,overline 上划线,
以下这些属性在内联标签无效
text-align:对齐方式
line-heigh:行高
-->
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_字体和文本属性</title>
<style>
div{
font-size: 45px;
font-weight: bold;
font-style: italic;
font-family: 幼圆;
color: red;
text-decoration: overline;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>yibuliangbuhahahdaSd 山东山东昂达</div>
<a href="#">我是a标签</a>
</body>
</html>
2.7 背景属性
<!--
背景属性:
background-color:背景色
background-image:背景图像
格式:url(图像路径)
background-repeat:平铺方式
取值:repeat 水平和垂直(默认) ,repeat-x 水平,repeat-y垂直,no-repeat 不平铺
一般我们会简写,background:color image repeat
-->
代码:
<!--
背景属性:
background-color:背景色
background-image:背景图像
格式:url(图像路径)
background-repeat:平铺方式
取值:repeat 水平和垂直(默认) ,repeat-x 水平,repeat-y垂直,no-repeat 不平铺
一般我们会简写,background:color image repeat
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07_背景属性</title>
<style>
body{
background-color: #e8e8e8;
background-image: url("../img/girl3.jpg");
background-repeat: no-repeat;
background: #e8e8e8 url("../img/girl3.jpg") no-repeat;
}
</style>
</head>
<body>
</body>
</html>
2.8 显示属性
<!--
dispaly:显示属性
取值:block 块元素,inline 内联元素 none 隐藏
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示属性</title>
<style>
div{
background-color: orangered;
display: inline;
}
spam{
background-color: orange;
display: block;
}
h3{
display: none;
}
</style>
</head>
<body>
<div>我是块标签</div>
<span>我是内联标签</span>
<h3>我是隐藏标签</h3>
</body>
</html>
2.9 浮动属性
<!--
float:浮动属性
取值:left 左浮动 ,right 右浮动
clear:清除浮动
取值:left 清除左浮动,right 清除右浮动 ,both清除左右浮动
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_浮动属性</title>
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div style="clear: both"></div>
<div class="box">3</div>
<div class="box">4</div>
</body>
</html>
2.10 普通盒子
<!--
盒子:
边框
border-width:宽度
border-style:样式
取值: solid 单线,double 双线 ,dashed虚线
border-color:颜色
简写 border:宽度 样式 颜色
border-radius:圆角半径(默认为90°)
内边距:
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
简写:padding: 上 右 下 左(顺时针)
外边距
margin-top
margin-right
margin-bottom
margin-left
简写:margin: 上 右 下 左
特殊:
margin: auto; 水平居中
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10_普通盒子</title>
<style>
.box{
width: 300px;
height: 300px;
border: 10px dashed blue;
padding: 10px;
margin: auto;
}
.cookie{
width: 300px;
height: 300px;
background-color: darkblue;
border-radius: 150px;
}
</style>
</head>
<body>
<div class="box">
<div class="cookie"></div>
</div>
</body>
</html>
2.11 怪异盒子
<!--
盒子:
边框
border-width:宽度
border-style:样式
取值: solid 单线,double 双线 ,dashed虚线
border-color:颜色
简写 border:宽度 样式 颜色
border-radius:圆角半径(默认为90°)
内边距:
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
简写:padding: 上 右 下 左(顺时针)
外边距
margin-top
margin-right
margin-bottom
margin-left
简写:margin: 上 右 下 左
特殊:
margin: auto; 水平居中
box-sizing:盒子类型
content-box:(默认)在指定盒子的高度和宽度之外(300)来调整边框的大小和内边距的大小
border-box:在指定的盒子高度好宽度之内(300)来调整边框的大小和内边距的大小
-->
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_怪异盒子</title>
<style>
.box{
width: 300px;
height: 300px;
border: 50px dashed blue;
padding: 10px;
margin: auto;
box-sizing: border-box;
}
.cookie{
width: 180px;
height: 180px;
background-color: darkgrey;
border-radius: 150px;
}
</style>
</head>
<body>
<div class="box">
<div class="cookie"></div>
</div>
</body>
</html>
三、案例
旅游网注册案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网注册页面</title>
<style>
/*整体布局*/
.rg_main{
width: 900px;
height: 500px;
border: 5px solid #eeee;
margin: 50px auto;
border-radius: 5px;
}
/*左*/
.rg_left{
width: 250px;
height: 500px;
float: left;
box-sizing: border-box;
}
/*左 内边距*/
.rg_left div{
padding-top: 20px;
padding-left: 20px;
}
/*中*/
.rg_center{
width: 400px;
height: 500px;
float: left;
box-sizing: border-box;
}
/*左侧单元格*/
.td_left{
text-align: right;
padding-right: 20px;
}
/*输入框 样式*/
input{
border: 1px solid gray;
height: 25px;
border-radius: 5px;
}
/*右*/
.rg_right{
width: 250px;
height: 500px;
float: left;
box-sizing: border-box;
}
/*右 内边距*/
.rg_right div{
text-align: right;
padding-top: 20px;
padding-right: 10px;
}
</style>
</head>
<body>
<!--整体布局-->
<div class="rg_main">
<div class="rg_left">
<div>
<span style="color: #ffcf6b;font-size: 20px">新用户注册</span><br>
<span style="color: #b4bfd6;font-size: 20px">USER REGISTER</span>
</div>
</div>
<!--中-->
<div class="rg_center">
<form action="#">
<table width="100%" height="500px" cellpadding="0" cellspacing="0">
<tr>
<td class="td_left">
用户名
</td>
<td>
<input type="text" placeholder="请输入用户名">
</td>
</tr>
<tr>
<td class="td_left">用户名</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left">邮箱</td>
<td><input type="text" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left">姓名</td>
<td><input type="text" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left">手机号</td>
<td>
<input type="tel" placeholder="请输入手机号">
</td>
</tr>
<tr>
<td class="td_left">性别</td>
<td><input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
</td>
</tr>
<tr>
<td class="td_left">生日</td>
<td>
<input type="date" >
</td>
</tr>
<tr>
<td class="td_left">
验证码
</td>
<td>
<input type="tel" placeholder="请输入验证码">
<img src="../img/checkMa.png" align="center" alt="">
</td>
</tr>
<tr align="center">
<td colspan="2">
<input align="center" type="button" style="background-color: #ffcf6b;width: 88px;border: 1px solid #ffcf6b;border-radius: 0px" value="注册">
</td>
</tr>
</table>
</form>
</div>
<!--右边框-->
<div>
<div class="rg_right">
<div>
<span>已有账号?<a href="#" style="color:#ffcf6b">立即登录</a></span>
</div>
</div>
</div>
</body>
</html>