第六章——CSS的表格和表单
一、表格
表格标签：
| 标签 |
描述 |
| < table ></ table > |
表格标签 |
| < tr></ tr> |
表格行标签 |
| < td></ td> |
普通单元格标签 |
| < th></ th> |
表头单元格标签 |
| < caption></ caption> |
表格标题标签 |
合并表格边框： boder-collapse 属性
boder-collapse 属性的值：
| 属性值 |
说明 |
| separate |
边框会被分开 |
| collapse |
如果可能，边框会被合并为一个单一的边框 |
| inherit |
从父元素继承 boder-collapse 属性的值 |
<!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>
<style>
table{
/* 合并表格相邻的框线 */
border-collapse: collapse;
}
th,tr,td{
border: 1px solid lightgray;
text-align: center;
width: 150px;
height: 40px;
}
</style>
</head>
<body>
<!-- 表格 -->
<table>
<!-- 表格的标题 -->
<caption>实训课程表</caption>
<!-- 行 -->
<tr>
<!-- 表头 -->
<th>上课时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<!-- 列 -->
<td>上午8:30-9:15</td>
<!-- 1.合并单元格需要找到起始位置 -->
<!-- 2.合并行需要给rowspan赋值，合并几个就给多少值 -->
<!-- 3.把多余出的数据删掉 -->
<td rowspan="3">HTML</td>
<td>HTML</td>
<td>CSS</td>
<!-- 合并列 -->
<td colspan="2">JS</td>
</tr>
<tr>
<td>上午9:25-10:10</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
<td>JS</td>
</tr>
<tr>
<td>上午10:20-11:05</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
<td>JS</td>
</tr>
<tr>
<td>下午13:00-13:45</td>
<td>HTML</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
<td>JS</td>
</tr>
<tr>
<td>下午13:55-14:40</td>
<td>HTML</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
<td>JS</td>
</tr>
<tr>
<td>下午14:50-15:35</td>
<td>HTML</td>
<td>HTML</td>
<td>CSS</td>
<td>JS</td>
<td>JS</td>
</tr>
</table>
</body>
</html>
二、表单
| 标签 |
描述 |
| < div ></ div > |
DIV标签 |
| < form ></ form > |
表单标签 |
| < input ></ input > |
输入型表单元素标签 |
| < header ></ header > |
页眉标签 |
| < footer ></ footer > |
页脚标签 |
| < textarea ></ textarea > |
文本域标签 |
input输入标签 type 属性不同取值的意义：
| type属性值 |
元素类型 |
示例 |
| text |
文本框 |
< input type=“text” value=“这是一个文本框” > |
| checkbox |
复选框 |
< input type=“checkbox” value=“1” name=“chx”>唱歌
< input type=“checkbox” value=“2” name=“chx”>跳舞
< input type=“checkbox” value=“3” name=“chx”>照相 |
| file |
文件域 |
< input type=“file” value=“”> |
| hidden |
隐藏域 |
< input type=“hidden” value=“1”> |
| image |
图像域 |
< input type=“image” value=“图像地址” name=“图像域名称”> |
| password |
密码域 |
< input type=“password” value=“123456”> |
| radio |
单选按钮 |
< input type=“radio” value=“1” name=“rdo1”>
< input type=“radio” value=“2” name=“rdo2”>女 |
| button |
普通按钮 |
< input type=“button” value=“这是按钮” > |
| reset |
重置按钮 |
< input type=“reset” value=“重置按钮”> |
| submit |
提交按钮 |
< input type=“submit” value=“提交按钮”> |
<!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>
<style>
</style>
</head>
<body>
<label for="user">账号：</label>
<!-- 输入框 -->
<!-- input是行内块标签 -->
<!-- 绑定标签，label的for属性值与input的id值相同时，这两个标签会相互绑定 -->
<!-- maxlength最大字符长度 autofocus自动获取焦点 -->
<input type="text" id="user" maxlength="6" autofocus>
<br>
<label for="pwd">密码：</label>
<!-- placeholder输入框提示 -->
<input type="password" id="pwd" maxlength="6" placeholder="密码最大长度为6位">
<br>
<label for="">性别：</label>
<!-- 单选框需要有相同的name值 -->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br>
<label for="">爱好：</label>
<!-- 多选框需要用checkbox -->
<input type="checkbox">唱歌
<input type="checkbox">吹空调
<input type="checkbox">吃饭
<input type="checkbox">熬夜打游戏
<input type="checkbox">打扑克
<br>
<label for="">你来自：</label>
<!-- 下拉框 -->
<select>
<option>邯郸</option>
<option>石家庄</option>
<option>保定</option>
<option>邢台</option>
<option>张家口</option>
<option>沧州</option>
</select>
<br>
<label for="">自我介绍：</label>
<br>
<!-- 文本域 -->
<textarea cols="50" rows="5"></textarea>
<br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</body>
</html>
总结
掌握表格和表单相关的标签
