表格标签
1 表格 table
- 在HTML中，表格是通过
<table>标签来创建的，它允许在html中以行和列的形式组织数据。- HTML提供了一套完整的标签来创建功能丰富的表格。
2 表格的 结构
3 表格table代码结构
4 表格结构解析
-
<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行。 -
<tbody></tbody>： 用于定义表格的主体，主要用于放数据本体 。 -
以上标签都是放在
<table></table>标签中
4.1 使用场景:
因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分. 在表格标签中，分别用：
<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域. 这样可以更好的分清表格结构。
4.2 实例代码
html
<body>
<p>表格结构化，有助于提高网页的易读性和结构性，并有利于搜索引擎的索引和分类。</p>
<table border="1" width="300" height="100" align="center"
cellspacing="0" cellpadding="10" bgcolor="#c8e6c9"
>
<!-- 表名称：学生信息表 -->
<caption>学生信息表</caption>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td>总计人数：</td>
<td>3</td>
<td></td>
</tr>
</tfoot>
</table>
</body>4.3 浏览器效果
4.4 总结：
- 表格结构化，表头部分文字剧中且加粗
<thead></thead>：用于定义表格的头部。<thead>内部必须拥有<tr>标签。 一般是位于第一行。<tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。- 以上标签都是放在
<table></table>`标签中。
5 表格代码解析
html
<body>
<!-- HTML表格的整个主体由table标签包裹：表格table、行tr、单元格td -->
<table>
<!-- 表格的第一行是表头，由th标签包裹，表示该单元格是表头 -->
<tr>
<!-- 表头单元格由th标签包裹 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
<!-- 表格的第二行开始是数据行，由tr标签包裹 -->
<tr>
<!-- 第二行的数据行，由td标签包裹 -->
<td>李小小</td>
<td>女</td>
<td>16</td>
<td>123456789</td>
<tr>
<!-- 第三行的数据行，由td标签包裹 -->
<td>张三</td>
<td>男</td>
<td>18</td>
<td>123456789</td>
</tr>
<tr>
<!-- 第四行的数据行，由td标签包裹 -->
<td>李四</td>
<td>女</td>
<td>20</td>
<td>123456789</td>
</tr>
<tr>
<!-- 第五行的数据行，由td标签包裹 -->
<td>王五</td>
<td>男</td>
<td>22</td>
<td>123456789</td>
</tr>
<!-- 整个表格结束，由table标签包裹 -->
</table>
</body>6 表格的主要作用
6.1 主要作用
- 主要用于显示、展示数据
- 因为它可以让数据显示的非常的规整，可读性非常好。
- 特别是后台展示数据的时候，能够熟练运用表格就显得很重要。
- 一个清爽简约的表格能够把繁杂的数据表现得很有条理
6.2 主要用途
表格不是用来布局页面的,而是用来展示数据的。
7 表格主题结构说明表
| 结构 | 标签 | 作用 |
|---|---|---|
| 表格主体 | <table> </table> |
是用于定义表格的标签,表头、行、列、单元格都包括在table中 |
| 表格的行 row | <tr> </tr> |
用于定义表格中的行，必须嵌套在 <table> </table>标签中 |
| 表格的单元格 | <td> </td> |
用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。字母 td 指表格数据（table data），即数据单元格的内容。 |
html
<table>
<!-- 表格的第一行是表头，由th标签包裹，表示该单元格是表头 -->
<tr>
<!-- 表头单元格由th标签包裹 -->
<th>姓名</th>
...
</tr>
<!-- 表格的第二行开始是数据行，由tr标签包裹 -->
<tr>
<!-- 第二行的数据行，由td标签包裹 -->
<td></td>
...
</tr>
<!-- 整个表格结束，由table标签包裹 -->
</table>- 表头单元格位于表格的第一行或第一列
- 表头单元格里面的文本内容加粗居中显示.
<th>标签表示 HTML 表格的表头部分(table head 的缩写)- 从第二行开始，展示表格中表头部分的内容
7.1 表头单元格标签
- 表头单元格位于表格的第一行或第一列
- 表头单元格里面的文本内容加粗居中显示.
<th>标签表示 HTML 表格的表头部分(table head 的缩写)
html
<table>
<!-- 表格的第一行是表头，由th标签包裹，表示该单元格是表头 -->
<tr>
<!-- 表头单元格由th标签包裹 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
</table>
7.2 总结
表头单元格也是单元格, 常用于表格第一行 , 突出重要性, 表头单元格里面的文字会加粗居中显示.
8 表格属性
表格标签这部分属性我们实际开发我们不常用， 后面通过 CSS 来设置.
目的有2个:
-
记住这些英语单词,后面 CSS 会使用.
-
直观感受表格的外观形态
8.1 代码演示
html
<body>
<!-- HTML表格的整个主体由table标签包裹：表格table、行tr、单元格td -->
<table border="1" width="500" height="300" align="center"
cellspacing="0" cellpadding="10" bgcolor="#c8e6c9"
>
<!-- 表格的第一行是表头，由th标签包裹，表示该单元格是表头 -->
<tr>
<!-- 表头单元格由th标签包裹 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
<!-- 表格的第二行开始是数据行，由tr标签包裹 -->
<tr>
<!-- 第二行的数据行，由td标签包裹 -->
<td>李小小</td>
<td>女</td>
<td>16</td>
<td>123456789</td>
<tr>
<!-- 第三行的数据行，由td标签包裹 -->
<td>张三</td>
<td>男</td>
<td>18</td>
<td>123456789</td>
</tr>
<tr>
<!-- 第四行的数据行，由td标签包裹 -->
<td>李四</td>
<td>女</td>
<td>20</td>
<td>123456789</td>
</tr>
<tr>
<!-- 第五行的数据行，由td标签包裹 -->
<td>王五</td>
<td>男</td>
<td>22</td>
<td>123456789</td>
</tr>
<!-- 整个表格结束，由table标签包裹 -->
</table>
</body>8.2 浏览器效果
9 实战案例
html
<body>
<h3>著名小说排行榜</h3>
<table border="1" width="500" height="300" align="center"
cellspacing="0" cellpadding="5" bgcolor="#c8e6c9">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日占比</th>
<th>相关连接</th>
</tr>
<tr>
<td>1</td>
<td>小说</td>
<td>
<img src="down.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>小说</td>
<td>
<img src="down.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>小说</td>
<td>
<img src="down.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>小说</td>
<td>
<img src="up.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>小说</td>
<td>
<img src="up.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>小说</td>
<td>
<img src="up.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>小说</td>
<td>
<img src="down.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>8</td>
<td>小说</td>
<td>
<img src="down.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>9</td>
<td>小说</td>
<td>
<img src="up.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>10</td>
<td>小说</td>
<td>
<img src="down.jpg" alt="">
</td>
<td>1000</td>
<td>80%</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>9.1 浏览器效果
10 合并单元格
特殊情况下，我们在使用表格的时候为了丰富表格的实用性，可以讲临近的单元格进行合并，这样使得表格看上去更加符合我们需要
10.1 合并单元格方式
- 跨行合并 ：
- rowspan="合并单元格的个数"
- 最上侧单元格为目标单元格, 写合并代码
- 跨列合并 ：
- colspan="合并单元格的个数"
- 最左侧单元格为目标单元格, 写合并代码
10.2 合并单元格三步曲：
-
先确定是跨行还是跨列合并。
-
找到目标单元格. 写上合并方式 = 合并的单元格数量。
-
比如：
<td colspan="2"></td>。删除多余的单元格。
10.3 实例代码
html
<body>
<table border="1" width="800" height="600" cellpadding="10" cellspacing="0" align="center" bgcolor="#f0f8ff" style="border-collapse:collapse; color:#fb07d6;">
<tr>
<td rowspan="2" colspan="5">学生信息表</td>
<!-- <td></td> -->
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<!-- <td></td> -->
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th>地址</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5"></td>
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> -->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>10.4 浏览器效果
11 表格总结
表格是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系。
-
行：水平方向上的一组数据，一般为某个主题的各种数据内容。
-
列：垂直方向上的一组数据，一般为某一项数据。
-
单元格：表格中的显示某一项数据的方块。
为了可以在 HTML 页面中实现表格的效果，HTML 提供了一系列表格元素。
-
<table>元素：表示一个表格，作为表格的容器。 -
<tr>元素：表示一个表格中的行。 -
<td>元素：表示一个表格中的单元格。
HTML <th> 元素用来定义为一组单元格的标题。该元素的用法与 <td> 元素保持一致，定义在 <tr>元素中。
HTML <caption> 元素用来定义 HTML 页面中表格的标题。该元素一般作为 <table> 元素的第一个子级元素出现，同时会显示在表格内容中的最前面，并且会在水平方向居中显示。
-
<thead>元素：用来定义 HTML 页面中表格的标题单元格的行。 -
<tbody>元素：用来定义 HTML 页面中表格的主体（表格中真正的数据内容）。 -
<tfoot>元素：用来定义 HTML 页面中表格一组各列的汇总行。
CSS caption-side 属性用来设置 HTML 页面中表格的 <caption> 元素显示的位置，该属性需要与 <caption> 属性配合使用。
-
top：默认值，表示表格标题显示在表格的上方。
-
bottom：表示表格标题显示在表格的下方。
表格是由行、列、单元格组成，在HTML中用标签表示。
表格样式可以用css设置：
| 伪类选择器 | 作用 |
|---|---|
| selector:first-child | 用来定位一组兄弟元素中的第一个元素 |
| selector:last-child | 用来定位一组兄弟元素中的最后一个元素 |
| selector:nth-child(n) | 用来定位一组兄弟元素中的第 n 个元素 |
| selector:nth-last-child(n) | 用来定位一组兄弟元素中倒序方式的第 n 个元素 |
| selector:first-of-type | 用来定位一组同类型的兄弟元素中的第一个元素 |
| selector:last-of-type | 用来定位一组同类型的兄弟元素中的最后一个元素 |
| selector:nth-of-type(n) | 用来定位一组同类型的兄弟元素中的第 n 个元素 |
| selector:nth-last-of-type(n) | 用来定位一组同类型的兄弟元素中倒序方式的第 n 个元素 |
| selector:only-child | 用来定位一个没有任何兄弟元素的元素 |
| selector:only-of-type | 用来定位一个没有任何同类型兄弟元素的元素 |
| selector:empty | 用来定位一个没有子级元素的元素，并且该元素也没有任何文本内容 |
| selector:root | 用来定位 HTML 页面中的根元素（<html>） |
12 表格的相关标签
表格
table caption thead body tr th td 表格的相关属性
cellspacing cellpadding width height border 合并单元格
rowspan collspan列表标签
1 列表
- 表格是用来显示数据的
- 列表就是用来布局的
1.1 特点
列表最大的特点
- 整齐
- 整洁
- 有序
- 它作为布局会更加自由和方便
2 列表分类
- 无序列表
- 有序列表
- 自定义列表
3 应用场景
无序列表
有序列表
自定义列表4 有序列表
4.1 什么是有序列表
有序列表（Ordered List)是一种以数字、字母或其他有序符号标记项目排列的列表形式通常用于表示步骤、优先级或时间序列等需要明确顺序的内容。通俗来讲，有序列表就是把所有列表项依次排序下去，使其具有一定逻辑性和优先级。
4.2 语法格式
- 父级标签 ：
<ol>开始到</ol>结束 包裹 - 子代标签：列表项则是用
<li></li>标签 <li> 与 </li>之间相当于一个容器，可以容纳所有元素。- 有序列表会带有自己样式属性， 但在实际使用时，我们会使用 CSS 来设置。
4.3 注意
li标签是嵌在ol标签内，两者不可以单独使用必须搭配使用，ol标签内的子标签只能放li标签，不能放其他标签
li标签之间可以放任何标签
4.4 有序列表的type属性
| 属性值 | 列表项符号 |
|---|---|
| type="1" | 以阿拉伯数字形式进行排序：1，2，3... |
| type = "a" | 以小写字母进行排序：a,b,c... |
| type = "A" | 以大写字母进行排序：A，B，C... |
| type = "i" | 以小写罗马数字进行排序：i,ii,iii |
| type = "I" | 以大写罗马数字进行排序：I,II,III... |
| start | 从数字几开始。 |
| reversed | 倒序，数字倒序，字母倒序 |
4.5 实例代码
html
<body>
<!-- 有序列表 -->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 type -->
<ol type="A">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 start -->
<ol start="5">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 reversed -->
<ol reversed>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 type -->
<ol type="a">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 type -->
<ol type="I">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 type -->
<ol type="i">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 type -->
<ol type="1">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!-- 有序列表的属性 type -->
<ol type="A" reversed>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</body>4.6 浏览器效果
4.7 总结
- 当不设置type属性时，列表项前面符号就默认是阿拉布数字，我们想设置成什么形式只需改一下type的值即可
- 当单独使用start属性时，只能以数字几开始决定有序列表的序号，只对数字起作用
5 无序列表
5.1 什么是无序列表
无序列表(Unordered List)是一种用于呈现项目集合的排版方式，其特点是不强调项目的顺序或优先级。每个列表项通常以符号（如圆点、短横线等）标记，而非数字或字母编号。无序列表适用于罗并列关系的内容，例如购物清单、功能列表等
5.2 语法格式
- 父级标签：
<ul></ul> - 子代标签：
<li></li>
5.3 规则
ul 只能搭配 li使用 ul中不能包含任何标签
li标签内部可以使用任何标签
5.4 注意
- 语法中使用
<ul></ul>标签对搭配<li></li>标签使用 - 使用规则与有序列表一致
- ul只能和li搭配使用，且ul内部只能是li标签
- ul内部的文本只能在li元素内部添加
- 前端开发中总是用到的都是无序列表
<li> 与 </li>之间相当于一个容器，可以容纳所有元素。
5.5 无序列表的type属性
通常情况下，无序列表列表项符号是实心原点，它和有序列表一样，更改列表项符号用到的也是type属性。
| 属性值 | 列表项符号 |
| type = "disc" | 实心原点 |
| type = "circle" | 空心圆 |
| type = "square" | 正方形 |
5.6 实例代码
html
<body>
<!-- 无序列表 默认状态-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<!-- 无序列表的属性 type disc :实心原点 -->
<ul type="disc">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<!-- 无序列表的属性 type circle -->
<ul type="circle">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<!-- 无序列表的属性 type square :实心方块 -->
<ul type="square">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
</body>5.7 浏览器效果
6 自定义列表
6.1 什么是定义列表
定义列表（Definition List）是一种用于展示术语及其对应解释的HTML元素，通常由术语(
<dt>)和定义描述(<dd>）两部分组成。其结构清晰，适合呈现词汇表、术语解释等场景。我们可以简单将其看成"名词解释"，名词用dt，解释用dd
6.2 应用场景
网页底部 footer区域
6.3 语法格式
- 父级标签：
<dl></dl> - 兄弟级别：
<dt>自定义列表1:表头</dt> - 兄弟级别：
<dd>自定义列表1的内容:列表项</dd>
6.4 规则
- dl标签包含 dt和dd两个兄弟标签，同样 dl标签内不允许有任何其他标签
- dt标签 定义的是列表表头
- dl标签 定义的是列表项
<dt>和<dd>个数没有限制， 经常是一个<dt>对应多个<dd>。
6.5 注意
在 HTML 标签中，
<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（ 定义项目/名字）和<dd>（ 描述每一个项目/名字）一起使用
6.6 实例代码
html
<body>
<!-- 自定义列表 -->
<dl>
<dt>自定义列表1</dt>
<dd>自定义列表1的内容</dd>
<dd>自定义列表1的内容</dd>
<dd>自定义列表1的内容</dd>
<dd>自定义列表1的内容</dd>
<dt>自定义列表2</dt>
<dd>自定义列表2的内容</dd>
<dd>自定义列表2的内容</dd>
<dd>自定义列表2的内容</dd>
<dd>自定义列表2的内容</dd>
<dt>自定义列表3</dt>
<dd>自定义列表3的内容</dd>
<dd>自定义列表3的内容</dd>
<dd>自定义列表3的内容</dd>
<dd>自定义列表3的内容</dd>
</dl>
</body>6.7 浏览器效果
7 列表总结
注意：
-
学会什么时候用无序列表， 什么时候用自定义列表。
-
无序列表和自定义列表代码怎么写？
-
列表布局在学习完 CSS 后再来完成。
表单标签
1 表单定义
HTML表单是HTML页面上用于收集用户输入的一种元素，用户可以通过表单输入数据，这些数据随后可以被提交到服务器进行处理。表单通常包含一系列的输入字段，如文本域、单选按钮、复选框等，用户可以根据需要填写这些字段。
表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（ ）定义。
2 表单应用领域
现实中的表单，我们去银行办理信用卡填写的单子。
网页中的表单展示
3 为什么需要表单呢
- 为了收集用户信息。
在我们网页中， 我们也需要跟用户进行交互，收集用户资料， 此时就需要表单
4 表单组成 :
- 表单控件 : 文本输入框 , 复选框 , 按钮 ;
- 提示信息 : 用于 提示用户如何进行操作 ;
- 表单域 : 表单的容器 , 上述 表单控件 和 提示信息 就被封装在 表单域 中 , 在 表单域 中可以 定义 处理 表单数据的 地址 和 提交数据到服务器 的函数 ;
4.1 表单域
表单域是一个包含表单元素的区域
- 在 HTML 标签中，
<form>标签用于定义表单域，以实现用户信息的收集和传递。 - HTML表单域是用于收集用户输入信息并将其提交到服务器的重要组件
<form>会把它范围内的表单元素信息提交给服务器
4.1.1 什么是表单域
表单域是一个包含表单元素的容器，使用
<form>标签来定义。它提供了一个区域，用户可以在其中输入数据，然后通过提交操作将这些数据发送到服务器进行处理。
html
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
<body>
<!-- form表单域 -->
<!-- form 表单域的属性：
action：指定表单数据提交的url地址
method：指定表单数据提交的方式
get：将表单数据提交到地址栏
post：将表单数据提交到表单域
-->
<form action="http://www.baidu.com" method="get">
<p>
用户名：<input type="text" name="username" id="">
</p>
<p>
密码：<input type="password" name="password" id="">
</p>
</form>
</body>4.1.2 表单域的主要属性
从示例代码中可以看到，表单域主要包含以下关键属性：
- action ：指定表单数据提交的URL地址
- 如示例中的 action="http://www.baidu.com" 表示数据将提交到百度网站
- 通常会指向服务器上处理表单数据的脚本文件
- method ：指定表单数据提交的方式
- get ：将表单数据附加在URL地址后面提交（显示在地址栏中）
- post ：将表单数据放在HTTP请求体中提交（不会显示在地址栏）
- 示例中使用的是 method="get"
注意：每个表单元素通常需要设置 name 属性，服务器通过这个属性来识别提交的数据。
4.1.3 表格展示
4.1.4 表单数据提交过程
- 用户在表单中填写信息
- 点击提交按钮（示例中未包含，但通常会有）
- 浏览器根据 method 属性指定的方式，将表单数据按照 action 属性指定的URL发送
- 服务器接收并处理这些数据
表单是网站交互性的重要组成部分，广泛应用于用户注册、登录、信息提交等场景。
4.2 面试题
一 、 GET和POST方法的区别 ?
在HTML表单提交中，GET和POST是两种常用的HTTP请求方法，它们在数据传输方式、安全性、数据量限制等方面存在明显区别：
4.2.1 数据传输方式
-
GET ：表单数据会附加在URL地址后面，以 ? 开头，多个参数之间用 & 分隔
- 例如： http://www.example.com?username=john\&password=123
- 数据可见，会显示在浏览器地址栏中
-
POST ：表单数据被包装在HTTP请求体中发送
- 数据不会显示在地址栏中，对用户不可见
4.2.2 安全性
-
GET ：相对不安全，因为数据明文显示在URL中
- 不适合传输敏感信息（如密码、信用卡号等）
- 数据可以被浏览器历史记录、服务器日志等保存
-
POST ：相对更安全，数据在请求体中传输
- 虽然也不是完全加密的（除非使用HTTPS），但比GET更适合传输敏感信息
4.2.3 数据量限制
-
GET ：受URL长度限制，通常最多只能传输约2KB-8KB的数据
- 不同浏览器和服务器对URL长度有不同限制
-
POST ：理论上没有数据量限制（实际受服务器配置影响）
- 适合传输大量数据，如文件上传、长表单等
4.2.4 缓存与历史
-
GET ：请求可以被浏览器缓存，可以保存在浏览器历史记录中
- 可以添加书签
-
POST ：请求不会被缓存，不会保存在历史记录中
- 不能添加书签
4.2.5 幂等性
- GET ：是幂等的（对同一URL的多次请求应该返回相同结果，且不会改变服务器状态）
- POST ：不是幂等的（多次提交可能会导致不同的结果，如重复提交订单）
4.2.6 应用场景选择
- GET ：适合获取数据，如搜索、查询操作
- POST ：适合提交数据、修改服务器状态，如用户注册、登录、表单提交等
从示例代码中可以看到，当前表单使用的是 method="get" ，用户名和密码会显示在URL中传输，在实际应用中，登录表单通常应该使用 method="post" 以提高安全性。
4.3 表单控件(表单元素)
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
HTML表单控件是用于收集用户输入的各种元素，它们被放置在 <form> 标签内
4.3.1 表单元素分类
-
input输入表单元素
-
select下拉表单元素
-
textarea 文本域元素
4.3.2 input输入表单元素
在英文单词中， input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
html
<input type="属性值" />- 标签为单标签
- type 属性设置不同的属性值用来指定不同的控件类型
4.3.3 input语法
4.3.4 input 的 type 属性值
4.3.5 input 属性
HTML的 <input> 标签是表单中最常用的控件之一，它有多种属性可以控制其行为、外观和验证方式。以下是常见的 <input> 属性分类及说明：4.3.5.1 一、基本属性
-
type
-
定义输入控件的类型
-
常见值：text（文本）、password（密码）、radio（单选按钮）、checkbox（复选框）、submit（提交按钮）、reset（重置按钮）、button（普通按钮）、file（文件上传）、number（数字）、date（日期）、email（邮箱）等
-
如当前文件中的 type="text" 和 type="password"
-
-
name
-
定义控件的名称，用于表单提交时识别数据
-
服务器通过此属性获取对应的值
-
如当前文件中的 name="username" 和 name="password"
-
-
value
-
设置或获取输入控件的当前值
-
可作为初始默认值
-
示例:
-
html
<input type="text" name="username" value="默认用户名">-
id
-
定义控件的唯一标识符
-
常用于与
<label>标签关联或通过JavaScript操作元素 -
示例：
html<input type="text" id="username" name="username"> -
-
class
-
定义控件的CSS类名，用于样式设置
-
示例：
html<input type="text" class="form-input" name="username"> -
-
placeholder
-
提供输入框的提示文本，当输入框为空时显示
-
示例：
html<input type="text" name="username" placeholder="请输入用户名"> -
4.3.5.2 二、验证属性
-
required
-
表示该输入框为必填项，提交表单时会进行验证
-
示例：
html<input type="text" name="username" required> -
-
pattern
-
定义用于验证输入值的正则表达式
-
示例：
html<input type="text" name="phone" pattern="^1[3-9]\d{9}$" placeholder="请输入手机号"> -
-
minlength/maxlength
-
限制输入文本的最小/最大长度（字符数）
-
示例：
html<input type="text" name="username" minlength="2" maxlength="20"> -
-
min/max
-
对于数字、日期等类型，限制输入值的最小/最大值
-
示例：
html<input type="number" name="age" min="0" max="120"> -
-
step
-
对于数字、日期等类型，定义输入值的步长
-
示例：
html<input type="number" name="quantity" step="1"> -
4.3.5.3 三、状态属性
-
readonly
-
设置输入框为只读状态，用户无法编辑但可以选择和复制内容
-
示例：
html<input type="text" name="username" value="只读内容" readonly> -
-
disabled
-
禁用输入框，用户无法交互，且不会随表单提交
-
示例：
html<input type="text" name="username" disabled> -
-
checked
-
对于单选按钮和复选框，设置默认选中状态
-
示例：
html<input type="checkbox" name="agree" checked> -
4.3.5.4 四、样式与行为属性
-
size
-
定义输入框的宽度（字符数）
-
示例：
html<input type="text" name="username" size="30"> -
-
autofocus
-
页面加载时自动聚焦到该输入框
-
示例：
html<input type="text" name="username" autofocus> -
-
autocomplete
-
控制浏览器是否可以自动填充输入值
-
常见值：on（开启）、off（关闭）
-
示例：
html<input type="text" name="username" autocomplete="on"> -
-
multiple
-
对于文件上传类型，允许选择多个文件
-
示例：
html<input type="file" name="photos" multiple> -
-
accept
-
对于文件上传类型，指定可接受的文件类型
-
示例：
html<input type="file" name="avatar" accept="image/*"> -
-
form
-
指定输入控件所属的表单（当控件不在表单内部时使用）
-
示例：
html<input type="text" name="username" form="myForm"> -
4.3.5.5 五、其他属性
-
list
-
关联一个
<datalist>元素，提供输入建议 -
示例：
html<input type="text" name="browser" list="browsers"> -
-
spellcheck
-
控制是否对输入内容进行拼写检查
-
示例：
html<input type="text" name="message" spellcheck="true"> -
这些属性可以根据需要组合使用，以创建功能丰富、用户友好的表单控件。不同的type类型可能支持特定的属性，在使用时需注意兼容性。
4.3.6 实例代码
html
<body>
<form action="http://www.baidu.com" method="get">
<ul>
<li>
用户名：<input type="text" placeholder="请输入用户名" name="username" id="">
</li>
<li>
密码：<input type="password" placeholder="请输入密码" name="password" id="">
</li>
<li>
性别：
<input type="radio" name="sex" value="男" id="" checked>
男
<input type="radio" name="sex" value="女" id="">
女
</li>
<li>
手机号：<input type="tel" name="phone" placeholder="请输入手机号" id="">
</li>
<li>
邮箱：<input type="email" placeholder="请输入邮箱" name="email" id="">
</li>
<li>
网址：<input type="url" placeholder="请输入网址" name="url" id="">
</li>
<li>
搜索：<input type="search" placeholder="请输入搜索内容" name="search" id="">
</li>
<li>
文本域：<textarea name="textarea" placeholder="请输入您的评价" id="" cols="30" rows="10"></textarea>
</li>
<li>
家庭住址：<select name="select" id="">
<option value="1" >请选择</option>
<!-- 被选中 selected 默认选择 -->
<option value="1" selected>北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</li>
<li>
隐藏字段：<input type="hidden" name="data-AI-id" id="">
</li>
<li>
颜色选择器：<input type="color" name="color" id="">
</li>
<li>
日期：<input type="date" name="date" id="">
</li>
<li>
<!-- multiple：可多选文件进行上传
accept：指定文件类型
图片：image/*
视频：video/*
音频：audio/*
文档：application/*
所有文件：*
-->
文件上传：<input type="file" name="file" id="" multiple accept="image/*">
</li>
<li>
重置：<input type="reset" value="重置">
</li>
<li>
忘记密码：<input type="button" value="忘记密码">
</li>
<li>
提交：<input type="submit" value="提交">
</li>
</ul>
</form>
</body>4.3.7 浏览器效果
4.3.8 <label> 标签
<label> 标签为 input 元素定义标注（ 标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.4.3.8.1 语法格式
-
第一种：label 标签中的for 属性值 要和 元素标签的 id 属性值同名
-
第二种： 直接将元素标签包含在 label标签内
4.3.8.2 实例代码
html
<body>
<ul>
<li>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
</li>
<li>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</li>
<li>
性别：
<label>
<input type="radio" name="sex" id="sex">
男
</label>
<label>
<input type="radio" name="sex" id="sex">
女
</label>
</li>
</ul>
</body>4.3.8.3 浏览器效果
4.3.9 <select> 表单元素
使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时， 我们可以使用<select>标签控件定义下拉列表。
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时， 我们可以使用<select>标签控件定义下拉列表.4.3.9.1 语法格式
html
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>-
<select>中至少包含一对<option>。
-
- 在
<option>中定义 selected =" selected " 时，当前项即为默认选中项
- 在
4.3.9.2 属性
-
select选项中属性有哪些
-
name属性：用于指定select元素的名称，提交表单时使用。
-
id属性：用于指定select元素的唯一标识符，用于JavaScript操作。
-
size属性：用于指定select元素的可见选项数量，默认值为1。
-
multiple属性：用于指定select元素是否可以选择多个选项，默认值为false。
-
disabled属性：用于指定select元素是否禁用，默认值为false。
-
required属性：用于指定select元素是否必填，默认值为false。
-
form属性：用于指定select元素所属的表单，默认值为当前表单。
-
option属性：用于指定select元素的选项，每个选项都有value属性和text属性。
-
selected属性：用于指定select元素的默认选中选项，默认值为false。
-
onchange属性：用于指定select元素选项改变时触发的事件，默认值为空。
-
html
<body>
<select name="select" id="select">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
</select>
</body>4.3.10 <textarea> 表单元素
使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
在表单元素中， <textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板， 评论4.3.10.1 语法格式
text
<textarea rows="3" cols="20">
文本内容
</textarea>-
通过
<textarea>标签可以轻松地创建多行文本输入框。 -
cols="每行中的字符数" ， rows="显示的行数"， 我们在实际开发中不会使用，都是用 CSS 来改变大小。
4.4 表单总结
-
表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.
-
这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
html
<form>
<input type="text " name="username">
<select name="jiguan">
<option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>- 有三个名字非常相似的标签:
-
(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器
-
(2) 文件域 file 是input type 属性值 使用场景: 上传文件
-
(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等...
- 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可
查阅文档
经常查阅文档是一个非常好的学习习惯。
推荐的网址：
百度: http://www.baidu.com
W3C : https://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
内容制作不易，请各位粉丝们 关注💕、收藏⭐️、点赞🙏🙏🙏、评论💯！
你们的支持🎉🎉🎉是我创作莫大的支持，谢谢各位粉