day17-HTML 表單標籤和css基礎

2020-08-11 20:44:17

一 表單標籤

表單標籤 - form
是一個容器標籤,本身單獨用沒有意義,一般需要結合表單相關的標籤(input、select、text area)來使用
它可以對錶單標籤中所有使用者資訊收集相關的標籤的內容進行整體的重置和提交。
action屬性 - 後端數據介面的地址
method屬性 - 請求方式(get/post)

二 input標籤的使用

input是表單相關標籤,可以放在form標籤中做數據的提交和重置

2.1 type = 「text」

type屬性 - 設定標籤型別
text(預設值) - 普通文字輸入框
value屬性 - 和輸入框中的內容是關聯的
name屬性 - 用來區分不同的數據和對數據進行提交的(因爲提交數據是以 name=value 的形式提交的)
placeholder屬性 - 設定輸入的提示資訊
maxlength屬性 - 設定輸入資訊的最大長度
disabled屬性 - 設定爲disabled,表示標籤不可用
label標籤 - 點選label中的內容,可以讓label後面的輸入框處於編輯狀態
for屬性 - 和input中的id關聯

<label for="i1">使用者名稱:</label> 
<input placeholder="請輸入阿康" type="text" maxlength="5" name="賬號" id="i1" value="阿康" />
<br>
<br>
<label for="i2">&ensp;&nbsp;碼:&nbsp;</label>
<input type="text" name="密碼" id="i2" value="" />

2.2 type = 「password」

value屬性 - 和輸入框中的內容是關聯的
name屬性 - 用來區分不同的數據和對數據進行提交的(因爲提交數據是以 name=value 的形式提交的)
placeholder屬性 - 設定輸入的提示資訊
maxlength屬性 - 設定輸入資訊的最大長度
disabled屬性 - 設定爲disabled,表示標籤不可用
label標籤 - 點選label中的內容,可以讓label後面的輸入框處於編輯狀態
for屬性 - 和input中的id關聯

<label for="i3">密碼:</label><input id="i3" type="password" name="pw" placeholder="請輸入密碼" />

2.3 type = 「radio」

radio - 無線電鈕
value屬性 - 單選選中的時候被選中的值(選項值)
name屬性 - 除了提交和區分以外,還可以將相同的name作爲同一個組,在同一個組中只能選中一個選項
checked屬性 - 值設爲checked表示預設選中
label標籤 - 點選label中的內容,可以讓label中的內容處於選中狀態
for屬性 - 和input中的id關聯

<input type="radio" name="w" value="已婚" id="i6" /><label for="i6">已婚</label>
<input type="radio" name="w" value="未婚" id="i7" /><label for="i7">未婚</label>
<input type="radio" name="w" value="保密" id="i8" checked="checked" /><label for="i8">保密</label>

2.4 type = 「checkbox」

checkbox - 複選按鈕
value屬性 - 單選選中的時候被選中的值(選項值)
name屬性 - 除了提交和區分以外,還可以將相同的name作爲同一個組,在同一個組中只能選中一個選項
checked屬性 - 值設爲checked表示預設選中
label標籤 - 點選label中的內容,可以讓label中的內容處於選中狀態
for屬性 - 和input中的id關聯

<input type="checkbox" name="sport" id="s1" value="乒乓球" /><label for="s1">乒乓球</label>
<input type="checkbox" name="sport" id="s2" value="籃球" /><label for="s2">籃球</label>
<input type="checkbox" name="sport" id="s3" value="遊泳" /><label for="s3">遊泳</label>
<input type="checkbox" name="sport" id="s4" value="羽毛球" /><label for="s4">羽毛球</label>

2.5 type = 「button」

button - 按鈕
value屬性 - 按鈕上的文字

<button type="button">刪除</button>

2.6 type = 「submit和reset」

submit - 提交屬性
將當前表單中所有設定了name屬性的標籤內容,以 name=value的形式提交給介面
reset - 重置按鈕
將當前表單中所有表單相關的標籤狀態變成初始狀態

<input type="submit" value="提交"/>
<input type="submit" value="重置"/>

三 select和textarea

3.1 下拉選單:select-option

name屬性 - 是select屬性,用於提交和區分
value屬性 - 是option屬性,表示當前選項的值和提交數據
selected屬性 - 是option屬性,設定預設選中的項
option標籤內容 - 用來展示選項

<select name="province">
			<option value="四川省" selected="selected">四川省</option>
			<option value ="遼林省">遼林省</option>
			<option value ="廣東省">廣東省</option>
			<option value ="雲南省">雲南省</option>
		</select>
		
		<select name="city">
			<option value ="成都">成都市</option>
			<option value ="德陽">德陽市</option>
			<option value ="綿陽">綿陽市</option>
		</select>

3.2 optgroup - 選項分組標籤

label屬性 - 分組名

<select name="">
			 <optgroup label="遼林省">
			 	
			 </optgroup>
		 	<option value="瀋陽">瀋陽</option>
			<option value ="大連">大連市</option>
			<option value ="盤錦">盤錦市</option>
			<option value ="鐵嶺市">鐵嶺市</option>
			
			<optgroup label="四川省"></optgroup>
			<option value ="成都">成都市</option>
			<option value ="德陽">德陽市</option>
			<option value ="綿陽">綿陽市</option>
		 </select>

3.3 textarea - 多行文字域

rows屬性 - 設定一次最多能顯示的行數(預設是2)
cols屬性 - 設定一行的列數
placeholder屬性 - 佔位符
name屬性 - 用於區分和提交
maxlength屬性 - 設定最大的輸入長度

<textarea rows="4" cols="40" placeholder="請輸入你的意見"></textarea>

四 div和span

div和span
div和span本身無語意,也是HTML中比較輕量級的標籤

  1. span - 用於一行顯示多個內容的時候
  2. div - 主要用於介面標籤的分塊和分組

五 css基礎

5.1 什麼是css(樣式表)

css(Cascading Style Sheets) - 層疊樣式表
css是web標準中的表現標準,主要用於設定網頁內容的樣式和佈局

5.2 css程式碼寫在哪兒

內聯樣式表:將樣式表(css程式碼)寫在標籤的style屬性中(樣式只能作爲一個標籤)
內部樣式表:將樣式表寫在style標籤中(樣式只能作用於當前html檔案中所有標籤)
外部樣式表:將樣式表寫在外部得css檔案中,然後在html檔案中用link匯入(樣式可作用於所有的html中的所有的標籤)

優先順序:內聯優先順序>內部樣式表、外部樣式表(誰後寫誰的優先順序高)

5.3 css怎麼寫

語法:
選擇器{屬性名1:屬性值1;屬性名2:屬性值2;…}

說明:
①選擇器 - 選中當前需要設定樣式的標籤(寫內聯樣式表需要省略 ‘選擇器{}’)
②屬性 - 以 屬性名:屬性值 得形式存在,多個屬性之間必須用;隔開

				a.常用的屬性:color 	-	文字顏色;
						   background-color 	-	背景顏色;
						   font-size 	-	文字大小
						   width 	-	寬度
						   height 	-	高度
				
				b.常用的值:數位(數位如果用來表示大小,那麼值後面必須加單位:px)
						   顏色:a.顏色的英文單詞,例如:red,green,yellow等
								b.rgb值(通過調節紅色、綠色和藍色的值來調出不同的顏色,範圍是0~255)
								rgb(red,green,blue) rgb(255,0,0) rgb(0,255,0)
								rgba(red,green,blue,透明度),透明度的取值範圍0~1
								c.16進位制顏色值:#6位的16進位制數 #ff0000 #00ff00

六 選擇器

選擇器是用來選中指定標籤來新增樣式的
常用的選擇器:

6.1 id選擇器:在標籤的id屬性值前加#作爲一個選擇器,選中id屬性是指定值的標籤

注意:同一個id值在當前頁面中只有一個標籤

6.2 類選擇器:在標籤的class屬性值前加.作爲一個選擇器,選中class屬性是指定值的標籤。

.c1{} - 選中classs是c1的所有標籤
注意:同一個class可以作用不同的標籤,同一個標籤可以同時擁有多個class值(有多個的時候中間用空格隔開)

6.3 元素選擇器:直接將標籤名作爲選擇器,選中當前頁面中所有指定的標籤

p{} - 選中所有的p標籤

6.4 萬用字元:將*作爲選擇器,選中當前頁面中所有的標籤

6.5 羣組選擇器:將多個其他的選擇器用逗號隔開作爲一個選擇器,選中每個獨立的選擇器選中的標籤

p,.c1,#p1{} - 選中所有的p標籤、class是c1的標籤以及id是p1的標籤
a,img{} - 選中所有的圖片和超鏈接

6.6 後代選擇器:將多個選擇器用空格隔開作爲一個選擇器

div p{} - 獲取所有是div後代的p標籤
div .p1 - 選中div中所有class是p1的標籤(div和.p1的標籤時候帶關係)

6.7 子代選擇器:將多個選擇器用>隔開作爲一個選擇器(只是兒子一代)

div>p{} - 選中所有div標籤中子標籤的p標籤
div>.p1 - 選中所有div標籤中子標籤的class是p1的標籤