模拟 服务器 解析浏览器发来的数据
package cn.tedu.test3;
import java.util.Arrays;
//模拟 服务器解析浏览器发来的数据----springmvc框架
//http://127.0.0.1:8848/cgb2105/html4.html? username=1&pwd=2&repwd=2&nick=3&mail=4%401.cn&sex=0&like=1&like=2&city=2&head=&code=brpn
public class Test1 {
public static void main(String[] args) {
String a = "http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2&nick=3&mail=4%401.cn&sex=0&like=1&like=2&city=2&head= &code=brpn";
String[] a1 = a.split("\\?")[1].split("&");
// 1，按照？切割字符串，得到a数组
// 2,重点解析数组里的第二部分a[1] user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
// 3,按照&切割字符串，得到b数组
//System.out.println(Arrays.toString(a1));
for(String str: a1){
// 5,再按照=切 [user,1] [age,2]
String s = str.split("=")[1];
System.out.println(s);
}
//jdbc入库
}
}
CSS选择器
/*分组选择器：把多种选择器中的元素分成一组，统一设置样式 /
/ 属性选择器：根据标签的不同属性选择元素 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试css的高级选择器</title>
<style type="text/css">
/*分组选择器：把多种选择器中的元素分成一组，统一设置样式 */
/* 属性选择器：根据标签的不同属性选择元素 */
input[type ="button"]{
background-color: brown;
}
.a ,div,#s1{
font-size: 30px; color: darkblue;
}
</style>
</head>
<body>
<div> 我是div1</div><!-- 加class标记 -->
<div> 我是div2</div>
<div class="a"> 我是div3</div>
<span id = "s1"> hello</span>
<span class = "a"> hello</span>
<span> hello</span>
<input type = "button" value="重置" >
<input type = "button" value="重置" >
<input class="a" type = "submit" value="提交">
</body>
</html>
HTML和CSS综合练习
<head>
<meta charset="utf-8">
<title>学生信息管理系统MIS</title>
<!-- link连接外部文件
rel 固定写法，指定的文件类型，href 指定文件路径 -->
<link rel = "stylesheet" href ="t.css"/>
</head>
CSS提取到同目录下，新建"t.css"
.a{
width:200px;
height: 30px;
}
input[type ="text"]{
height: 30px;
}
input[type ="password"]{
height: 30px;
}
input[type ="button"]{
background-color: fuchsia;
color: #FFF8DC;
}
input[type ="submit"]{
height:25px ;
width: 45px;
background-color: #1E90FF;
border: 2px solid #FF8C00 ;
color: #FFF8DC;
}
css的盒子模型
css把网页中的每个元素看做是一个盒子。
margin：外边距，是指盒子和盒子之间的距离
padding：内边距，是盒子里的内容和边距的距离
width/height：内容的宽度.高度
border：边框
练习图片利用css和html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- link连接外部文件
rel 固定写法，指定的文件类型，href 指定文件路径 -->
<link rel = "stylesheet" href ="jingdong.css" />
<body><!--method指定数据提交方式 ，action ="#指定提交路径" -->
<form method="post" action ="#指定路径" >
<table>
<tr>
<td><h2 align="center">用户注册</h2></td>
</tr>
<tr>
<td><input type ="text" placeholder="用户名" name="name" class="a"/></td>
</tr>
<tr>
<td class="b">支持中文、字母，“+”，“—”的组合</td>
</tr>
<tr>
<td><input type="password" placeholder="设置密码" name="pwd" class="a"/></td>
</tr>
<tr>
<td class="b">建议使用数字、字母和符号两种以上的组合</td>
</tr>
<tr>
<td><input type="password" placeholder="确认密码" name="repwd" class="a"/></td>
</tr>
<tr>
<td class="b">两次密码</td>
</tr>
<tr>
<td><input type="text" placeholder="验证手机" name="jym" class="a"/></td>
</tr>
<td id="m"><input type="checkbox"/>我已阅读并同意
<a href = "https://www.baidu.com" target = "_blank" >《京东用户注册协议》</a></td>
</tr>
<tr>
<td><input type ="submit" value="立即注册" name="name"/></td>
</tr>
</table>
</form>
</body>
</html>
CSS代码
/* 输入框 */
.a{/* class选择器 */
width: 300px;
height: 30px;
padding: 10px;/* 内边距 */
margin: 10px;/* 外边距 */
font-size: 20px;
}
.b{/* class选择器 */
font-size: 10px;/* 字体大小 */
color: gainsboro;
padding-left: 25px;/* 左边距 */
}
#m{/* id选择器 */
padding-left:25px ;
}
input[type="submit"]{
background-color: darkred;
color: white;
height:40px;
width: 320px;
font-size: 20px;
margin-left: 10px;
margin-top: 10px;
/* border: 1px solid red ; */
}
JS动态网页
javascript
静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。
网页和后端交互
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
特点：
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
优势：
(1)良好的交互性
(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
测试
onclick是单击
ondblclick是双击
onm ouseenter鼠标进入
onm ouseleave鼠标划出
alert弹出框
prompt输入框
confirm确认框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* js是弱类型的语言， 没有严格意义上的数据类型，包括：number string boolean
null unidefid*/
var a=25
alert(a%10);//取余 5
alert(a/10);//除法2.5
//++ --
var h=10;
alert(++h);
h=h++;
alert(h)//+
//== ===
alert(1>0?a:h)
var s="sfs"
s=10-0.3;
s=9.6-3.6
s="er"+"zi"+"大儿子"
alert(s);
function fn(){//调取fn（）,才会触发
alert(100);
/* confirm();
prompt("请输入年龄：") */
}
//变量交换
var d=2;
var e="edaw";
var t;
t=d;
d=e;
e=t;
alert(d+e)
</script>
</head>
<body>
<!-- js就想让网页动起来 写法1:行内js -->
<!-- js是基于对象的事件驱动的驱动的脚本语言
事件驱动是指：给网页的不同元素，添加了各种触发方式-->
<a href = "#" οnclick= "alert(10)" >单击单匡</a>
<a href = "#" οnclick= "fn()" >单击单匡</a>
<a href = "#" οnclick= "prompt()" >单击输入框</a>
<a href = "#" οnclick= "confirm()" >单击确认框</a>
<a href = "#" οndblclick= "alert(10)" >双击弹框</a>
<!-- <a href = "#" οnmοuseenter= "alert(10)" >鼠标划入弹框</a>
<a href = "#" οnmοuseleave= "alert(10)" >鼠标划出弹框</a> -->
</body>
</html>