表單+css樣式+

時間 2019-11-18

標籤表單 css 樣式欄目 HTML 简体版

原文原文鏈接

1、表單css

含義：全部表單元素放在 form 標籤裏面
<form action="提交的地址" method="提交方式默認get">表單元素
</form>
頁面get傳值的寫法
路徑？屬性=屬性值
鍵值對
鍵=值 & 鍵=值
知識點：全部的表單元素，除了提交和重置和文件，其餘表單元素能夠在form標籤外面用
1.表單元素的類型
文本類型：disabled/readonly：不可編輯
文本框：text
密碼框：password
隱藏域：hidden
*多行文本：textarea
2.按鈕類型：
普通按鈕：button
重置按鈕：reset
提交按鈕：submit
3.選擇類型：
單選：radio
複選：checkboxhtml

注意：這兩個表單元素name屬性不只有鍵的做用還有分組的做用ide

checked：默認選中
disable：不可選中
label標籤
單選label標籤的兩種用法：url

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>

View Code

*下拉：<select>
<option>163</option>
<option>126</option>
<option>163</option>
</select>
selected:默認選中是option的屬性
multiple：多選是select的屬性和size聯合使用
size：顯示選項的個數 select屬性spa

案例練習：code

 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>orm

案例截圖：視頻

ifram:把別的頁面以窗口的形式顯示在本頁面
音視頻標籤：<video>
<video src="音視頻路徑" autoplay controls></video>
<audio src="音視頻路徑" autoplay controls></video>
autoplay:音視頻htm

代碼練習：blog

1 <iframe src="12.20.html">
2     </iframe>
3     <video src="音視頻路徑" autoplay controls></video>

音頻代碼練習

案例截圖：

2、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)}