cgb2111-day08-有解無憂

文章目錄

- 一,表單標簽
- - --1,注冊表單
  - --2,其他標簽
  - --3,練習學生管理系統
- 二,CSS
- - --1,概述
  - --2,入門案例
- 三,選擇器
- - --1,標簽名選擇器
  - --2,class選擇器
  - --3,id選擇器
  - --4,分組選擇器
  - --5,屬性選擇器
- 四,盒子模型
- - --1,概述
  - --2,重要概念
  - --3,測驗

一,表單標簽

–1,注冊表單

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用標簽</title>
	</head>
	<body>
		<!-- 1.表單標簽:比表格多了資料提交的功能
		1.1, 要求:必須使用form標簽  + 必須有提交按鈕 + 必須配置name屬性
		1.2, 效果: 實作了資料提交,資料都在地址欄進行了拼接,多組資料使用&連接
http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123
		1.3, 資料提交的格式: 屬性名=屬性值是
		     其中,屬性名是 網頁上name屬性的值 ,屬性值 是用戶在瀏覽器中輸入的資料
		1.4, 提交資料的方式:get和post兩種方式!!!!!!
			get方式提交資料:在地址欄拼接資料,可以方便的查看資料,但是不安全,長度受限
			post方式提交資料:安全,資料大小不受限,但是,不好找資料了...
		1.5, form標簽擁有兩個重要屬性: 
			method屬性用來指定資料提交方式,默認是get
			action屬性用來指定資料提交給哪段java程式來處理
		-->
		
		<!-- 
		 總結:
		 1,標簽:form表單用來提交資料,table表格,h1標題,tr表里的行,td行里的列,input輸入框
			   select用來定義下拉框,option定義下拉選項,img圖片,button是按鈕,textarea文本域
		 2,屬性:method是用來指定form提交資料的方式,action是用來指定form提交資料到哪段程式
				bgcolor設定表格的背景色,border設定表格的邊框,width設定表格的寬度,
				cellspacing設定單元格間距,type是設定輸入框的型別,src用來指定圖片的位置
				name是用來作為資料提交時的標識,colspan用來設定列合并
		 3,問題: 單選框和多選框,默認提交的都是on
		 4,解決方案:給單選框和多選框提供value屬性用來指定提交時要使用的值(不再提交on了)
		-->
		<form method="post" action="#">
			<h1>注冊表單</h1>
			<table bgcolor="lightgray" border="1px" 
					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="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="">請選擇</option>
							<option value="bj">北京</option>
							<option value="gz">廣州</option>
							<option value="sz">深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>頭像:</td>
					<td>
						<input type="file" name="photo"/>
					</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,其他標簽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在網頁中加入音頻 -->
		<audio controls="controls">
			<source src="jay.mp3"></source>
		</audio>
		<!-- 在網頁中加入視頻 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>
		
		<!-- 一個占一行:塊元素(h1~h6,ul+li) -->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<p> Nice</p>
		<p> Nice</p>
		<p> Nice</p>
		
		<!-- 多個占一行:行元素(img,a,input,button) -->
		<span> hello</span>
		<span> hello</span>
		<span> hello</span>
	</body>
</html>

–3,練習學生管理系統

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>學生資訊管理系統MIS</title>
	</head>
	<body>
		<!-- 提供表單來提交學生的資料 -->
		<form>
			<h1>學生資訊管理系統MIS</h1>
			<table>
				<tr>
					<td>
						姓名: <br />
						<input type="text" name="user" placeholder="請輸入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>
						年齡: <br />
						<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="like" value="ppq" checked="checked"/>乒乓球
						<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>
							<option value="4">小學</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入學日期:  <br />
						<input type="date" name="intime"/>
					</td>
				</tr>
				<tr>
					<td>
						<button type="submit">保存</button>
						<button type="reset">取消</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

二,CSS

–1,概述

1,全稱是層疊樣式表stylesheet,專門用來修飾HTML網頁的,就是讓網頁變漂亮.
2,語法: 選擇器 { 屬性名:屬性值;樣式2;樣式3; }
3,使用位置: 行內CSS , 內部CSS , 外部CSS

–2,入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 css入門案例</title>
	</head>
	<body>
		<!-- css代碼的出現位置:行內css/行內css  -->
		<!-- 1, 需求:把div文字修飾成紅色 -->
		<div style="color: red;">你好css1</div>
		<div style="color: red;">你好css2</div>
		<div style="color: red;">你好css3</div>
	</body>
</html>

三,選擇器

css為了方便的選中網頁中的元素進行修飾,提供了各種選擇器,分類:基礎選擇器+高級選擇器

–1,標簽名選擇器

按照標簽的名字,來選中元素.可能會選中多個.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 選擇器</title>
		<!-- css的存在位置:內部css -->
		<style>
			/* 1.標簽名選擇器 */
				/* 練習1:把div修飾成紅色文字 */
				div{  /* 選中了網頁中所有叫div的標簽們 */
					color:red; /* 紅色文字 */
				}
				/* 練習2:把span字號加大 */
				span{
					font-size:30px; /* 字號加大 */
					font-family: "宋體" ;/* 字體 */
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div> 
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

–2,class選擇器

也叫類選擇器,比標簽名選擇器更細致.
使用步驟: 給你想要修飾的元素加 class屬性 + 通過.獲取class的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 選擇器</title>
		
		<!-- 在HTML網頁中,嵌入一段css代碼,使用style標簽 -->
		<style>
			/* 語法: 選擇器{樣式1;樣式2;} */
			/* 1.類選擇器/class選擇器:
					先加class屬性 + 通過.獲取class的值
					其中,class的值可以相同.
			 */
				/* 練習1:只div2修飾字號加大 */
				.a{ /* 選中了網頁中 所有class=a的元素*/
					font-size: 40px;
				}
				/* 練習2:div1 div3加背景色 */
				.b{ /* 選中了網頁中 所有class=b的元素*/
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div class="b">我是div1</div>
		<div class="a">我是div2</div>
		<div class="b">我是div3</div>
		<a href="#">我是a1</a>
		<a href="#" class="a">我是a2</a>
	</body>
</html>

–3,id選擇器

id選擇器的值不能相同 , 如果要使用id選擇器只會選中一個元素.
使用步驟: 給想要修飾的元素加id屬性 + 通過#獲取id的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 選擇器</title>
		
		<style>
			/* id選擇器: 加id屬性(屬性值不讓相同) + 通過#獲取id的值 */
				/* 練習1:設定用戶名輸入框的背景色 */
				/* 選擇器{樣式1;} */
				#a{
					background-color: hotpink;/* 背景色 */
				}
				/* 練習2:設定 我是span2 字體透明度 */
				#c{
					opacity: 0.3;/* 值0.0~1.0區間,值越小越透明 */
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用戶名..." id="a"/>
		<input type="text" placeholder="密碼..." id="b"/>
		<span>我是span1</span>
		<span id="c">我是span2</span>
	</body>
</html>

–4,分組選擇器

是指,把使用不同選擇器選中的元素,分成一組,統一設定樣式.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 選擇器</title>
		<style>
			/* 1.分組選擇器:使用不同的選擇器,來選中多種元素 */
			/* 語法: 選擇器 {  樣式1; 樣式2; } */
				/* 練習1:把標簽名/id選擇器選中的元素,設定背景色 */
				div , #input1{ /* 分組選擇器,多種選擇器間用逗號隔開 */
					background-color: limegreen;
				}
				/* 練習2:把id/class選擇器選中的元素,設定背景色 */
				#input1 , .a{
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<input type="text" placeholder="賬號" id="input1"/>
		<input type="text" placeholder="密碼"/>
		<span class="a">我是span1</span>
		<span class="a">我是span2</span>
	</body>
</html>

–5,屬性選擇器

根據標簽的不同屬性,來選中一些元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 選擇器</title>
		
		<style>
			/* 1.屬性選擇器:根據不同屬性,選中不同元素 */
				/* 練習1:把有type屬性的 設定背景色 */
				[type]{ /* 選中了,有type屬性的元素 */
					background-color: indianred;
				}
				/* 練習2:把有type屬性的input 設定邊框 */
				input[type]{
					border: 3px dashed blue;/* 寬度 虛線 顏色 */
					border-radius: 25px; /* 圓角邊框,值越大越圓 */
				}
				/* 練習3:type=text的input設定背景色 */
				input[type="text"]{
					background-color:seagreen;
					display: none; /* 隱藏元素*/
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用戶名.."/>
		<input type="password" placeholder="密碼.."/>
		<input type="number" placeholder="年齡.."/>
		<input type="text" placeholder="地址.."/>
		<a href="#">我是a1</a>
	</body>
</html>

四,盒子模型

–1,概述

css認為HTML由一個一個的盒子組成的

–2,重要概念

外邊距: margin , 是指盒子間的距離
內邊距: padding , 這是一個盒子的現象,是指內容到邊距的距離
邊框: 是指每個盒子都能設定邊框

–3,測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>測驗 盒子模型</title>
	</head>
	<body>
		<!-- 設定了外邊距(是兩個盒子間的距離), 四個方向同時生效-->
		<input type="radio" style="margin: 20px;"/>男 <br />
		<!-- 設定了外邊距, 分開設定外邊距,左/右/上/下-->
		<input type="radio" style="margin-left: 20px;"/>男 <br />
		<input type="radio" style="margin-right: 20px;"/>男 <br />
		<input type="radio" style="margin-top: 20px;"/>男 <br />
		<input type="radio" style="margin-bottom: 20px;"/>男 <br />
		
		<!-- 設定內邊距(內容和邊框的距離) -->
		<input type="text" placeholder="用戶名..."> <br />
		<!-- 設定了內邊距, 分開設定內邊距,左/上/下/右-->
		<input type="text" placeholder="用戶名..." style="padding: 10px;"> <br />
		<input type="text" placeholder="用戶名..." style="padding-left: 10px;"> <br />
		<input type="text" placeholder="用戶名..." style="padding-top: 10px;"> <br />
		<input type="text" placeholder="用戶名..." style="padding-bottom: 10px;"> <br />
		<input type="text" placeholder="用戶名..." style="padding-right: 10px;"> <br />
	</body>
</html>

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

標籤：其他

上一篇：Flutter 專案實戰下拉重繪、上拉加載九

下一篇：2021年JavaScript明星專案公布，最受歡迎的竟是它？