文章目錄
- 一,HTML練習
- --1,改造用戶注冊的表單
- --2,創建學生系統的表單
- 二,CSS
- --1,概述
- --2,入門案例
- 三,CSS選擇器
- --1,概述
- --2,基本選擇器
- --3,高級選擇器
- 四,盒子模型
- --1,測驗
- 五,練習
- --1,修改學生管理系統的樣式
- --2,用戶注冊的案例
一,HTML練習
–1,改造用戶注冊的表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表單標簽</title>
</head>
<body>
<!-- 創建表單,
下拉框:select(下拉) + option(選項)
檔案上傳: <input type="file"/>
文本域:<textarea></textarea>
-->
<h1>注冊表單</h1>
<form>
<table border="1px" cellspacing="0px" bgcolor="lightgray">
<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>
<!-- 想單選就必須設定name屬性,而且值必須相同
設定好name屬性資料就可以提交了,但是默認提交了on
-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>愛好:</td>
<td>
<input type="checkbox" name="like" value="lq"/>籃球
<input type="checkbox" name="like" value="zq"/>足球
<input type="checkbox" name="like" value="ppq"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
</td>
</tr>
<tr>
<td>頭像:</td>
<td>
<input type="file" />
</td>
</tr>
<tr>
<td>驗證碼:</td>
<td>
<input type="text" />
<img src="imgs/a.png" />
<input type="button" value="點我換一張" />
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>描述資訊...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
<input type="button" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
–2,創建學生系統的表單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習表單標簽</title>
</head>
<body>
<!-- 使用h5的播放音頻,controls是使用控制元件,source是檔案位置-->
<audio controls="controls">
<source src="res/jay.mp3"></source>
</audio>
<!-- 使用h5的播放視頻,controls是使用控制元件,source是檔案位置-->
<video controls="controls" loop="loop">
<source src="res/b.mp4"></source>
</video>
<!-- form 可以提交資料,而且資料默認采用了get方式,就在地址欄中展示的.
http://127.0.0.1:8848/cgb2106/test04.html?user=1&age=123&sex=1&like=ppq&like=ps&edu=2
不好:長度受限,不安全
可以改成post提交資料,而且可以指定,交給哪段程式處理資料action
面試題:get和post提交資料的區別?
get方式:是默認的提交方式,但是不安全(都展示在地址欄),長度受限
post方式:安全,資料不在地址欄展示啦,看不見,提高安全性
-->
<form method="get" action="#">
<table>
<tr>
<td>
<h1>學生資訊管理系統MIS</h1>
</td>
</tr>
<tr>
<td>
姓名:
</td>
</tr>
<tr>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>
年齡:
</td>
</tr>
<tr>
<td>
<input type="number" name="age"/>
</td>
</tr>
<tr>
<td>
性別:(單選框)
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
愛好:(多選)
<input type="checkbox" name="like" value="ppq"/>乒乓球
<input type="checkbox" name="like" value="ps"/>爬山
<input type="checkbox" name="like" 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" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="button" value="取消"/>
</td>
</tr>
</table>
</form>
<!-- div p span -->
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
二,CSS
–1,概述
專門用來修飾網頁的技術,全稱層疊樣式表stylesheet
語法: 元素的選擇器{ 屬性名:屬性值; 屬性名:屬性值; 屬性名:屬性值; }
用法:
1,行內CSS(在標簽上使用css代碼)
2,內部CSS(使用style標簽,在head里寫css代碼)
3,外部CSS(把HTML代碼和CSS代碼分離)
–2,入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css</title>
<!-- 寫法2:內部css -->
<style>
//語法: 元素的選擇器{ 屬性名:屬性值; }
div{
font-size:30px; /* 修飾div的字號 */
background-color:red;/* 修飾div的背景色 */
}
</style>
</head>
<body>
<!-- 寫法1:行內css 修飾div的背景色,優先級最高-->
<div style="background-color:pink;">我是div1</div>
<div style="background-color: pink;">我是div2</div>
</body>
</html>
三,CSS選擇器
–1,概述
輔助你選中網頁中的元素.
常見的:
1,標簽名選擇器 : 根據標簽的名字選中元素
2,class選擇器 : 根據有class屬性的選中元素(添加class屬性,通過.選中元素)
–2,基本選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css選擇器</title>
<!-- 內部css -->
<style>
/* 1.標簽名選擇器: 選中網頁中所有標簽名是div的元素*/
div{
background-color: skyblue;/* 給div加背景色 */
}
span{
font-size: 40px; /* 給span加大字號 */
}
/* 2. class選擇器: 給指定元素加class屬性 , 通過.獲取class的值 ,值可以相同 */
.a{
color: crimson;/* 給第一個span元素,改變字的顏色 */
}
/* 3. id選擇器: 給指定的元素加id屬性 , 通過#獲取id的值 , 值不要相同 */
#b{
font-family: "微軟雅黑";/* 字體 */
}
</style>
</head>
<body>
<div id="b">我是div1</div>
<div class="a">我是div2</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<a href="#">點我</a>
</body>
</html>
–3,高級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css選擇器</title>
<!-- 內部css -->
<style>
/* 1.標簽名選擇器: 選中網頁中所有標簽名是div的元素*/
div{
background-color: skyblue;/* 給div加背景色 */
}
span{
font-size: 40px; /* 給span加大字號 */
}
/* 2. class選擇器: 給指定元素加class屬性 , 通過.獲取class的值 ,值可以相同 */
.a{
color: crimson;/* 給第一個span元素,改變字的顏色 */
}
/* 3. id選擇器: 給指定的元素加id屬性 , 通過#獲取id的值 , 值不要相同 */
#b{
font-family: "微軟雅黑";/* 字體 */
}
/* 4. 分組選擇器: 把多個選擇器的結果組成一組,統一設定樣式 */
#b,.a{
border:2px solid red; /* 指定寬度,實線,邊框顏色 */
border-radius:5px; /* 圓角邊框 */
}
/* 5. 屬性選擇器: 按照指定屬性選中元素 */
input[type="text"]{
text-shadow: 5px 5px 5px #FF0000;/* 加陰影 */
text-align:center;/* 文字居中 */
}
</style>
</head>
<body>
<input type="text" placeholder="用戶名" />
<input type="text" placeholder="密碼" />
<input type="number" placeholder="年齡" />
<div id="b">我是div1</div>
<div class="a">我是div2</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<a href="#">點我</a>
</body>
</html>
四,盒子模型
–1,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css盒子模型</title>
</head>
<body>
<!-- css盒子模型:就是把網頁里的所有元素,都看做是一個個的盒子
內邊距: padding是指 內容和邊框 的距離
外邊距: margin是指 盒子和盒子 的距離
邊框: border是指邊框的效果,寬度 實線 顏色
實線solid 虛線dashed
-->
<input type="radio" style="margin: 20px;"/>男
<input type="radio" style="margin-right: 40px;"/>男
<input type="text" placeholder="用戶名" style="padding:20px;border:2px solid #FF0000;"/>
<input type="text" placeholder="密碼" style="padding-top: 30px;"/>
<input type="text" placeholder="密碼" style="padding-left: 30px;"/>
<input type="text" placeholder="密碼" style="padding-bottom: 30px;"/>
</body>
</html>
五,練習
–1,修改學生管理系統的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>練習表單標簽</title>
<style>
/* 修飾輸入框 */
.a{
width: 350px;/* 寬度 */
height: 40px;/* 高度 */
padding: 5px;/* 內邊距 */
font-size: 15px;/* 字號加大 */
}
/* 修飾保存按鈕 */
input[type="submit"]{
width: 60px;/* 寬度 */
height: 30px;/* 高度 */
color: white;/* 字的顏色 */
background-color: blue;/* 背景色 */
border-color: #0000FF;/* 邊框顏色 */
font-size: 15px;/* 加大字號 */
}
/* 修飾取消按鈕 */
input[type="button"]{
width: 60px;/* 寬度 */
height: 30px;/* 高度 */
color: white;/* 字的顏色 */
background-color: hotpink;/* 背景色 */
border-color: hotpink;/* 邊框顏色 */
font-size: 15px;/* 加大字號 */
}
</style>
</head>
<body>
<!-- 使用h5的播放音頻,controls是使用控制元件,source是檔案位置-->
<audio controls="controls">
<source src="res/jay.mp3"></source>
</audio>
<!-- 使用h5的播放視頻,controls是使用控制元件,source是檔案位置-->
<video controls="controls" loop="loop">
<source src="res/b.mp4"></source>
</video>
<!-- form 可以提交資料,而且資料默認采用了get方式,就在地址欄中展示的.
http://127.0.0.1:8848/cgb2106/test04.html?user=1&age=123&sex=1&like=ppq&like=ps&edu=2
不好:長度受限,不安全
也可以改成post提交資料,而且可以指定,交給哪段程式處理資料action
面試題:get和post提交資料的區別?
get方式:是默認的提交方式,但是不安全(都展示在地址欄),長度受限
post方式:安全,資料不在地址欄展示啦,看不見,提高安全性
-->
<form method="post" action="#">
<table>
<tr>
<td>
<h1>學生資訊管理系統MIS</h1>
</td>
</tr>
<tr>
<td>
姓名:
</td>
</tr>
<tr>
<td>
<input class="a" type="text" name="user" placeholder="請輸入姓名..."/>
</td>
</tr>
<tr>
<td>
年齡:
</td>
</tr>
<tr>
<td>
<input class="a" type="number" name="age" placeholder="請輸入年齡..."/>
</td>
</tr>
<tr>
<td>
性別:(單選框)
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
愛好:(多選)
<input type="checkbox" name="like" value="ppq"/>乒乓球
<input type="checkbox" name="like" value="ps"/>爬山
<input type="checkbox" name="like" 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" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="保存"/>
<input type="button" value="取消"/>
</td>
</tr>
</table>
</form>
<!-- div p span -->
<div>我是div</div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
–2,用戶注冊的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 HTML CSS綜合案例</title>
<style>
/* 1. 修飾輸入框 */
.a{
width: 350px;/* 寬度 */
height: 40px;/* 高度 */
}
/* 2. 修飾提示的文字 */
.b{
font-size:2px; /* 字號變小 */
color: darkgray; /* 字的顏色 */
font-family: "宋體"; /* 字體 */
padding: 10px;/* 邊距 */
}
/* 3. 修飾注冊按鈕 */
#btn{
color: white; /* 字的顏色 */
font-size: 20px; /* 字號加大 */
background-color: orangered; /* 背景色 */
border-color: orangered; /* 邊框顏色 */
}
/* 4.修飾我已閱讀 */
#readme{
padding: 30px;/* 外邊距 */
}
</style>
</head>
<body>
<!-- 默認是get方式提交資料,都在地址欄里展示 -->
<form>
<table>
<tr>
<td>
<h2 style="text-align: center;">用戶注冊</h2>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用戶名" name="user"/>
</td>
</tr>
<tr>
<td class="b" >
支持中文、字母、數字、“-”、“_”的組合，4-20個字符
</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="設定密碼" name="pwd"/>
</td>
</tr>
<tr>
<td class="b" >
建議使用數字、字母和符號兩種以上的組合，6-20個字符
</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="確認密碼" name="repwd"/>
</td>
</tr>
<tr>
<td class="b" >
兩次密碼輸入不一致
</td>
</tr>
<tr>
<td>
<input class="a" type="number" placeholder="驗證手機" name="tel"/>
或
<a href="#">驗證郵箱</a>
</td>
</tr>
<tr>
<td id="readme">
<input type="checkbox"/>
我已閱讀并同意
<a href="#">《京淘用戶注冊協議》</a>
</td>
</tr>
<tr>
<td>
<input id="btn" class="a" type="submit" value="立即注冊" />
</td>
</tr>
</table>
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292093.html
標籤：其他
下一篇：嵌入式Linux入門---第一篇