1. form表單本身
<form name="myform" action="#" method="get">
<!-- 所有的表單項寫在form標簽里邊 -->
</form>
-
屬性：
-
name：表單的名稱
-
action：表單數據的提交路徑
-
method：表單數據的提交方式。get, post
-
2. input輸入項
用戶名：<input type="text" name="username" value="lisi"> <br>
密碼：<input type="password" name="password" > <br>
<!--生日：<input type="date"> <br>-->
性別：<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女 <br>
愛好：<input type="checkbox" name="hobby" value="code" checked>編碼
<input type="checkbox" name="hobby" value="friend">交友
<input type="checkbox" name="hobby" value="game">游戲
<input type="checkbox" name="hobby" value="movie">電影 <br>
<input type="button" value="普通按鈕">
<input type="submit" value="提交按鈕">
<input type="reset" value="重置按鈕"> <br>
<input type="image" src="../img/btn.jpg" value="圖片提交按鈕"> <br>
<input type="file" name="file">
<input type="hidden" name="hidden" value="隱藏域的值">
-
屬性：
-
type：input的類型，有常見的10個
-
text：文本框
-
password：密碼框
-
radio：單選框。
-
name屬性相同，選擇互斥
-
默認值設置：通過屬性checked 或者 checked="checked"
-
-
checkbox：復選框
-
建議name屬性相同，方便服務端接收數據
-
默認值設置：通過屬性checked 或者 checked="checked"
-
-
button：普通按鈕。沒有功能，通過JS自定義功能的
-
submit：提交按鈕
-
reset：重置按鈕。把表單項的數據恢復成默認值
-
image：圖片提交按鈕。
-
hidden：隱藏域。不會顯示到頁面上的表單項
-
file：文件選擇框。默認提交的是文件名稱
-
-
name：表單項的名稱，如果表單項數據要提交，就必須有name屬性
-
value：表單項的值，作用是隨着type而改變的
-
在text和password里：value是默認值
-
在radio和checkbox里：value是選項的值，選中哪個選項，就提交哪個選項的值
-
在button、submit和reset里：value是按鈕上的提示文字
-
在image里：value沒有實際意義
-
在file里：value是無效的
-
在hidden里：value是隱藏域的值
-
-
3. select下拉框
<select name="address">
<option value="lol">LOL</option>
<option value="wow">WOW</option>
<option value="dota">DOTA</option>
<option value="pubg">PUBG</option>
</select>
-
select標簽：下拉框本身
-
name：名稱。如果數據要提交，就必須有name屬性
-
-
option標簽：下拉框里的下拉選項
-
value：下拉選項的值
-
selected：表示被選中的選項
-
-
默認值設置：
-
沒有手動設置時候，默認選中第一個選項
-
手動設置默認值：在想要默認選中的選項上增加屬性selected="selected" 或者 selected
-
4. textarea文本域
<textarea name="myself" rows="5" cols="10">默認值寫在這里</textarea>
-
name：如果數據要提交，就必須有name屬性
-
rows：高度可以顯示幾行
-
cols：寬度可以顯示幾列。被css樣式代替了
-
默認值設置：
-
textarea沒有value屬性，默認值是寫在標簽體里的（標簽體：開始標簽和結束標簽中間的全部內容）
-
5. ==get提交和post提交的區別（面試題）==
-
get提交，表單數據在地址欄顯示（在HTTP請求行里提交的）；post提交，表單數據不會在地址欄顯示（在HTTP請求體里提交的）
-
get提交，不安全；post提交，相對安全
-
get提交，長度有限制；post提交，沒有長度限制
二、CSS
1. div和span標簽
-
塊標簽（行級元素）：獨占一行的元素，比如：div, hr, h1~h6
-
內聯標簽（行內元素）：內容多大，就占多大空間的元素，比如：span, font
-
頁面布局時，通常是div+css
2. CSS簡介
-
CSS：cascading style sheet，層疊樣式表
-
作用：用來修飾頁面的
3. CSS語法
3.1 CSS的引入方式(CSS的位置)
-
寫在標簽的style屬性里
<div style="color:red;font-size:20px;">黑馬程序員1</div>
-
寫在style標簽里
<head>
<style>
div{
color:blue;
font-size: 20px;
}
</style>
</head>
<body>
<div>快樂的一天1</div>
<div>快樂的一天2</div>
</body>
-
寫在單獨的css文件里
<head>
<!--
03. 外部樣式。
把樣式寫在一個單獨的css文件里，頁面里引入css文件。
link標簽：
type：引入的文件類型，固定值text/css。可以不寫
rel：引入的文件和當前頁面是什么關系，固定值stylesheet。必須寫
href：引入的文件路徑。必須寫
-->
<link rel="stylesheet" href="../css/my.css">
</head>
3.2.1 基本選擇器
/*標簽選擇器：標簽名稱{樣式名:值;樣式名:值;...}*/
div{
color: red;
}
/*ID選擇器：#ID值{樣式名:值;樣式名:值;...}*/
#kdy{
color:blue;
}
/*類選擇器：.類名{樣式名:值;樣式名:值;...}*/
.blueClass{
color:blue;
}
-
優先級：ID選擇器 > 類選擇器 > 標簽選擇器。如果優先級相同，后加載覆蓋先加載
3.2.2 擴展選擇器
<style>
/*要求1：選中span3，設置樣式：紅色字體*/
#d2 .class1{
color: red;
}
/*要求2：文本框背景變成紅色；密碼框背景變成藍色*/
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
/*要求3：超鏈接a，正常狀態是紅色； 訪問之后是綠色； 鼠標移上是黃色；鼠標按下是粉色；love and hate*/
a:link{
color: red;
}
a:visited{
color:green;
}
a:hover{
color:yellow;
}
a:active{
color: pink;
}
</style>
<!-- 要求1的環境 -->
<div id="d1">
<div>
<span class="class1">span1，類名是：class1</span>
<span class="class2">span2，類名是：class2</span>
</div>
</div>
<div id="d2">
<div>
<span class="class1">span3，類名是：class1</span>
<span class="class2">span4，類名是：class2</span>
</div>
</div>
<hr>
<!-- 要求2的環境 -->
<input type="text" value="文本框">
<input type="password" value="密碼框">
<hr>
<!-- 要求3的環境 -->
<a href="#">百度</a>
4. 盒子模型
-
盒子模型：布局的方式，可以給每個元素設置：width、height、border、padding、margin。設置之后，元素看起來像個盒子，所以把這5個樣式統稱為：盒子模型。
-
標准盒子模型（默認）：
-
設置樣式：
box-sizing: content-box; -
特點：width和height是內容區域的大小。如果設置了padding和border，盒子會撐大
-
-
怪異盒子模型：
-
設置樣式：
box-sizing: border-box; -
特點：width和height是例子的大小。如果設置了padding和border，內容會縮小
-