wordpress 重裝win7優(yōu)化工具哪個好用
目錄
一、HTML表格
二、表單
三、布局標(biāo)簽
四、CSS
五、選擇器
一、HTML表格
table:表格
tr：行
td：單元格；rowspan:縱向合并相鄰單元格；clospan：橫向合并相鄰單元格
th：單元格加粗居中
border：加上邊框
cellspacing:邊框與邊框之間距離
cellpadding：控制邊框大小
caption：表格標(biāo)題
align：使表格居中
<table border="1"? cellspacing="0"? cellpadding="10" align="center">
?? <caption>學(xué)生信息表</caption>
?? <tr>
?????? <!--th 加粗居中>
?????? <th>序號</th>
?????? <th>姓名</th>
?????? <th>性別</th>
?????? <th>年</th>
?????? <th>班級</th>
?? </tr>
?? <!-- 第一行表格內(nèi)容-->
?? <tr>
??????? <td>1</td>
??????? <td>小英</td>
??????? <td> 女</td>
??????? <td>18</td>
??????? <td>1班</td>
?? </tr>
?? <!-- 第二行表格內(nèi)容-->
?? <tr>
??????? <td>2</td>
??????? <td>a</td>
??????? <td> 女</td>
??????? <td>19</td>
??????? <td>1班</td>
?? </tr>
?? <tr>
??????? <td>3</td>
??????? <td>b</td>
??????? <td> 女</td>
??????? <td>20</td>
??????? <td>2班</td>
?? </tr>
?? <tr>
??????? <td>合計</td>
??????? <td>3人</td>
??????? <td></td>
??????? <td></td>
??????? <td></td>
</table>
實現(xiàn)效果：
將第5列兩行的1班合并，將第5行的二三四五列的人數(shù)合并
<table border="1"? cellspacing="0"? cellpadding="10" align="center">
?? <caption>學(xué)生信息表</caption>
?? <tr>
?????? <!--th 加粗居中>
?????? <th>序號</th>
?????? <th>姓名</th>
?????? <th>性別</th>
?????? <th>年</th>
?????? <th>班級</th>
?? </tr>
?? <!-- 第一行表格內(nèi)容-->
?? <tr>
??????? <td>1</td>
??????? <td>小英</td>
??????? <td> 女</td>
??????? <td>18</td>
??????? <td rowspan="2">1班</td>
?? </tr>
?? <!-- 第二行表格內(nèi)容-->
?? <tr>
??????? <td>2</td>
??????? <td>a</td>
??????? <td> 女</td>
??????? <td>19</td>
??????? <!--<td>1班</td> -->（注釋掉）
?? </tr>
?? <tr>
??????? <td>3</td>
??????? <td>b</td>
??????? <td> 女</td>
??????? <td>20</td>
??????? <td>2班</td>
?? </tr>
?? <tr>
??????? <td>合計</td>
??????? <td clospan="4">3人</td>
??????? <!-- <td></td>
??????? <td></td>
??????? <td></td>--> （注釋掉）
</table>
?實現(xiàn)效果：
二、表單
1.常見：登錄注冊
form:表單
action:提交表單的輸入值到目標(biāo)地址
input: 輸入標(biāo)簽，用于獲取用戶在網(wǎng)頁中的鍵盤、鼠標(biāo)輸入
·placeholder:輸入框中的提示文字
<input placeholder="請輸入"></input>
·name：最終提交表單時，該項輸入框的數(shù)據(jù)描述（例如傳到網(wǎng)址上，就是？后面的參數(shù)值）
<form>
??? <input name="account"></input>
??? <input name="password"></input>
</form>
表示此表單中，分別有輸入賬號和密碼 的 輸入框
·value:輸入框最終的【輸入值/選中值/按鈕文字】
<input value="123123">
label：點擊到<label>時，會自動聚焦到其綁定的<input>標(biāo)簽
·for綁定<input>標(biāo)簽 id值
<label for="username">用戶名</label>
<input id="username"></input>
disabled:禁止該<input>【輸入/選擇】
type:通過修改type的值， 可以更改輸入框的功能
·text：普通的文本輸入框
<input type="text"> </input>
·password:密碼輸入框
<input type="password"></input>
·radio：單選框,
搭配checked: 默認(rèn)選擇；搭配disabled：禁止使用
<input type="radio" checked></input>
<input type="radio" disabled></input>
·checkbox：多選框
<input type="checkbox" checked></input>
<input type="checkbox" disabled></input>
·file：選擇文件
<input type="file"> </input>
·submit：提交按鈕
<input type="submit"></input>
·reset：重置按鈕
<input type="reset"></input>
·button:普通按鈕，需要寫value值，按鈕才有文字
<input type="button" value=" "></input>
例：
<form action="https://www.baidu.com/"><p><span>昵稱:</span><input type="text" name="nickname" value="one" id="nick"> <label for="nick"></label></p><p><span>年齡:</span><input type="text" name="age" id="old"><label for="old"></label></p><p><span>性別:</span><input type="radio" name="sex" value="1" id="man"><label for="man">男</label><input type="radio" name="sex" value="0" id="woman"><label for="woman">女</label></p><p><span>城市:</span><input type="radio" name="city" value="three" id="fu"><label for="fu">福州</label><input type="radio" name="city" value="four" id="zz"><label for="zz">漳州</label></p><p><input type="submit" name="submit" value="提交"><input type="reset" name="reset" value="取消"></p></form>實現(xiàn)效果：
?2.多行文本<textarea> </textarea>
cols：規(guī)定初始顯示的【列數(shù)】（以字為單位）
rows：規(guī)定初始顯示的【行數(shù)】（以字為單位）
<textarea name="text" id=" " cols="10" rows="2"></textarea>
3.下拉選擇框
select：下拉選擇框容器
option：選項
<select id="taste">
???? <option value="1">微辣</option>
???? <option value="2">辣</option>
</select>
<label for="taste"></label>
例：
<p><span>城市:</span><select id="city"><option value="01">福州</option><option value="02">漳州</option><option value="03">廈門</option><option value="04">泉州</option><obtion value="05">寧德</obtion><option value="06">莆田</option></select><label for="city"></label></p><p> <textarea name="text" rows="20" cols="30"></textarea></p>實現(xiàn)效果：
三、布局標(biāo)簽
div標(biāo)簽：塊級元素標(biāo)簽
特點：常用于而劃分一塊區(qū)域，一定占整行寬度，并且換行，搭配CSS使用。
span標(biāo)簽：行內(nèi)元素標(biāo)簽
特點：沒有任何默認(rèn)樣式，寬高隨文字撐開，不會換行。
?四、CSS
1.定義：
層疊樣式表：顯示設(shè)備在視覺上是二維平面的，實際上是多層圖層疊加顯示的效果，從上往下疊加的效果，！important最優(yōu)先效果。
2.書寫格式：
選擇器｛樣式屬性1：值1；屬性2：值2｝
3.書寫位置：
①內(nèi)聯(lián)樣式：直接寫在標(biāo)簽的style屬性中，無法重復(fù)使用代碼。
<span style="color:red">內(nèi)聯(lián)樣式</span>
<div style="width:50px">內(nèi)聯(lián)樣式<div>
<input type="text" style="width:50px; background-color:green"></input>
②內(nèi)部樣式：在html文件的<head></head>標(biāo)簽域中，添加<style></style>標(biāo)簽，將
代碼書寫其中，可以通過選擇器重復(fù)使用代碼。
內(nèi)聯(lián)優(yōu)先級>內(nèi)部
③外部樣式：寫在新的一個文件，通過link連接兩個文件
內(nèi)部優(yōu)先級>外部
！important：
五、選擇器
id選擇器：id="happy"
<style>
#happy{
width:100px;
}
</style>
class選擇器：class="sad"
<style>
.sad{
width:50px;
}
</style>
?子元素選擇器：
相鄰元素選擇器：
