一、表單
含義：所有表單元素放在 form 標簽里面
<form action="提交的地址" method="提交方式默認get">表單元素
</form>
頁面get傳值的寫法
路徑？屬性=屬性值
鍵值對
鍵=值 & 鍵=值
知識點：所有的表單元素，除了提交和重置和文件，其他表單 元素可以在form標簽外面用
1.表單元素的類型
文本類型：disabled/readonly：不可編輯
文本框：text
密碼框：password
隱藏域：hidden
*多行文本：textarea
2.按鈕類型：
普通按鈕：button
重置按鈕：reset
提交按鈕：submit
3.選擇類型：
單選：radio
復選：checkbox
注意：這兩個表單元素name屬性不僅有鍵的作用還有分組的作用
checked：默認選中
disable：不可選中
label標簽
單選label標簽的兩種用法：
1 <td><label><input type="radio" checked="checked" name="sex" value="man">男</label> 2 3 <input id="woman" type=radio name="sex" 4 value="woman"> 5 <label for="woman">女</label> 6 </td>
*下拉：<select>
<option>163</option>
<option>126</option>
<option>163</option>
</select>
selected:默認選中 是option的屬性
multiple：多選 是select的屬性 和size聯合使用
size：顯示選項的個數 select屬性
案例練習：
1 <form action="12.19.html" method="get"> 2 <input type="hidden" value="123"> 3 <table> 4 <tr> 5 <td>用戶名：</td> 6 <td><input type="text" placeholder="這是用戶名"></td> 7 </tr> 8 <tr> 9 <td>密碼：</td> 10 <td><input type="password" placeholder="這是密碼"></td> 11 </tr> 12 <tr> 13 <td align="">性別：</td> 14 <td><label><input type="radio" name="sex" value="man">男</label> 15 <input id="woman" type="radio" name="sex" 16 value="woman"> 17 <label for="woman">女</label> 18 </td> 19 <td align="left">喜歡哪種家寵</td> 20 <td><input type="radio" checked="checked" name="jc" value="dog">狗</td> 21 <td><input type="radio" checked="checked" name="jc" value="cat">貓</td> 22 </tr> 23 <tr> 24 <td align="right">興趣：</td> 25 <td> 26 <input type="checkbox" name="xq" value="lq">籃球 27 <input type="checkbox" 28 name="xq" value="lq">足球 29 <input type="checkbox" 30 name="xq" value="jq">毽球 31 </td> 32 <td align="right">舞蹈種類</td> 33 <td> 34 <select name="" id="" multiple size="1"><option value="1">拉丁舞</option> 35 <option value="1">民族舞</option> 36 <option value="1" selected>肚皮舞</option> 37 38 </select> 39 </td> 40 <td align="right"></td> 41 </tr> 42 <tr> 43 <td align="left">個人介紹</td> 44 <td><textarea name="" id=""</td> 45 </tr> 46 </table> 47 <input type="button" value="普通按鈕"> 48 <input type="reset"> 49 <input type="submit"> 50 </form>
4.文件：file
form屬性enctype="multipart/form-data"
表單元素通用格式
<input type="類型" name="后台接受鍵" value="值" />
特殊格式
<textarea>
</textarea>
案例截圖：
ifram:把別的頁面以窗口的形式顯示在本頁面
音視頻標簽：<video>
<video src="音視頻路徑" autoplay controls></video>
<audio src="音視頻路徑" autoplay controls></video>
autoplay:音視頻
代碼練習：
1 <iframe src="12.20.html"> 2 </iframe> 3 <video src="音視頻路徑" autoplay controls></video>
案例截圖：
二、css
含義:層疊樣式表 美化頁面
用法分類：
1.內聯：在標簽中以屬性的形式表現 屬性名 style
樣式：樣式值；
<div style="color:blanchedalmond;">
這是一個div111
</div>
注意：不推薦使用，優先級最高
2.內嵌：在head標簽中以標簽的形式表現 標簽名style
3.外部引用：在head標簽中以標簽形式表現，標簽名link用來引入一個CSS文件
<link rel="stylesheet" href="index.css">
項目中最常用
4.選擇器：
選擇器：把指定的樣式應用於某一個、組、類標簽上
（1）.標簽選擇器
（2）id選擇器：通過id屬性值找標簽 關鍵符號"#id值{樣式}"
（3）class（類）選擇器：通過class屬性值找標簽 關鍵符號".class值{樣式}"
（4）復合選擇器：
並列 關鍵符號",用法： 選擇器1,選擇器2{樣式}"
后代 符號"空格 " 用法：選擇器1 選擇器2{樣式} 就近原則
篩選 關鍵符號. 用法：選擇器class選擇器
屬性選擇器 語法：選擇器[屬性名=屬性值]{樣式}
（5）*通用選擇器
{padding：0px;
margin:0px;}
優先級排列：權值
1.內聯樣式
2.id選擇器（系統定義的屬性：id(值唯一) class name value）
3.class選擇器
4.標簽選擇器
5.通用選擇器
代碼練習：
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>圖片鏈接變灰</title> 5 <link href="變灰.css" rel="stylesheet"> 6 7 </head> 8 9 <body> 10 <div> 11 <a href="#" class="p1"></a> 12 <a href="#" class="p2"></a> 13 <a href="#" class="p3"></a> 14 <a href="#" class="p4"></a> 15 </div> 16 17 </body> 18 </html>
1 .p1,.p2,.p3,.p4{ 2 width: 100px; 3 height: 100px; 4 display: inline-block; 5 background-repeat: no-repeat; 6 background-size: cover 7 8 } 9 .p1{background-image: url(12.22/code/images/boy.gif)} 10 .p2{background-image: url(12.22/code/images/freddie.png)} 11 .p3{background-image: url(12.22/code/images/mondriaan.gif)} 12 .p4{background-image: url(12.22/code/images/puddytat.gif)} 13 .p1:hover{background-image: url(12.22/code/images/v_boy.gif)} 14 .p2:hover{background-image: url(12.22/code/images/v_freddie.gif)} 15 .p3:hover{background-image: url(12.22/code/images/v_mondriaan.gif)} 16 .p4:hover{background-image: url(12.22/code/images/v_puddytat.gif)}
案例截圖：
