javaweb基础打卡10

HTML标签：表单标签

1.表单：
	- 概念：用于采集用户输入的数据的。用于和服务器进行交互。
	- form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 <form> </form>
            - 属性：
                1.action：指定提交数据的URL
                2.method：指定提交方式
                    - 分类：一共7种，2种比较常用
                        1.get：
                            1.请求参数会在地址栏中显示。会封装到请求行中（HTTP协议中再讲解）
                            2.请求参数大小是有限制的。
                            3.不太安全。
                        2.post：
                            1.请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议中再讲解）
                            2.请求参数的大小没有限制。
                            3.较为安全。
				<form action="#" method="get"> </form>				
            - 表单项中的数据要想被提交：必须指定其name属性
				用户名：<input name="username">					
	- 表单项标签：
		1.input：可以通过type属性值，改变元素展示的样式。
			- type属性：
				1.text：文本输入框，默认值
					- placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
						密码：<input type="password" name="password" placeholder="请输入密码">
				2.password：密码输入框
				3.radio：单选框
					- 注意：
						1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
						2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
						3.checked属性，可以指定默认值
						性别：<input type="radio" name="gender" value="male" checked> 男
							<input type="radio" name="gender" value="female"> 女
				4.checkbox：复选框 
					- 注意：
						1.一般会给每一个复选框提供value属性，指定其被选中后提交的值
						2.checked属性，可以指定默认值
						爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
							<input type="checkbox" name="hobby" value="java" checked> Java
							<input type="checkbox" name="hobby" value="game"> 游戏
				5.file：文件选择框	<input type="file" name="file">
				6.hidden：隐藏域，用于提交一些信息	<input type="hidden" name="id" value="aaa">
				7.按钮：
					1.submit：提交按钮。可以提交表单	<input type="submit" value="登录">
					2.button：普通按钮		<input type="button" value="一个按钮">
					3.image：图片提交按钮	<input type="image" src="img/regbtn.jpg">
						- src属性指定图片的路径
				8.取色器color：	<input type="color" name="color">
				9.年月日date：	<input type="date" name="birthday">
				10.年月日时分datetime-local：	<input type="datetime-local" name="birthday">
				11.邮箱email：	<input type="email" name="email">
				12.数字number：	<input type="number" name="age">		
			- lable：指定输入项的文字描述信息
				- 注意：
					lable的for属性一般会和input的id属性值对应。如果对应了，则点击lable区域，会让input输入框获取焦点。
				<label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username">
		2.select：下拉列表	<select name="province"> </select>
			1.子元素：option，指定列表项	<option value="1">北京</option>
			2.默认选中selected：	<option value="3" selected>陕西</option>
		3.textarea：文本域
			1.cols：指定列数，每一行有多少个字符
			2.rows：默认多少行。不够会自动扩容。
			<textarea rows="5" cols="20" name="des"> </textarea>
2.注册页面案例：
	<!--定义表单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <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" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email" placeholder="请输入Email"></td>
            </tr>
            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="number" name="tel" id="tel" placeholder="请输入您的手机号"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女</td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td><input type="date" name="birthday"></td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="checkcode">
                    <img src="img/verify_code.jpg"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>

CSS：页面美化和布局控制

1.概念：Cascading Style Sheets 层叠样式表
	- 层叠：多个样式可以作用在同一个html的元素上，同时生效
2.好处：
	1.功能强大
	2.将内容展示和样式控制分离
		- 降低耦合度。解耦
		- 让分工协作更容易
		- 提高开发效率
3.CSS的使用：CSS与html结合方式
	1.内联样式：
		- 在标签内使用style属性指定css代码
		<div style="color: red;">hello css</div>
	2.内部样式：
		- 在head标签内，定义style标签，style标签的标签体内容就是css代码
		<style>
			div{
				color: blue;
			}
		</style>
		<div>hello css</div>
	3.外部样式
		1.定义css资源文件
		2.在head标签内，定义link标签，引入外部的资源文件
		- css文件夹下的资源文件a.css：
			div{
				color: green;
			}
		- 引入外部资源：
			<link href="css/a.css">
			<div>hello css</div>
	4.注意：
		- 1，2，3种方式，css作用范围越来越大
		- 1方式不常用，后期常用2，3
		- 第3种方式也可以写为：
			<style>
				@import "css/a.css";
			</style>
4.CSS语法：
	1.格式：
		选择器{
			属性名1:属性值1;
			属性名2:属性值2;
			...
		}
	2.选择器：筛选具有相似特征的元素
	3.注意
		- 每一对属性需要使用;隔开，最后一对属性可以不加;
5.选择器：筛选具有相似特征的元素
	1.分类：
		1.基础选择器
			1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
				- 语法：#id属性值{}
					#div1{
						color: red;
					}
					<div id="div1">星期几</div>
			2.元素选择器：选择具有相同标签名称的元素
				- 语法：标签名称{}
				- 注意：id选择器优先级高于元素选择器
					div{
						color: green;
					}
					<div class="cls1">程序员</div>
			3.类选择器：选择具有相同的class属性值的元素。
				- 语法：.class属性值{}
				- 注意：类选择器优先级高于元素选择器
					.cls1{
						color: blue;
					}
					<p class="cls1">学院</p>
		2.扩展选择器
			1.选择所有元素：
				- 语法：*{}
			2.并集选择器：
				- 语法：选择器1,选择器2{}
					div,p{
						color: red;
					}
			3.子选择器：筛选选择器1元素下的选择器2元素
				- 语法：选择器1 选择器2{}
					div p{
						color: red;
					}
					<div>
						<p>星期几</p>
					</div>
			4.父选择器：筛选选择器2的父选择器1
				- 语法：选择器1 > 选择器2{}
					div > p{
					   border: 1px solid;
					}
			5.属性选择器：选择元素名称，属性名=属性值的元素
				- 语法：元素名称[属性名="属性值"]{}
					input[type="text"]{
						border: 5px solid;
					}
			6.伪类选择器：选择一些元素具有的状态
				- 语法：元素:状态{}
				- 如：<a>
					- 状态:
						1.link：初始化的状态
						2.visited：被访问过的状态
						3.active：正在访问状态
						4.hover：鼠标悬浮状态
						a:link{
							color: deeppink;
						}
						<a href="#">程序员</a>						
6.属性	
	1.字体、文本：
		1.font-size：字体大小	font-size: 30px;
		2.color：文本颜色	color: red;
		3.text-align：对齐方式	text-align: center;
		4.line-height：行高		line-height: 200px;
	2.背景：
		background：复合属性		background: url("img/logo.jpg") no-repeat center;
	3.边框：
		1.border：设置边框，复合属性		border: 1px solid red;
	4.尺寸：
		1.width：宽度	width: 200px;
		2.height：高度		height: 200px;
	5.盒子模型：控制布局
		1.margin：外边距	margin: 50px;
		2.padding：内边距	padding: 50px;
			- 默认情况下内边距会影响整个盒子的大小
			- box-sizing: border-box;	设置盒子的属性，让width和height就是最终盒子的大小
		3.float：浮动
			- left		
			- right	
			float: left;
7.注册页面案例：
	<style>
        *{
            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: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/                 
            margin: auto;
            margin-top: 55px;
        }
        .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;
            margin: 30px;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#tel,#birthday,#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: 110px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;
        }
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        .rg_right p{
            font-size: 15px;
        }
        .rg_right p a{
            color: deeppink;
        }
    </style>