网页设计基础——表格与表单
一、表格基础框架；
规则：
- table：表示整个表格。
- caption：定义表格的标题
- tr：表示表格的一行。
- td：表示行中的一个列,需要嵌套在
<tr> 标签内。
- th：表示表头单元格. 会居中加粗。
格式：
<table> <tr> <th></th> <td></td> <td></td> </tr> </table>
二、表格样式；
1.表格边框的合并与分离
border-collapse: collapse; /* 边框合并 */ border-collapse: separate; /* 边框分离 */
2.表格边框的间距大小
border-collapse: separate; /* 边框分离 */ border-spacing: 5px 10px /* 横向 纵向*/
3.表格标题的位置
caption-side: top; /* 把标题放在表格上面。*/ caption-side: bottom; /* 把标题放在表格下面。*/
4.表头的标识
<tr> <th scope="col">星期一</th> <!-- 把<th>标识为列的表头--> <th scope="col">星期二</th> <!-- 把<th>标识为列的表头--> </tr> <tr> <th scope="row">第一节</th> <!-- 把<th>标识为行的表头--> <td>语文</td> </tr>
三、表单基本框架
规则：
<form>：定义供用户输入的表单标签。<input>：输入标签。type：定义输入类型，如文本域text、密码字段password、提交按钮submit。name：定义表单的名称，用于在表单提交之后引用表单数据，或者在 JavaScript 中引用元素。placeholder：定义输入框中的提示信息。
格式：
<form> <input type="text"> </form>
四、表单样式；
例一：文本域（Text Fields）
<html> <head> <title>文本域</title> </head> <body> <form> 姓名：<input type="text" name="Name"><br> 学号：<input type="text" name="Student ID"> </form> </body> </html>
网页效果：
例二：密码字段（Password）
<html> <head> <title>密码字段</title> </head> <body> <form> 账号：<input type="text" name="Accound"><br> 密码：<input type="password" name="Password"> <!-- 默认隐藏输入的内容 --> </form> </body> </html>
网页效果：
<html> <head> <title>表单</title> </head> <body> <form> <input type="radio" name="Sex" value="man">男<br> <!-- 选择此项后提交的值即为value的值 --> <input type="radio" name="Sex" value="woman">女 </form> </body> </html>
网页效果：
例四：复选框（Checkboxes）
<html> <head> <title>表单</title> </head> <body> <form> <input type="checkbox" name="Career" value="programmer">我是程序员<br> <input type="checkbox" name="Career" value="Superheroes">我是超级英雄 </form> </body> </html>
网页效果：
例五：提交按钮(Submit)
<html> <head> <title>表单</title> </head> <body> <form> <input type="text" name="Name" placeholder="姓名"><br> <!-- 与例一的区别就是通过 placeholder 设置了提示信息 --> <input type="text" name="Student ID" placeholder="学号"><br> <input type="submit" value="提交"> </form> </body> </html>
网页效果：
