HTML常用表格与标签

一、table表格标签：

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <title>Title</title>
7. </head>
8. <body>
9. <!--有大小为1的边框-->
10. <table border="1">
11.     <!-- 行-->
12.     <tr>
13.         <!-- 列，纵向占两个格子-->
14.         <td rowspan="2">年级</td>
15.         <!-- 列，加粗且居中，横向占两个格子-->
16.         <th colspan="2">姓名</th>
17.         <th>性别</th>
18.     </tr>
19.     <tr>
20.         <th>大一</th>
21.         <th colspan="2">张三</th>
22.         <th>男</th>
23.     </tr>
24. </table>
25. </body>
26. </html>

复制代码

结果图：

二、 form表单：

1）input元素：

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <title>Title</title>
7. </head>
8. <body>
9. <form>
10. <!--    输入框-->
11.     <tr><input type="text"/></tr>
12.     <!--    密码框-->
13.     <tr><input type="password"/></tr>
14.     <!--    单选框-->
15.     <tr><input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女</tr>
16.     <!--    复选框-->
17.     <input type="checkbox" />健身<input type="checkbox" />跑步
18.     <tr><input type="time"/></tr>
19.     <tr><input type="date"/></tr>
21. </form>
23. </body>
24. </html>

复制代码

结果图：

2）select 元素（下拉列表）：

2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <title>Title</title>
7. </head>
8. <body>
9. <form>
10. <!--下拉单选表单， selected="selected默认选的“练胸”-->
11. <select>
12.     <option selected="selected">练胸</option>
13.     <option>练腿</option>
14.     <option>练胳膊</option>
15. </select>
16. <!--多选下拉列表,按住ctrl就可以多选-->
17.     <select multiple="multiple">
18.         <option >练胸</option>
19.         <option>练腿</option>
20.         <option>练胳膊</option>
21.     </select>
22. <!--多行输入框-->
23. <textarea></textarea>
25. </form>
27. </body>
28. </html>

复制代码

结果图：