目录
表格标签
表格的主要作用
表格的基本语法
表头单元格标签
表格外观属性
设计表格的思路
表格标签结构
合并单元格属性
列表标签
无序列表
有序列表
自定义列表
表单标签
表单域
表单控件
password
reset与submit
checkbox与radio
label标签
checked属性和maxlength属性
选择表单元素
文本区域表单元素
表格标签
表格的主要作用
- 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
- 表格不是用来布局页面的,而是用来展示数据的。
表格的基本语法
<table>
<tr>
<td>
</td>
</tr>
</table><table> </table>是用于定义表格的标签<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。<td> </td>用于定义表格中的单元格（字母td指表格数据（table data），即数据单元格的内容），必须嵌套在<tr></tr>标签中。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
<table>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>小王</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>女</td>
</tr>
</table>
</body>
</html>效果如下：
表头单元格标签
在HTML中，可以使用<th></th>标签指定表头（标题单元格）
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示<th> 标签表示 HTML 表格的表头部分(table head 的缩写)
📌
<th></th>也必须放置到<table></table>标签中，与<td></td>标签并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
<table>
<tr>
<!-- 表头标签 -->
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>女</td>
</tr>
</table>
</body>
</html>效果如下：
表格外观属性
📌
表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置
| 属性名 | 属性值 | 描述 |
|
|
| 规定表格相对周围元素的对齐方式 |
|
| 1或"" | 规定表格单元格是否带有边框，默认""（表示没有边框） |
|
| 像素值 | 规定单元格边沿与其内容之间的空白，默认1像素 |
|
| 像素值 | 规定单元格之间的空白，默认2像素 |
|
| 像素值与百分比 | 规定表格的宽度 |
|
| 像素值与百分比 | 规定表格的高度 |
cellpadding设置的区域介绍：
cellspacing设置的区域介绍：
📌
注意，上面的属性必须写在<table></table>的第一个标签<table>中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
<!-- 将表格居中对齐，并将边框设置为4， cellpadding和cellspacing设置为0，高度和宽度为300-->
<table align="center" border="4" cellpadding="0" cellspacing="0" height="300" width="300">
<tr>
<!-- 表头标签 -->
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>女</td>
</tr>
</table>
</body>
</html>效果如下：
设计表格的思路
先制作表格的结构
1.第一行里面是 <th></th> 表头单元格
2.第二行开始里面是 <td></td> 普通单元格单元格里面可以放任何元素
3.文字链接图片等都可以
后书写表格属性
1.用到宽度高度边框cellpadding 和 cellspacing
2.表格浏览器中对齐 align
表格标签结构
因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分
在表格标签中，分别用：<thead></thead>标签表格的头部区域、<tbody></tbody>标签表格的主体区域. 这样可以更好的分清表格结构
例如上面的代码可以将姓名和性别设置为表头区域，将内容设置为主体区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<!-- 创建一个三行(两个tr标签)两列(每一个tr标签中两个td标签)的表格 -->
<!-- 将表格居中对齐，并将边框设置为4， cellpadding和cellspacing设置为0，高度和宽度为300-->
<table align="center" border="4" cellpadding="0" cellspacing="0" height="300" width="300">
<thead>
<tr>
<!-- 表头标签 -->
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小王</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>合并单元格属性
在HTML中，可以使用两个属性控制单元格的合并：
rowspan(跨行合并)：rowspan="合并单元格的个数"，最上侧单元格为起始单元格, 写合并属性，删除除起始单元格以外的单元格colspan(跨列合并)：colspan="合并单元格的个数"，最左侧单元格为起始单元格, 写合并代码，删除除起始单元格以外的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<!-- 创建三行三列的单元格 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" height="300" width="300">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>效果如下：
- 合并第一行的第二个和第三个单元格（跨列合并）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<!-- 创建三行三列的单元格 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" height="300" width="300">
<thead>
<tr>
<th></th>
<th colspan="2"></th>
<!-- 删除下面的标签 -->
<!-- <th></th> -->
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>效果如下：
- 合并第一列第二行和第三行的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<!-- 创建三行三列的单元格 -->
<table align="center" border="1" cellpadding="20" cellspacing="0" height="300" width="300">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- 删除下面的标签 -->
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>效果如下：
列表标签
在HTML中，表格一般用来显示数据，而列表一般用来布局
列表最大的特点是整齐、整洁、有序，所以它作为布局会更加自由和方便
列表有以下三个分类：
- 无序列表
- 有序列表
- 自定义列表
无序列表
在HTML中，使用<ul></ul>标签代表无序列表
一般会以项目符号呈现列表项，而列表项使用 <li></li> 标签定义。
无序列表的基本语法格式如下：
<ul>
<li>
</li>
<ul>- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的<li></li>- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表标签</title>
</head>
<body>
<ul>
<li>
列表标签1
</li>
<li>
列表标签2
</li>
<li>
列表标签3
</li>
</ul>
</body>
</html>效果如下：
有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义
在HTML中，使用<ol></ol>表示有序列表，列表排序以数字来显示，并且使用 <li></li> 标签来定义列表项。有序列表的基本语法格式如下：
<ol>
<!-- 列表标签1 -->
<li>
</li>
<!-- 列表标签2 -->
<li>
</li>
<!-- 列表标签3 -->
<li>
</li>
</ol><ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。<li></li>之间相当于一个容器，可以容纳所有元素。- 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>
列表标签1
</li>
<li>
列表标签2
</li>
<li>
列表标签3
</li>
</ol>
</body>
</html>效果如下：
自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在 HTML 标签中，<dl></dl>标签用于定义描述列表（或定义列表），该标签会与 <dt></dt>（定义项目/名字）和 <dd></dd>（描述每一个项目/名字）一起使用。语法如下：
<dl>
<!-- 列表名称 -->
<dt>
</dt>
<!-- 列表描述 -->
<dd>
</dd>
</dl>示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt>
列表名称
</dt>
<dd>
列表描述1
</dd>
<dd>
列表描述2
</dd>
<dd>
列表描述3
</dd>
</dl>
</body>
</html>效果如下：
表单标签
使用表单目的是为了收集用户信息。在网页中， 当需要跟用户进行交互，收集用户资料时，就需要表单。
在 HTML 中，一个完整的表单通常由3个部分构成
- 表单域
- 表单控件（也称为表单元素）
- 提示信息
表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中， <form></form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form></form> 会把它范围内的表单元素信息提交给服务器
实现代码：
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>在上面的代码中：
| 表单属性 | 属性值 | 作用 |
|
|
| 用于指定接收并处理表单数据的服务器程序的url地址 |
|
|
| 用于设置表单数据的提交方式 |
|
| 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
表单控件
<input />表单元素
在表单元素中 <input /> 标签用于收集用户信息。在 <input /> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）
<input type="属性值" /><input /> 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型
type 属性的属性值及其描述如下：
| 属性值 | 描述 |
|
| 定义可点击按钮，多数通过JavaScript启动脚本 |
|
| 定义复选框 |
|
| 定义输入字段和"浏览"按钮，供文件上传 |
|
| 定义隐藏的输入字段 |
|
| 定义图像形式的提交按钮 |
|
| 定义密码字段。该字设中的字符被掩码 |
|
| 定义单选按钮 |
|
| 定义重置按钮。重置按钮会清除表单中的所有数据 |
|
| 定义提交按钮。提交按钮会把表单数据发送到服务器 |
|
| 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符 |
除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
| 属性 | 属性值 | 描述 |
|
| 用户自定义 | 定义 |
|
| 用户自定义 | 规定 |
|
|
| 规定此 |
|
| 正整数 | 规定输入字段中的字符的最大长度 |
button与text
- 创建一个获取手机验证码的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<form>
<input type="text" value="请输入验证码" />
<input type="button" value="获取验证码" />
</form>
</body>
</html>效果如下：
password
password值和text值的不同点：password不会回显输入的内容，text会回显输入的内容
- 创建一个密码输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<form>
请输入密码：<input type="password" />
</form>
</body>
</html>效果如下：
reset与submit
- 创建一个提交按钮和一个重置表单输入按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<form>
请输入密码：<input type="password" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>效果如下：
checkbox与radio
- 创建三个兴趣爱好复选框以及一对性别选项框，结合一个姓名输入框和提交与重置按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<form>
姓名：<input type="text" value="请输入姓名"><br />
你的性别是：<br />
男：<input type="radio" name="gender" value="男">
女：<input type="radio" name="gender" value="女">
<br />
你的爱好是：<br />
<input type="checkbox" name="hobby" value="打篮球">打篮球
<input type="checkbox" name="hobby" value="踢足球">踢足球
<input type="checkbox" name="hobby" value="打羽毛球">打羽毛球
<input type="checkbox" name="hobby" value="丢飞盘">丢飞盘
<br />
<input type="submit" value="提交你的信息">
<input type="reset" value="重置你的信息">
</form>
</body>
</html>效果如下：
📌
注意单选和复选框时，两个单选框必须保证name值相同才能实现单选的效果，多选框必须保证name值相同才会被视为同一类
label标签
在上面的选择文本框或者点击选择按钮过程中只能点击对应的区域，点击其他区域并没有任何效果，所以为了更好的交互性，可以为文本框或者选择按钮的描述信息添加联系
<label></label> 标签为 input 元素定义标注（标签）。<label></label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.语法：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />注意：<label> 标签的 for 属性应当与相关元素的 id 属性相同
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签和表单标签</title>
</head>
<body>
<form>
<!-- 将姓名与文本框联系 -->
<label for="姓名">姓名：</label>
<input type="text" value="请输入姓名" id="姓名"><br />
你的性别是：<br />
<!-- 将男和女与选择按钮联系 -->
<label for="男">男：</label>
<input type="radio" name="gender" value="男" id="男">
<label for="女">女：</label>
<input type="radio" name="gender" value="女" id="女">
<br />
你的爱好是：<br />
<!-- 将爱好与选择按钮联系 -->
<label for="打篮球">打篮球</label>
<input type="checkbox" name="hobby" value="打篮球" id="打篮球">
<label for="踢足球">踢足球</label>
<input type="checkbox" name="hobby" value="踢足球" id="踢足球">
<label for="打羽毛球">打羽毛球</label>
<input type="checkbox" name="hobby" value="打羽毛球" id="打羽毛球">
<label for="丢飞盘">丢飞盘</label>
<input type="checkbox" name="hobby" value="丢飞盘" id="丢飞盘">
<br />
<input type="submit" value="提交你的信息">
<input type="reset" value="重置你的信息">
</form>
</body>
</html>checked属性和maxlength属性
- 实现当页面第一次加载时性别默认选择为“男”，对于文本框默认限制个数为6个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签和表单标签</title>
</head>
<body>
<form>
<label for="姓名">姓名：</label>
<!-- 最多输入6个字符 -->
<input type="text" value="请输入姓名" id="姓名" maxlength="6"><br />
你的性别是：<br />
<label for="男">男：</label>
<!-- 默认选择男 -->
<input type="radio" name="gender" value="男" id="男" checked="checked">
<label for="女">女：</label>
<input type="radio" name="gender" value="女" id="女">
<br />
你的爱好是：<br />
<label for="打篮球">打篮球</label>
<input type="checkbox" name="hobby" value="打篮球" id="打篮球">
<label for="踢足球">踢足球</label>
<input type="checkbox" name="hobby" value="踢足球" id="踢足球">
<label for="打羽毛球">打羽毛球</label>
<input type="checkbox" name="hobby" value="打羽毛球" id="打羽毛球">
<label for="丢飞盘">丢飞盘</label>
<input type="checkbox" name="hobby" value="丢飞盘" id="丢飞盘">
<br />
<input type="submit" value="提交你的信息">
<input type="reset" value="重置你的信息">
</form>
</body>
</html>效果如下：
选择表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select></select>标签控件定义下拉列表
基本语法如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select表单元素</title>
</head>
<body>
<form>
表单：
<br />
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
</form>
</body>
</html>效果如下：
文本区域表单元素
当用户输入内容较多的情况下，就不能使用文本框表单了，此时我们可以使用 <textarea> 标签
- 在表单元素中，
<textarea></textarea>标签是用于定义多行文本输入的控件。 - 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论
基本语法：
<textarea rows="3" cols="20"> 文本内容 </textarea>通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea表单元素</title>
</head>
<body>
<form>
<textarea cols="30" rows="10">请输入内容</textarea>
</form>
</body>
</html>效果如下：
