cgb2105-day08

Posted cgblpx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cgb2105-day08相关的知识,希望对你有一定的参考价值。

一,模拟 服务器 解析浏览器发来的数据

package cn.tedu.test;
//模拟 服务器 解析浏览器发来的数据 -- SpringMVC框架
//http://127.0.0.1:8848/cgb2105/stu.html?user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
public class Test5 {
    public static void main(String[] args) {
        String url="http://127.0.0.1:8848/cgb2105/stu.html?user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07";
//        1,按照?切割字符串,得到a数组
//                [http://127.0.0.1:8848/cgb2105/stu.html ,
//                  user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07]
//        2,重点解析数组里的第二部分a[1]   user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
//        3,按照&切割字符串,得到b数组
//                [user=1,age=2,sex=1,like=1,edu=2,time=2021-07-07]
        String[] b= url.split("\\\\?")[1].split("&");
//        4,遍历b数组,得到str,数据user=1     age=2    sex=1
        for(String str : b){
//        5,再按照=切 [user,1]   [age,2]
            String data = str.split("=")[1];
            System.out.println(data);
        }
        //TODO jdbc入库
        
        
    }
}

二,CSS选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css的高级选择器</title>
		<!-- html嵌入css -->
		<style>
			/* 1. 分组选择器:把多种选择器选中的元素分成一组,统一设置样式 */
				div,#s1{
					color: #008000;
				}
			/* 2. 属性选择器:根据标签的不同属性选择元素 */	
				input[type='text']{
					background-color: #FFFF00;
				}
				
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<span id="s1">我是span1</span>
		<span>我是span2</span>
		<p>我是p</p>
		<input type="text" placeholder="我是input1"></input>
		<input type="password" placeholder="我是input2"></input>
	</body>
</html>

三,练习HTML和CSS

在这里插入图片描述

–1,创建css文件

/* 选中class=a的元素 */
.a{
	width: 275px;/* 宽度 */
	height: 30px;/* 高度 */
}
/* 修饰保存按钮 */
input[type="submit"]{
	height: 30px;  /* 高度 */
	width: 45px;   /* 宽度 */
	color: white; /* 字的颜色 */
	background-color: blue; /* 背景色*/
	border: 2px solid blue; /*边框的宽度 实线 边框的颜色*/
}
/* 修饰取消按钮 */
input[type="button"]{
	height: 30px;  /* 高度 */
	width: 45px;   /* 宽度 */
	color: white; /* 字的颜色 */
	background-color: hotpink; /* 背景色*/
	border: 2px solid hotpink; /*边框的宽度 实线 边框的颜色*/
}

–2,修改html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习form表单</title>
		
		<!-- link引入一个外部的css文件
			rel的值是固定写法,表名了文件的类型
			href用来指定文件位置路径
		-->
		<link rel="stylesheet" href="1.css" />
	</head>
	<body>
		<!-- 默认的数据提交是get方式 -->
		<form>
			<table>
				<tr>
					<td>
						<h3>学生信息管理系统MIS</h3>
					</td>
				</tr>
				<tr>
					<td>
						姓名:
					</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="text" placeholder="请输入姓名" name="user" />
					</td>
				</tr>
				<tr>
					<td>
						年龄:
					</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="number" placeholder="请输入年龄" name="age" />
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框) 
						<input type="radio" name="sex" value="1" checked="checked"/><input type="radio" name="sex" value="0"/></td>
				</tr>
				<tr>
					<td>
						爱好:(多选) 
						<input type="checkbox" name="like" value="1"/>乒乓球
						<input type="checkbox" name="like" value="2" checked="checked"/>爬山 
						<input type="checkbox" name="like" value="3"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框) 
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">高中</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期: <br/>
						<input type="date" name="time"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="保存" />
						<input type="button" value="取消" />
					</td>
				</tr>
				
			</table>
		</form>
		
		<audio controls="controls">
			<source src="jay.mp3"></source>
		</audio>
		
		<video controls="controls" loop="loop">
			<source src="b.mp4"></source>
		</video>
		
		
	</body>
</html>

四,css的盒子模型

–1,概述

css把网页中的每个元素看做是一个盒子。
margin:外边距,是指盒子和盒子之间的距离
padding:内边距,是盒子里的内容和边距的距离
width/height:内容的宽度.高度
border:边框

–2,练习

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 用户注册</title>
		
		<!-- 引入一个外部的css文件 -->
		<link rel="stylesheet" href="2.css"/>
	</head>
	<body>
<!-- form标签用来提交数据,method属性用来指定数据的提交方式,action属性用来指定提交给谁 -->
		<form method="get" action="#">
			<table>
				<tr>
					<td>
						<h2 style="padding-left:120px;">用户注册</h2>
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="用户名" class="a" />
					</td>
				</tr>
				<tr>
					<td  class="b" >
						支持中文、字母、数字、“-”、“_”的组合,4-20个字符
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" placeholder="设置密码" class="a"  />
					</td>
				</tr>
				<tr>
					<td  class="b" >
						建议使用数字、字母和符号两种以上的组合,6-20个字符
					</td>
				</tr>
				<tr>
					<td>
						<input type="password" placeholder="确认密码" class="a" />
					</td>
				</tr>
				<tr>
					<td  class="b" >
						两次密码输入不一致
					</td>
				</tr>
				<tr>
					<td>
						<input type="number" placeholder="验证手机" class="a" /><a href="#">验证邮箱</a>
					</td>
				</tr>
				<tr>
					<td id="m">
						<input type="checkbox"/>
						我已阅读并同意
						<a href="#">《京淘用户注册协议》</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="立即注册"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>


css代码

/* 修饰输入框 */
.a{
	width: 300px;/* 宽度 */
	height: 30px;/* 高度 */
	padding: 10px;/* 内边距 */
	margin: 10px;/* 外边距 */
	font-size: 20px;/* 加大字号 */
}
/* 修饰小文字 */
.b{
	font-size: 10px; /* 大小 */
	color: gray; /* 颜色 */
	padding-left:25px ; /* 左边距 */
}
/* 修饰我已阅读  */
#m{
	padding-left: 25px;/* 左边距 */
}
/* 修饰立即注册按钮 */
input[type="submit"]{
	background-color: #FF0000; /* 背景色 */
	color: white;/* 字的颜色 */
	font-size: 20px;/* 字号 */
	height: 50px;/* 高度 */
	width: 320px;/* 宽度 */
	margin-left: 10px;/* 左边距 */
	margin-top: 20px;/* 上边距 */
	border:1px solid red;/* 边框 */
}

标题

以上是关于cgb2105-day08的主要内容,如果未能解决你的问题,请参考以下文章

cgb2105-day03

cgb2105-day09

cgb2105-day02

cgb2105-day06

cgb2105-day10

cgb2105-day13