html第二天学习
表格 選項 文本框 列表 等功能實現
在這里插入代碼片<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><table align="center" border="1" cellpadding="0" cellspacing= "0" width="500" height="249"> <tr><th>姓名</th> <th>性別</th> <th>年齡</th></tr><tr><td>江龍杰</td> <td>男</td> <td>20</td></tr><tr><td>江龍杰</td> <td>男</td> <td>20</td></tr><tr><td>江龍杰</td> <td>男</td> <td>20</td></tr><tr><td>江龍杰</td> <td>男</td> <td>20</td></tr></table><br><table align="center" border="1" cellpadding="0" cellspacing= "0" width="500" height="249"><tr><th>排名</th><th>關鍵詞</th><th>趨勢</th><th>加入搜索</th><th>最近七天</th><th>相關連接</th></tr><tr><td>1</td><td>鬼吹燈</td><td>上升</td><td>456</td><td>123</td><td><a href="#">百度百科</a></td></tr></table> <br><table align="center" width="500" height="200" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table><h4>你喜歡的食物</h4><!-- 無序列表 --><ul><li>榴蓮</li><li>臭豆腐</li><li>鯡魚</li></ul><h4>你喜歡的明星</h4> <!-- 有序列表 --><ol><li>劉德華 10000</li><li>劉德華 10000</li><li>劉德華 10000</li></ol><!-- 自定義列表 --><dl><dt>關注我們</dt><dd>新浪微博</dd><dd>新浪微博</dd><dd>新浪微博</dd></dl><form><!-- 表單元素名 和 值 最大輸入不得超過幾個字-->用戶名：<input type="text" name="username" value="請輸入用戶名" maxlength="20"> <br>密碼 ：<input type="password"><br>性別：男 <input type="radio"> 女 <input type="radio"> <!-- 可以選擇默認值 讓打卡頁面時默認選擇狀態 -->人妖 <input type="radio" name="人妖" checked="checked"><br>吃飯 <input type="checkbox"> 睡覺<input type="checkbox">打豆豆<input type="checkbox"><br><!-- 提交 重置 --><input type="submit" value="免費注冊"><input type="reset" value="重新填寫"><input type="button" value="獲取短信驗證碼">上傳頭像 ：<input type="file"></form><br><!-- label 標簽 實現點文字也能選 --><label for ="text">用戶名</label> <input type="text" id="text"><input type="radio" id="nan" name="sex"> <label for = "nan">男</label><input type="radio" id="nv" name="sex"> <label for = "nv">女</label><br>籍貫：<select><option>1</option><option>2</option><option>3</option><option>4</option></select><br>寫東西的文本框<textarea cols="50" rows="50">你可以在里面寫一大段文字！</textarea></body> </html>相親界面實戰！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>世紀佳緣，你在我也在！</title> </head> <body><h1>青春不常在，抓緊談戀愛！</h1><table width="500" ><tr ><td>性別：</td><td><input type="radio" name="sex" id="nan" > <label for="nan">男</label><input type="radio" name="sex" id="nv" > <label for="nv">女</label></td></tr><!-- line 2 --><tr><td>生日：</td><td><select ><option>請選擇年份</option><option>2002</option><option>2003</option><option>2004</option></select><select ><option>請選擇月份</option><option>1</option><option>2</option><option>3</option></select><select ><option>請選擇日期</option><option>1</option><option>2</option><option>3</option></select></td></tr><!-- line 3 --><tr><td>所在地區：</td><td><input type="text"></td></tr><!-- line 4 --><tr><td>婚姻狀態：</td><td>未婚<input type="radio" name="marry"> 已婚<input type="radio"name="marry"> 離異<input type="radio"name="marry"></td></tr><!-- line 5 --><tr><td>學歷：</td><td><input type="text"></td></tr><!-- line 6 --><tr><td>喜歡的類型</td><td>性感 <input type="checkbox"> 嫵媚<input type="checkbox">清純<input type="checkbox"></td></tr><!-- line 7 --><tr><td>自我介紹：</td><td><input type="text"></td></tr><!-- line 8 --><tr><td></td><td><input type="submit" value="免費注冊"></td></tr><!-- line 9 --><tr><td></td><td> <input type="checkbox">我同意注冊條款</td></tr><!-- line9 --><tr><td></td><td><a href="#">我已注冊，點此立即登陸！</a></td></tr><!-- line10 --><tr><td></td><td><h4>我承諾！</h4><ul><li>年滿18，單身</li><li>抱著嚴謹的態度</li><li>真誠尋求另一半！</li></ul></td></tr></table></body> </html>總結
