11.25 form標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> #提交信息的鏈接地址 <form action="a/b/c/login" method="get"> <p> 用戶名: #name對應的是提交時的key <input type="text" name="username" value="EGON"> #value:表單里寫好的默認內容 <input type="text" name="username" placeholder="請輸入用戶名">#placeholder：暗色的提示信息 <input type="text" name="username" value="egon" disabled="disabled"> </p> #disabled：內容不可更改，也不會提交服務端 <p> #readonly: 內容不可更改，但會提交服務端 密碼: #密碼輸入時會被遮擋 <input type="password" name="password" placeholder="密碼長度不能超過16位"> </p> <p> <input type="submit" value="登錄"> #登錄按鈕，沒有value時顯示提交 </p> </form> </body> </html>
11.251 單選框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> 性別: #選擇后提交gender=male <input type="radio" name="gender" value="male" checked="checked">男#checked表示默認選擇 <input type="radio" name="gender" value="female">女 #選擇后提交gender=female </p> #二者僅選其一 <p> <input type="submit" value="注冊"> #注冊按鈕 </p> </form> </body> </html>
11.252 多選框、file上傳文件、按鈕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> 愛好: #選擇后提交hobbies=basketball <input type="checkbox" name="hobbies" value="basketball">籃球 <input type="checkbox" name="hobbies" value="football" checked="checked">足球 <input type="checkbox" name="hobbies" value="pingpang" checked>乒乓球 #checked表示默認選擇 </p> <p> #選擇提交后 uploadfile='選擇的文件名' <input type="file" name="uploadfile"> #選擇文件按鈕,點擊選擇本地文件 </p> <p> <input type="submit" value="注冊"> #注冊按鈕，沒有value時顯示提交，提交表單 <input type="button" value="注冊" onclick="alert(123)">#普通按鈕，點擊顯示alert內的提示信息 <input type="image" src="1.jpg" onclick="alert(1)"> #圖片按鈕,點擊顯示alert內的提示信息,且跳轉 <input type="reset" value="重置" > #重置按鈕，點擊form表單清空 <input type='date' name="y-m-d" > #選擇日期，選擇后提交y-m-d=選擇的日期 <button>按鈕</button> #button在form中可以做提交按鈕用，在form外是普通按鈕 </p> </form> </body> </html>
11.253 label標簽
對於選擇框，點擊選擇框后的文字也能實現選擇；對於文本框，點擊文字選擇文本框並光標聚焦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> #name對應的是提交時的key <label for="el">用戶名:</label><input type="text" name="username" value="EGON" id='e1'> #input添加id,label根據id名找到輸入框並光標聚焦 #value:表單里寫好的默認內容 </p> <p> 性別： #選擇后提交gender=male input添加id,label根據id名找到單選框，並選擇 <input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label> <input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label> </p> <p> 愛好: #選擇后提交hobbies=basketball input添加id,label根據id名找到多選框，並選擇 <input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">籃球</label> <input type="checkbox" name="hobbies" value="football" checked="checked" id="fb"><label for="fb">足球</label> </p> <p> <input type="submit" value="注冊"> #注冊按鈕，沒有value時顯示‘提交’，提交表單 </p> </form> </body> </html>
11.254 下拉列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> 城市： #選擇后提交city=BJ/SH/SZ/GZ <select name="city" id="" size="2" multiple="multiple"> #下拉多選兩個 <option value="BJ">北京</option> <option value="SH">上海</option> <option value="SZ" selected="selected">深圳</option> #selected表示默認選擇 <option value="GZ">廣州</option> </select> </p> <p> 城市： <select name="city" id="" style="width: 200px"> <optgroup label="一線城市"> #選項分組(label提示信息不能選擇) <option value="BJ">北京</option> #選擇后提交city=BJ/SH/SZ/GZ <option value="SH">上海</option> <option value="SZ" selected="selected">深圳</option> #selected表示默認選擇 <option value="GZ">廣州</option> </optgroup> <optgroup label="二線城市"> <option value="BJ">濟南</option> <option value="SH">蘇州</option> <option value="SZ" selected="selected">南京</option> <option value="GZ">成都</option> </optgroup> </select> </p> <p> <input type="submit" value="注冊"> </p> </form> </body> </html>
11.255 textarea標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <p> #填寫后提交comment="輸入的內容" cols和rows設置初始文本域大小 style設置不可重置文本域大小 <textarea name="comment" id="" cols="30" rows="3" style="resize: none"> 親，給好評哈 #顯示提前寫入文本域的信息 </textarea> </p> <p> <input type="submit" value="注冊"> </p> </form> </body> </html>
11.256 fieldset標簽
<body> <form action="https://www.baidu.com" method="get"> <fieldset> #設置方框樣式表單 <legend>注冊頁面</legend> <p> ..... </p> </fieldset> </form> </body>
11.26 table標簽
水平對齊和垂直對齊:
#水平對齊: align 可以給table、tr、td標簽設置, 垂直對齊: valign 只能給tr、td標簽設置 強調：table只能設置水平方向 #========水平對齊=========== align=“left” align=“center” align=“right” 1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊 2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊 3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為准 #========垂直對齊=========== valign=“top” valign=“center” valign=“bottom” 1 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊 2 給td設置垂直對齊可以讓當前單元格內容垂直對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> #border邊框邊界 cellspacing單元格邊界 bgcolor表格邊框背景顏色 <table border="0px" cellspacing="1px" bgcolor="aqua"> #cellpadding單元格內內容距單元格邊框 <tr bgcolor="white"> #一行單元格背景顏色 <td >姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr bgcolor="white"> <td>egon1</td> <td>male</td> <td>18</td> </tr> </table> </body> </html>
11.261 表格結構
<table border="1" cellspacing="1px" bgcolor="black" width="300px" height="300px">#表格寬度和高度 <caption>學員信息統計</caption>#1、表格的標題 <thead> #2、表格的表頭 <tr bgcolor="white"> <th>姓名</th> #表頭行加粗，居中 <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> #3、表格的主體 <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> </tbody> <tfoot> #4、表尾 <tr bgcolor="white"> <td>3</td> <td>3</td> <td>3</td> </tr> </tfoot> </table>
11.262 單元格合並
1、水平向上的單元格colspan 可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待
2、垂直向上的單元格rowspan 可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待
<table border="0px" cellspacing="1px" bgcolor="aqua" width="200px" height="200px"> <tr bgcolor="white"> <td colspan="2"></td> #第一行第一列向后合並一個單元格 <td></td> #相應刪除一個列 </tr> <tr bgcolor="white"> <td></td> <td></td> <td rowspan="3"></td> #第二行第三列向下合並兩個單元格 </tr> <tr bgcolor="white"> <td></td> #相應的這兩行都只有兩列 <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> </tr> </table>
注意: 1、由於把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格 2、一定要記住，單元格合並永遠是向后或者向下合並，而不能向前或向上合並