5-[HTML]-body常用標簽2
阿新 • • 發佈：2018-06-01
cells val 深圳 port 備註 ati AS username word
1.表格標簽 table
表格由<table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由<td>標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table標簽</title></head> <body> <div class="table"> <table border="1px" cellspacing="0"> <!--表格頭--> <thread> <tr> <!--表格行row--> <th>星期1</th> <!--表格列 table-head，【註意】這裏使用的是th--><th>星期2</th> <th>星期3</th> <th>星期4</th> </tr> </thread> <!--表格體--> <tbody> <tr> <!--表格行row--> <td>math</td> <!--表格列 table-data，【註意】這裏使用的是td--> <td>chinese</td> <td>physical</td> <td>sports</td> </tr> <tr> <td>math</td> <td>chinese</td> <td>physical</td> <td>sports</td> </tr> <tr> <td>math</td> <td>chinese</td> <td>physical</td> <td>sports</td> </tr> </tbody> </table> </div> <hr> <hr> <div id="table"> <table border="2px" cellspacing="0"> <thead> <tr> <th></th> <th>星期3</th> <th>星期1</th> <th>星期2</th> <th>星期2</th> </tr> </thead> <tbody> <tr> <td rowspan="2">上午</td> <!--rowspan 合並行(豎著合並)--> <td>sports</td> <td>math</td> <td>chinese</td> <td>chinese</td> </tr> <tr> <td>sports</td> <td>math</td> <td>chinese</td> <td>chinese</td> </tr> <tr> <td rowspan="2">下午</td> <td>sports</td> <td>math</td> <td>chinese</td> <td>chinese</td> </tr> <tr> <td>sports</td> <td>math</td> <td>chinese</td> <td>chinese</td> </tr> </tbody> <tfoot> <tr> <td colspan="5">備註：2018-01-02</td> <!--colspan 合並列(橫著合並)--> </tr> </tfoot> </table> </div> </body> </html>
2.表單標簽 form
表單是一個包含表單元素的區域
表單元素是允許用戶在表單中輸入內容，比如：文本域(textarea)、輸入框(input)、單選框（）
表單的作用
表單用於顯示、手機信息，並將信息提交給服務器
1.語法：
<form>允許出現表單控件</form>
（1）表單屬性 見下圖：
（2）表單控件分類 見下圖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單控件</title> </head> <body> <div class="form"> <!-- form標簽是一個塊級元素 被提交 --> <form action="https://www.baidu.com" method="get"> <p> <!-- label標簽行內元素 input是行內塊元素--> <label for=‘user‘>用戶名:</label> <input type="text" name="username" id="user" placeholder="請輸入用戶名"> </p> <p> <label for="password">密碼：</label> <input type="password" name="password" id="password" placeholder="請輸入密碼"> </p> <!-- 單選框 checked會被默認選中，產生互斥的效果 name值要相同--> <p> 用戶性別： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!-- 復選框 --> <p> 用戶的愛好: <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="樂">樂 </p> <p> <!-- 文本域 --> 自我介紹： <textarea cols="20" rows="5" name="txt" placeholder="請做自我介紹"></textarea> </p> <p> <!-- 下拉列表 --> <select name="sel" size="3" multiple=""> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山東">山東</option> <option value="福建">福建</option> </select> </p> <p> <!-- 顯示普通的按鈕 --> <input type="button" name="btn" value="提交" disabled="disabled"> <!-- 重置按鈕 --> <input type="reset" name=""> <!-- 提交form表單使用 type=submit按鈕 --> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">按鈕</button> <!-- 文件上傳 --> <form action="https://www.mi.com" enctype="multipart/form-data"> <p> <input type="file" name="textFile"> </p> </form> </div> </body> </html>
5-[HTML]-body常用標簽2