cgb2107-day07
文章目录
-
- 一,练习JDBC
-
- --1,测试
- 二,表格标签
-
- --1,测试
- 三,表单标签
-
- --1,测试
- --2,总结
- --3,提交数据
- --4,练习学生管理系统
- 四,CSS
-
- --1,概述
- --2,测试
- --3,选择器
一,练习JDBC
–1,测试
//用安全的传输器执行删除id=1的user数据
private static void method3() {
Connection c = null ;
PreparedStatement p = null;
try {
//调用getConnection()获取连接
c = getConnection();
//获取传输器,sql骨架
p = c.prepareStatement("delete from user where id=?");
//设置参数
// p.setString(1,"1");
// p.setInt(1,1);
p.setObject(1,1);//给第1个问号设置值是1
//执行SQL--executeUpdate()执行增删改的SQL
p.executeUpdate();
System.out.println("数据执行成功!!!");
} catch (Exception e) {
e.printStackTrace();//程序调试阶段的解决方案
// System.out.println("数据执行失败!!!");//项目上线后的解决方案
} finally {
close(c,null,p);
}
}
二,表格标签
–1,测试
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 常用标签title>
head>
<body>
密码输入框:<input type="password" /> <br/>
普通输入框:<input type="text" /> <br/>
单选框:<input type="radio" />男 <br/>
多选框:<input type="checkbox" />迪丽热巴 <br/>
日历:<input type="week" /> <br/>
<input type="date" /> <br/>
数字:<input type="number" /> <br/>
邮箱:<input type="email" /> <br/>
普通按钮:<input type="button" value="点我"/>
<button >点我button> <br/>
提交按钮:<input type="submit" value="注册"/>
<button type="submit">点我button>
<table border="2px" width="300px"
bgcolor="lightgreen" cellspacing="0">
<tr>
<td colspan="3"><h2>流量调查表h2>td>
tr>
<tr>
<th colspan="2">11th>
<th>13th>
tr>
<tr>
<td>21td>
<td>22td>
<td rowspan="2">23td>
tr>
<tr>
<td>31td>
<td>32td>
tr>
table>
body>
html>
三,表单标签
最大的作用就是可以提交数据.
把表格里想要收集的数据可以提交给服务器.
–1,测试
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表单标签title>
head>
<body>
<form method="post" action="#">
<h2>注册表单h2>
<table border="1px" bgcolor="#A9A9A9"
width="500px" cellspacing="0">
<tr>
<td>用户名:td>
<td>
<input type="text" name="user"/>
td>
tr>
<tr>
<td>密码:td>
<td>
<input type="password" name="pwd"/>
td>
tr>
<tr>
<td>确认密码:td>
<td>
<input type="password" name="repwd"/>
td>
tr>
<tr>
<td>昵称:td>
<td>
<input type="text" name="nick"/>
td>
tr>
<tr>
<td>邮箱:td>
<td>
<input type="email" name="mail"/>
td>
tr>
<tr>
<td>性别:td>
<td>
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
td>
tr>
<tr>
<td>爱好:td>
<td>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
td>
tr>
<tr>
<td>城市:td>
<td>
<select name="city">
<option value="">-请选择-option>
<option value="bj">北京市option>
<option value="sh">上海市option>
<option value="gd">广东省option>
select>
td>
tr>
<tr>
<td>头像:td>
<td>
<input type="file" />
td>
tr>
<tr>
<td>验证码:td>
<td>
<input type="text"/>
<img src="a.png"/>
<button>点我换一张button>
td>
tr>
<tr>
<td>自我描述:td>
<td>
<textarea>在这儿输入...textarea>
td>
tr>
<tr>
<td colspan="2">
<button type="submit">提交button>
<button type="reset">重置button>
td>
tr>
table>
form>
body>
html>
–2,总结
form 标签用来 把页面填写的数据提交给后台的java程序
table 标签用来 向网页中添加表格
tr标签用来表示表格里的一行
td标签表示行里的列元素
input标签用来实现输入框(text password email radio checkbox…)
select标签用来定义一个下拉框,option标签用来定义选项
textarea 标签用来表示一个大的文本框(文本域)
img 标签用来向网页中加入图片
button标签用来表示一个按钮
src属性用来指定图片的位置,type属性用来指定输入框的类型,
width属性用来指定宽度,height属性用来指定高度,bgcolor属性用来设置背景颜色
cellspacing属性用来设置单元格的间距…
–3,提交数据
1, 必须用form标签
2, 必须有提交submit按钮
3, 必须设置name属性
4, 提交的数据都在?之后 , 多个值用&连接 ,
每个值用=连接 , user和pwd是页面上name属性的值 , 1和2是用户在浏览器输入的数据
http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?user=1&pwd=2
5,遇到的问题
–性别可以多选: 让性别的输入框name属性的值相同
–单选框和多选框提交的数据是on: 设置value属性
–4,练习学生管理系统
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册学生信息title>
head>
<body>
<audio controls="controls">
<source src="jay.mp3">source>
audio>
<video controls="controls" loop="loop">
<source src="b.mp4">source>
video>
<form method="post" action="#">
<table>
<tr>
<td>
<h2>学生信息管理系统MISh2>
td>
tr>
<tr>
<td>姓名:td>
tr>
<tr>
<td>
<input type="text" name="user" placeholder="在这里输入姓名"/>
td>
tr>
<tr>
<td>年龄:td>
tr>
<tr>
<td>
<input type="number" name="age" placeholder="在这里输入年龄"/>
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="hobby" value="1" checked="checked"/>乒乓球
<input type="checkbox" name="hobby" value="2"/>爬山
<input type="checkbox" name="hobby" value="3"/>唱歌
td>
tr>
<tr>
<td>
学历:(下拉框)
<select name="xueli">
<option value="1">本科option>
<option value="2">研究生option>
<option value="3">硕士option>
<option value="4">专科option>
select>
td>
tr>
<tr>
<td>
入学日期:
<input type="date" name="day"/>
td>
tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="reset" value="取消"/>
td>
tr>
table>
form>
body>
html>
四,CSS
–1,概述
CSS全称是 层叠样式表 stylesheet , 用来修饰HTML的 .
CSS语法 : 元素的选择器{ 属性名 : 属性值 ; 属性名 : 属性值 ; 属性名 : 属性值 ; }
CSS使用的位置:
1, 行内CSS(给标签加了一个style属性)
2, 内部CSS(使用HTML提供的style标签,把CSS代码包起来)
3, 外部CSS(在网页里,引入一个外部的CSS文件)
–2,测试
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css的入门案例title>
<style>
/* 语法:选择器{ css的效果 } */
h1{ /* 设置h1的文字居中 */
text-align:center;
}
style>
head>
<body>
<div style="text-align:center;">我是div1div>
<div style="text-align:center;">我是div2div>
<h1>我是h1h1>
<h1>我是h2h1>
<h1>我是h3h1>
body>
html>
–3,选择器
CSS提供的一种方式,可以方便的选中网页中的各种元素.
常用的选择器: 简单选择器(标签名,id,类) 分组选择器 属性选择器
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 css选择器title>
<style>
/* 1. 标签名选择器:选中了网页中,所有标签名字叫div的元素 */
div{ /* 选中所有div的 */
color:red; /* 文字设置成红色 */
border-style:dashed; /* 设置虚线边框 */
border-radius:15px; /* 圆角边框 */
border-color: green; /* 边框的颜色*/
}
h1{ /* 选中所有h1 */
background-color:Tomato; /* 背景颜色 */
color:white; /* 文字颜色 */
}
/* 2. */
style>
head>
<body>
<div>我是div1div>
<div>我是div2div>
<div>我是div3div>
<div>我是div4div>
<span>我是span1span>
<span>我是span2span>
<span>我是span3span>
<h1>我是h1h1>
<h1>我是h2h1>
<h1>我是h3h1>
body>
html>