表单+css样式+
一、表單
含義：所有表單元素放在 form 標(biāo)簽里面
<form action="提交的地址" method="提交方式默認(rèn)get">表單元素
</form>
頁面get傳值的寫法
路徑？屬性=屬性值
鍵值對
鍵=值 & 鍵=值
知識點：所有的表單元素，除了提交和重置和文件，其他表單 元素可以在form標(biāo)簽外面用
1.表單元素的類型
文本類型：disabled/readonly：不可編輯
文本框：text
密碼框：password
隱藏域：hidden
*多行文本：textarea
2.按鈕類型：
普通按鈕：button
重置按鈕：reset
提交按鈕：submit
3.選擇類型：
單選：radio
復(fù)選：checkbox
注意：這兩個表單元素name屬性不僅有鍵的作用還有分組的作用
checked：默認(rèn)選中
disable：不可選中
label標(biāo)簽
單選label標(biāo)簽的兩種用法：
*下拉：<select>
<option>163</option>
<option>126</option>
<option>163</option>
</select>
selected:默認(rèn)選中 是option的屬性
multiple：多選 是select的屬性 和size聯(lián)合使用
size：顯示選項的個數(shù) select屬性
案例練習(xí)：
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> 表單代碼練習(xí)4.文件：file
form屬性enctype="multipart/form-data"
表單元素通用格式
<input type="類型" name="后臺接受鍵" value="值" />
特殊格式
<textarea>
</textarea>
案例截圖：
ifram:把別的頁面以窗口的形式顯示在本頁面
音視頻標(biāo)簽：<video>
<video src="音視頻路徑" autoplay controls></video>
<audio src="音視頻路徑" autoplay controls></video>
autoplay:音視頻
?
代碼練習(xí)：
1 <iframe src="12.20.html"> 2 </iframe> 3 <video src="音視頻路徑" autoplay controls></video> 音頻代碼練習(xí)案例截圖：
二、css
含義:層疊樣式表 美化頁面
用法分類：
1.內(nèi)聯(lián)：在標(biāo)簽中以屬性的形式表現(xiàn) 屬性名 style
樣式：樣式值；
<div style="color:blanchedalmond;">
這是一個div111
</div>
注意：不推薦使用，優(yōu)先級最高
2.內(nèi)嵌：在head標(biāo)簽中以標(biāo)簽的形式表現(xiàn) 標(biāo)簽名style
3.外部引用：在head標(biāo)簽中以標(biāo)簽形式表現(xiàn)，標(biāo)簽名link用來引入一個CSS文件
<link rel="stylesheet" href="index.css">
項目中最常用
4.選擇器：
選擇器：把指定的樣式應(yīng)用于某一個、組、類標(biāo)簽上
（1）.標(biāo)簽選擇器
（2）id選擇器：通過id屬性值找標(biāo)簽 關(guān)鍵符號"#id值{樣式}"
（3）class（類）選擇器：通過class屬性值找標(biāo)簽 關(guān)鍵符號".class值{樣式}"
（4）復(fù)合選擇器：
并列 關(guān)鍵符號",用法： 選擇器1,選擇器2{樣式}"
后代 符號"空格 " 用法：選擇器1 選擇器2{樣式} 就近原則
篩選 關(guān)鍵符號. 用法：選擇器class選擇器
屬性選擇器 語法：選擇器[屬性名=屬性值]{樣式}
（5）*通用選擇器
{padding：0px;
margin:0px;}
優(yōu)先級排列：權(quán)值
1.內(nèi)聯(lián)樣式
2.id選擇器（系統(tǒng)定義的屬性：id(值唯一) class ? name ?value）
3.class選擇器
4.標(biāo)簽選擇器
5.通用選擇器
代碼練習(xí)：
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> 選擇器練習(xí) 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)} 圖片鏈接變灰練習(xí)?
案例截圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/sc1314-1218/p/8087980.html
總結(jié)
- 上一篇： beego1---beego，bee环境
- 下一篇： 洛谷 P2818 天使的起誓