HTML(form標簽)、CSS選擇器
阿新 • • 發佈：2018-06-26
TE lap 內容 bmi user 1.3 e30 示例 ttr 
一、表單標簽<form>
功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互。
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
action: 表單提交到哪。一般指向服務器端一個程序，程序接收到表單提交過來的數據（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get默認取值就是get
表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息。
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然後按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息
1.1 <input>系列標簽
‘‘‘ <1> 表單類型 type: text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？ file 提交文件：form表單需要加上屬性enctype="multipart/form-data" 上傳文件註意兩點： 請求方式必須是post enctype="multipart/form-data"<2> 表單屬性 name: 表單提交項的鍵. 註意和id屬性的區別：name屬性是和服務器通信時使用的名稱； 而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的 value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同： type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入字段的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值 checked: radio 和 checkbox 默認被選中 readonly: 只讀. text 和 password disabled: 對所用input都好使。 ‘‘‘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>註冊</title> </head> <body> <form action="/index" method="post"> <p><label for="user">姓名</label> <input type="text" name="user" placeholder="用戶名" id="user"> </p> <p> 密碼 <input type="password" name="pwd"> </p> <p> 愛好 <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" name="hobby" value="footbal">足球 <input type="checkbox" name="hobby" value="multi_color" checked="checked">彩色球 </p> <p> 性別：<input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女 </p> <p> <input type="reset"> </p> <p> <input type="button" value="按鈕"> </p> <p> <input type="file"> </p> <p> <input type="submit"> </p> </form> </body> </html>註冊實例
1.2 select標簽
‘‘‘ <select> 下拉選標簽屬性 name:表單提交項的鍵. size：選項個數 multiple：multiple 多選，需按Ctrl進行選擇 <optgroup>為每一項加上分組 <option> 下拉選中的每一項 屬性： value:表單提交項的值. selected: selected下拉選默認被選中 ‘‘‘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <form action=""> <tr>省份： <select name="provinces" > <optgroup label="華北"></optgroup> <option value="henan">河南</option> <option value="hebei">河北</option> <option value="shanxi">山西</option> <option value="..." selected>....</option> </select> </tr> </form> </body> </html>選擇實例
1.3 <textarea> 多行文本框
<form id="form1" name="form1" method="post" action=""> <textarea cols=“寬度” rows=“高度” name=“名稱”> 默認內容 </textarea> </form>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>註冊</title> </head> <body> <form action="/index" method="post"> <p>姓名 <input type="text" name="user" placeholder="用戶名" id="user"> </p> <p> 密碼 <input type="password" name="pwd"> </p> <p> 愛好 <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" name="hobby" value="footbal">足球 <input type="checkbox" name="hobby" value="multi_color">彩色球 </p> <p> 性別：<input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女 </p> <p>簡介： <textarea name="jianjie" id="form1" cols="30" rows="10" placeholder="個人簡介"></textarea> </p> <p> <input type="reset"> </p> <p> <input type="button" value="按鈕"> </p> <p> <input type="file"> </p> <p> <input type="submit"> </p> </form> </body> </html>多行文本框
1.4 <label>標簽
定義：<label> 標簽為 input 元素定義標註（標記）。
說明：
1 label 元素不會向用戶呈現任何特殊效果。
2 <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form method="post" action=""> <label for=“username”>用戶名</label> <input type=“text” name=“username” id=“username” size=“20” /> </form>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>註冊</title> </head> <body> <form action="/index" method="post"> <p><label for="user">姓名</label> <input type="text" name="user" placeholder="用戶名" id="user"> </p> <p> 密碼 <input type="password" name="pwd"> </p> <p> 愛好 <input type="checkbox" name="hobby" value="basketball">籃球 <input type="checkbox" name="hobby" value="footbal">足球 <input type="checkbox" name="hobby" value="multi_color">彩色球 </p> <p> 性別：<input type="radio" name="sex" value="1">男 <input type="radio" name="sex" value="0">女 </p> <p> <input type="reset"> </p> <p> <input type="button" value="按鈕"> </p> <p> <input type="file"> </p> <p> <input type="submit"> </p> </form> </body> </html>標註實例
1.5 <fieldset>標簽
<fieldset> <legend>登錄吧</legend> <input type="text"> </fieldset>
效果：
二、CSS
2.1 CSS語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector { property: value; property: value; ... property: value }
例如：
h1 { color:red; font-size:14px; }
2.2 css的四種引入方式
1 行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。在HTML中使用。
<p style="background-color: rebeccapurple">hello world</p>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。
格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3 鏈接式
將一個.css文件引入到HTML文件中。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要註意.css文件的路徑
</style>
註意：
導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。
2.3 css選擇器
1. 基本選擇器
2.組合選擇器
E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 div,p { color:#f00; } E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔 li a { font-weight:bold;｝ E > F 子元素選擇器，匹配所有E元素的子元素F div > p { color:#f00; } E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F div + p { color:#f00; } E ~ F 普通兄弟選擇器（以破折號分隔） .div1 ~ p{font-size: 30px; }
註意，關於標簽嵌套：
一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要註意的是，p標簽不能包含塊級標簽。
3.屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略。 比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配屬性值以指定值開頭的每個元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
4.偽類
anchor偽類：專用於控制鏈接的顯示效果
‘‘‘ a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。 a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。 a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。 a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。 偽類選擇器 : 偽類指的是標簽的不同狀態: a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態 a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; } ‘‘‘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green; width: 100px; height: 100px; } .outer:hover .bottom{ background-color: yellow; } 註意:一定是outer:hover 控制outer裏某一個標簽,否則無效 .top:hover .bottom{ background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>示例
before after偽類
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之後插入內容 例：p:before{content:"hello";color:red;display: block;}
5.選擇器的優先級
5.1 CSS的繼承
繼承是CSS的一個主要特征，它是依賴於祖先-後代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麽能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{ border:1px solid #222 } <div>hello <p>yuan</p> </div>
5.2 CSS的優先級
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－－－1
按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取舍時按照從左到右的順序逐位比較。
1、文內的樣式優先級為1,0,0,0，所以始終高於外部定義。
2、有!important聲明的規則高於一切。
3、如果!important聲明沖突，則比較優先權。
4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。
5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。
HTML(form標簽)、CSS選擇器