# 表格（table）
### 基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
tr,
td{
border: 1px solid;
}
table{
/* 合并边框*/
border-collapse:collapse ;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<table>
<!-- 标题 -->
<caption><h3>我是标题</h3></caption>
<!-- 表头 -->
<tr>
<td colspan="2">内容</td>
<!-- <td>内容</td> -->
<td rowspan="2">内容</td>
</tr>
<!-- 表格主体 -->
<tr>
<td>内容</td>
<td>内容</td>
<!-- <td>内容</td> -->
</tr>
<!-- 表尾 -->
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</body>
</html>- - `thead,tbody,tfoot`可省略，但添加后可以不按顺序
- - `tr`表示行，它在子元素是`th`（标题单元格）和`td`（单元格）
- - `border-collapse:collapse;`合并边框 ;
- - `border-collapse:seperate;`使边框分离
#### 表格单元格合并
- - 跨行合并：` <td rowspan="2">内容</td>` ，合并一列在单元格
- - 跨列合并： `<td colspan="2">内容</td>`,合并一行的单元格
# 表单
1. `<form>` 元素用于创建表单，`action` 属性定义了表单数据提交的目标 `URL，method` 属性定义了提交数据的 `HTTP` 方法（这里使用的是 `"post"`）。
2. `<label>` 元素用于为表单元素添加标签，提高可访问性。
3. `<input>` 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 `<label>` 元素，name 属性用于标识表单字段。
4. `<select>` 元素用于创建下拉列表，而 `<option>` 元素用于定义下拉列表中的选项。
### 表单内容（HTML 结构）
1. `<form>`：定义表单的开始和结束
<form action="" method="post">
<!-- 表单元素 -->
</form>2. `<input>`：用于创建各种类型的输入控件
- 文本输入：`<input type="text" name="username">`
- 密码输入：`<input type="password" name="password" >`
- 单选按钮：`<input type="radio" name="gender" value="male"> 性别`
- 复选框：`<input type="checkbox"> `
- 提交按钮：`<input type="submit" value="Submit">`
- bottom：普通按钮 ，submit：提交按钮，reset：重置
3. `<select>`：创建下拉列表
<select name="options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>4. `<textarea>`：创建多行文本输入控件
<textarea name="message" rows="4" cols="50"></textarea>5. `<button>`：创建一个可点击的按钮。
<button type="button" name="button">Click Me!</button>6. `<label>`：为 `<input>` 元素定义标签。（可用在点击按钮）单选框，复选框
<label for="name">Name:</label>
<input type="text" id="name" name="username">7. `<datalist>`：为 `<input>` 元素提供选项列表。
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>### 表单样式（CSS）
表单的样式可以通过 CSS 来定义，以下是一些基本的 CSS 样式示例：
1. 设置输入框的样式：
input[type="text"] {
width: 200px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}2. 设置下拉列表的样式：
select {
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}3. 设置文本区域的样式：
textarea {
width: 300px;
height: 100px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}4. 设置按钮的样式：
button {
padding: 10px 20px;
margin: 5px;
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #e9e9e9;
}5. 设置标签的样式：
label {
display: block;
margin: 10px 0 5px;
}6. 设置整个表单的样式：
form {
background-color: #f8f8f8;
padding: 20px;
border-radius: 10px;
max-width: 400px;
margin: auto;
}
扫一扫
8558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
