day31
今日内容
- HTML标签:表单标签
- 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:页面美化和布局控制
-
概念:CSS 指层叠样式表 (Cascading Style Sheets)
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
-
好处:
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度,解耦
- 让分工协作更容易
- 提高开发效率
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>