文章目錄
- 一, 表單標簽
- --1,用戶注冊表單
- --2,提交資料的細節處理
- --3,其他標簽
- 二,練習學生資訊系統
- --1,效果
- --2,代碼
- 三,CSS
- --1,概述
- --2,入門案例
- 四,選擇器!!!!
- --1,標簽名選擇器
- --2,class選擇器
- --3,id選擇器
- --4,分組選擇器
- --5,屬性選擇器
- 五,作業
- 美化學生管理系統
- 利用HTML CSS完成用戶注冊的練習
一, 表單標簽
–1,用戶注冊表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表單</title>
</head>
<body>
<!-- 表單標簽,用來提交資料 -->
<form>
<table bgcolor="pink" border="1px" cellspacing="0px">
<tr>
<td align="center" colspan="2">
<h1>注冊表單</h1>
</td>
</tr>
<tr>
<td>用戶名:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵稱:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>郵箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>愛好:</td>
<td>
<input type="checkbox" />籃球
<input type="checkbox" />足球
<input type="checkbox" />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- select是定義下拉框,option是下拉選項 -->
<select>
<option>-請選擇-</option>
<option>北京</option>
<option>上海</option>
<option>廣州</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>在這兒寫資訊...</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button>重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,提交資料的細節處理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表單</title>
</head>
<body>
<!-- 表單標簽,用來提交資料
1,標簽:form表單,table表格,tr行,td列,th表頭,h1標題,
select是下拉框,option是下拉選項,textarea文本域
2,屬性:type="file"是瀏覽檔案,type="email"是郵箱,align是元素的位置
3,提交資料的要求:必須用form標簽+必須有submit按鈕+必須有name屬性
提交的資料都在地址欄:被拼接在了?之后
http://127.0.0.1:8848/cgb2109/test6.html?user=rose&pwd=123
name屬性的值=瀏覽器上輸入的值
4,name用來收集用戶從瀏覽器填的資料,value用來設定提交的值
5,資料提交的方式!!!: get和post
get方式: 默認的就是get方式,資料拼接在地址欄中,缺點是不安全,長度受限
post方式:好處是安全,資料大小沒有要求,但是資料不在地址欄展示了
6,method屬性用來設定資料的提交方式默認是get,
action屬性用來指定是哪段java程式來處理這次提交的資料
-->
<form method="post" action="#">
<table bgcolor="pink" border="1px" cellspacing="0px">
<tr>
<td align="center" colspan="2">
<h1>注冊表單</h1>
</td>
</tr>
<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是定義下拉框,option是下拉選項 -->
<select name="city">
<option value="">-請選擇-</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</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>在這兒寫資訊...</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">提交</button>
<button>重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–3,其他標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 其他標簽</title>
</head>
<body>
<!--0. 都可以包括各種資料,效果不同.
每個div獨占一行, 每個p獨占一行,多個span會在一行
-->
<div>你好</div>
<div>你好</div>
<div>你好</div>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<span>你好</span>
<span>你好</span>
<span>你好</span>
<!-- 1.音頻 controls屬性必須有的,用來作為控制器-->
<audio controls="controls">
<!-- 指定資源的位置 -->
<source src="jay.mp3"></source>
</audio>
<!-- 2.視頻 controls屬性必須有的,用來作為控制器-->
<video controls="controls">
<source src="b.mp4"></source>
</video>
</body>
</html>
二,練習學生資訊系統
–1,效果
–2,代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>學生資訊管理系統MIS</title>
</head>
<body>
<!-- 完成網頁的制作,總結:
1,標簽:form表單可以提交資料,table表格,tr行,td列,h1標題,input輸入框,
select下拉框,option下拉選項,button按鈕,br換行
2,屬性:method是form提交資料的方式,默認是get,資料在地址欄
action是form提交的資料交給哪個程式處理,#是沒人處理
name是提交資料時的key,placeholder是輸入框的提示,
checked是默認選中,value是提交的資料的值
-->
<form method="post" action="#">
<table>
<tr>
<td>
<h1>學生資訊管理系統MIS</h1>
</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="ppq" checked="checked"/>乒乓球
<input type="checkbox" name="hobby" value="ps"/>爬山
<input type="checkbox" name="hobby" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
學歷:(下拉框)
<select name="edu">
<option value="1">本科</option>
<option value="2">專科</option>
<option value="3">小學</option>
</select>
</td>
</tr>
<tr>
<td>
入學日期:<br />
<input type="date" name="intime"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
三,CSS
–1,概述
CSS全稱是層疊樣式表,主要用來修飾HTML網頁的
CSS代碼可以出現的位置:
1,行內CSS
2,內部CSS
3,外部CSS
語法: 選擇器 { 屬性名:屬性值; }
–2,入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css</title>
<!-- 2.內部CSS -->
<style>
/* 語法: 選擇器 { 屬性名:屬性值;樣式2; } */
/* 練習:把所有的p元素都設定紅字 */
p{
color:red;
}
/* 練習:把所有的div元素都設定粉字 */
div{
color: pink;
}
</style>
</head>
<body>
<!-- 1.行內CSS(優先級高),效果只作用在這一行. 屬性名:屬性值;
color修飾文字的顏色,font-size修飾字號
-->
<div style="color:green;font-size:20px;">我是div1</div>
<div style="color:green;font-size:20px;">我是div2</div>
<p>我是p1</p>
<p>我是p2</p>
<a>我是a1</a>
<a>我是a2</a>
</body>
</html>
四,選擇器!!!
方便的選中網頁中的一些元素
分類:簡單選擇器 , 復雜選擇器
–1,標簽名選擇器
根據標簽的名字,選中元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css的選擇器</title>
<style>
/* 1.標簽名選擇器:按照標簽的名字選中元素 */
/* 練習0:給網頁設定背景色 */
body{
background-color:#d0e4fe;
}
/* 練習1:把a的文字改成綠色 */
a{
color: green;
}
/* 練習2:把div加個邊框顏色 */
div{
text-align:center;/* 文字居中 */
border: 1px solid red;/* 邊框的寬度 實線 邊框的顏色 */
border-radius:15px; /* 圓角邊框 */
}
/* 2.標簽名選擇器:按照標簽的名字選中元素 */
</style>
</head>
<body>
<a>我是a1</a>
<a>我是a2</a>
<div>我是div1</div>
<div>我是div2</div>
</body>
</html>
–2,class選擇器
使用步驟: 給元素添加class屬性 + 通過.選中有class屬性的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css的選擇器</title>
<style>
/* 1.標簽名選擇器:按照標簽的名字選中元素 */
/* 練習0:給網頁設定背景色 */
body{
background-color:#d0e4fe;
}
/* 練習1:把a的文字改成綠色 */
a{
color: green;
}
/* 練習2:把div加個邊框顏色 */
div{
text-align:center;/* 文字居中 */
border: 1px solid red;/* 邊框的寬度 實線 邊框的顏色 */
border-radius:15px; /* 圓角邊框 */
}
/* 2.class選擇器:先給元素添加class屬性+通過.選中元素 */
/* 練習1:把div的字號變大 */
.a{/* 選中class=a的所有元素,class的值可以相同 */
font-size: 25px;/* 字號 */
font-family: "宋體";/* 字體 */
}
</style>
</head>
<body>
<a>我是a1</a>
<a>我是a2</a>
<div class="a">我是div1</div>
<div class="a">我是div2</div>
</body>
</html>
–3,id選擇器
按照id屬性的值來選中元素.
步驟: 給元素添加id屬性 + 通過#獲取id屬性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css的選擇器</title>
<style>
/* 1.標簽名選擇器:按照標簽的名字選中元素 */
/* 練習0:給網頁設定背景色 */
body{
background-color:#d0e4fe;
}
/* 練習1:把a的文字改成綠色 */
a{
color: green;
}
/* 練習2:把div加個邊框顏色 */
div{
text-align:center;/* 文字居中 */
border: 1px solid red;/* 邊框的寬度 實線 邊框的顏色 */
border-radius:15px; /* 圓角邊框 */
}
/* 2.class選擇器:先給元素添加class屬性+通過.選中元素 */
/* 練習1:把div的字號變大 */
.a{/* 選中class=a的所有元素,class的值可以相同 */
font-size: 25px;/* 字號 */
font-family: "宋體";/* 字體 */
}
/* 3.id選擇器:先給元素添加id屬性（值必須唯一）+通過#獲取id的值 */
/* 練習1:把div1添加藍色圓角邊框 */
#b{/* 獲取網頁中id=b的元素 */
border:1px solid blue;/* 邊框的寬度 實線 顏色 */
border-radius: 10px;/* 邊框圓角 */
}
/* 綜合練習:給按鈕添加背景色,選擇器有好幾種,優先使用id選擇器選擇高效 */
#c{
background-color: blue;/* 背景色 */
border: 1px dashed red;/* 邊框的寬度 虛線 顏色 */
color: white;/* 文字的顏色 */
}
</style>
</head>
<body>
<a>我是a1</a>
<a>我是a2</a>
<div class="a" id="b">我是div1</div>
<div class="a">我是div2</div>
<button id="c">按鈕</button>
</body>
</html>
–4,分組選擇器
–5,屬性選擇器
五,作業
美化學生管理系統
利用HTML CSS完成用戶注冊的練習
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/354698.html
標籤：其他