JavaWeb_day2_HTML表单和CSS
1.表单标签
<form></form>
所有需要提交到服务器的都需要用<form>标签括起来
form表单标签属性:
action,整个表单提交的位置,可以是一个页面,也可以是一个后台Java代码
method,表示表单提交的方式(post、get等)
name:最好见名知意,属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name一定要写
普通按钮,提交按钮,重置按钮不需要写name
文本输入项:
用户名:<input type="text" name="username" size="40px" maxlength="5" readonly="readonly" placeholder="提示信息" required="required" autofocus="autofocus" disabled="disabled" /><br/>
属性:name:最好见名知意,属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name一定要写
size:文本框大小
maxlength:最多输入5个字符
readonly:只读,不可写
placeholder:提示信息
required:必填选项,不填不能提交
autofocus:自动获取焦点标签
disabled:规定禁用该文本区
密码输入项:
密码:<input type="password" name="password" />
属性:name:最好见名知意,属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name一定要写
确认密码项:
确认密码:<input type="password" name="repassword"/>
属性:name最好和上面的区分
单选项:
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女
属性:name值必须指定,value值必须要写,后台根据value值获取所选的选项,最好和后面的一样
checked默认选项
多选项:
爱好:<input type="checkbox" name="hobby" value="java" checked="checked" />java
<input type="checkbox" name="hobby" value="python" />python
<input type="checkbox" name="hobby" value=".net" />.net
属性:name值必须指定,value值必须要写,后台根据value值获取所选的选项,最好和后面的一样
checked默认选项
下拉选项:
籍贯:<select name="province">
<option>--省份--</option>
<option value="0" selected="selected">安徽</option>
<option value="1">上海</option>
<option value="2">北京</option>
</select>
属性:name值必须指定,value值必须要写,后台根据value值获取所选的选项
selected默认选项
文件类型:
照片:<input type="file" name="file" />
属性:name值必须指定
文本框输入:
自我介绍:<textarea name="zwjs" cols="15px" rows="5px">
</textarea>
属性:name值必须指定,cols:文本区域的可见宽度,rows文本区域的可见行数
隐藏字段
<input type="hidden" name="id" />
name要写,value不要写
2.DIV和CSS
DIV是一个HTML标签,一个块级元素(单独显示一行),单独使用没有任何意义,必须结合CSS来使用,主要用于页面的布局
span是一个HTML标签,一个内联元素(在一行显示),单独使用没有任何意义,必须结合CSS来使用,主要对括起来的内容进行样式修饰
CSS是一个样式层叠表,样式定义如何显示html元素,样式通常存储在样式表中
目的:解决内容和表现的分离
HTML是整个网站的骨架
CSS是对整个网站的骨架的内容进行美化
CSS的语法和规范
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
CSS的基本选择器:
元素选择器:适用于相同的元素
例:div{
font-size: 20px;
color: pink;
}
类选择器:适用于多个相同的
例: .div2{
font-size: 30px;
color: red;
}
id选择器:适用于单个(尽量保持唯一)
例:#div4{
font-size: 50px;
color: gold;
}
CSS的其他选择器:
层级选择器:
例:div p{
font-size: 50px;
color: blueviolet;
}
属性选择器:
input[type='text']{
background-color: gainsboro;
}
input[type='password']{
background-color:#8A2BE2;
}
CSS的引入方式
内部引入:在head里写<style></style>
<head>
<meta charset="UTF-8">
<title>div效果演示</title>
<style type="text/css"(不写默认的就是带有type属性)>
div{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
</body>
行内引入:在标签里写
例:<div style="font-size: 60px;color: green;">你好44</div>
外部引入:新建CSS文件
<head>
<meta charset="UTF-8">
<title>div效果演示</title>
<link rel="stylesheet" href="style.css"(要外连的css文件) type="text/css"(可不写) />
CSS的浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
例:#div1{
width: 600px;
height: 100px;
background-color: red;
float: right;
}
清除两个浮动之间的关系(就是不会受另一个浮动的影响)
#clear{
clear: both;
}
CSS的盒子模型
假设整个区域的height=100px,那么内容区域(content)的height=100px-padding(10px)*2-margin(20px)*2=40px
CSS的padding(内边距)属性:
padding属性可以是长度值或者百分比,不允许使用负值
各边都有10个像素的内边距值
例:h1{
padding:10px
}
上右下左的顺序:
h1{padding:10px 2px 20px 20%;}