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>
		<!-- 1. input標簽,輸入框 -->
			密碼輸入框:<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>  
		<!-- 2. table表格標簽 tr是行 th是表頭(加粗居中) td是列
			border設定邊框    width設定寬度 
			bgcolor設定背景顏色   cellspacing單元格間距
			rowspan行合并(合并多個行)  colspan列合并(合并多個列)
		-->
			<table border="2px" width="300px" 
						bgcolor="lightgreen" cellspacing="0">
				<tr>
					<td colspan="3"><h2>流量調查表</h2></td>
				</tr>
				<tr> <!-- 行 -->
					<th colspan="2">11</th> <!-- 列 -->
					<th>13</th>
				</tr>
				<tr>
					<td>21</td>
					<td>22</td>
					<td rowspan="2">23</td>
				</tr>
				<tr>
					<td>31</td>
					<td>32</td>
				
				</tr>
			</table>
				
	</body>
</html>

三,表單標簽

最大的作用就是可以提交資料.
把表格里想要收集的資料可以提交給服務器.
在這里插入圖片描述

–1,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 表單標簽</title>
	</head>
	<body>
		<!-- 1. 表單標簽form:用來提交資料,默認資料是在地址欄中拼接的
			提交的資料有兩種方式: get post
			區別: 
			get方式提交資料是在地址欄,默認方式,安全性低,長度受限
			http://127.0.0.1:8848/hbuilderx/cgb2107/test4.html?
			user=1&pwd=2&repwd=2&nick=3&mail=4@.com&sex=on&hobby=on&hobby=on&hobby=on
		
			post方式提交資料不在地址欄,安全性高,沒有上限
			method屬性用來設定資料的提交方式,默認是get
			action屬性用來指定資料即將提交給哪個程式去處理
		-->
		<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>

		<!-- 添加音頻 controls使用控制組件-->
		<audio controls="controls">
			<!-- 指定資源的位置 -->
			<source src="jay.mp3"></source>
		</audio>
		<!-- 添加視頻 controls使用控制組件-->
		<video controls="controls" loop="loop">
			<source src="b.mp4"></source>
		</video>
	
		<!-- form標簽用來提交資料,
			method屬性用來指定提交資料的方式,
			action屬性用來指定提交到哪里
		-->
		<form method="post" action="#">
			<table>
				<tr>
					<td>
						<h2>學生資訊管理系統MIS</h2>
					</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>
		<!-- 2. 內部CSS,使用HTML提供的style標簽 -->
		<style>
			/* 語法:選擇器{ css的效果 } */
			h1{ /* 設定h1的文字居中 */
				text-align:center;
			}
		</style>
	</head>
	<body>
		<!-- 1. 行內CSS,設定style屬性,盡量不用 -->
		<div style="text-align:center;">我是div1</div>
		<div style="text-align:center;">我是div2</div>
		<h1>我是h1</h1>
		<h1>我是h2</h1>
		<h1>我是h3</h1>
	</body>
</html>

–3,選擇器

CSS提供的一種方式,可以方便的選中網頁中的各種元素.
常用的選擇器: 簡單選擇器(標簽名,id,類) 分組選擇器屬性選擇器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗  css選擇器</title>
		<!-- 內部CSS -->
		<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>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<div>我是div4</div>
		<span>我是span1</span>
		<span>我是span2</span>
		<span>我是span3</span>
		<h1>我是h1</h1>
		<h1>我是h2</h1>
		<h1>我是h3</h1>
	</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/297137.html

標籤：java

上一篇：并發編程系列之如何正確使用執行緒池？

下一篇：有什么行為習慣昭示著你是個編程大佬？