第六章——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>
总结
掌握表格和表单相关的标签
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
