网页设计基础——表格与表单
一、表格基础框架；
规则：
- 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>
网页效果：
例三：单选按钮（Radio Buttons）
<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>
网页效果：
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/289928.html