本文详细介绍了HTML中的表格元素，包括基础结构、单元格合并、表格分区及表单元素的应用。表格由table、tr和td标签构建，通过rowspan和colspan属性实现单元格合并。此外，讲解了表单元素如input的多种类型，如文本框、单选框、复选框、文本域和下拉菜单，并展示了如何创建交互式的表单。
目录
9.html 表格
1.表格基础
表格主要由三个标签组成
table：定义了一个表格的结构
tr：定义表格的行（以行为单位搭建）
td：定义表格的单元格
table的两种属性
1.css样式 合并表格 style="border-collapse:collapse"（合并边框，使表格为融合的一个整体表格）
2.table中添加border增加边框
<table border="1" style="border-collapse:collapse；">th:表格的标头 每一个自动字体加粗
如果表格需要设置表头，可以使用
<tr>
<th>
<th>
<tr>基本实现
<tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>1</th>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
</tr>
<tr>
<th>2</th>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<th>3</th>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
<tr>
<th>4</th>
<td>第四行第一列</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
</tr>
</table> 
2.单元格合并
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置属性
rowspan：上下行跨行合并
colspan：左右跨列合并
属性值是数字，数字是几就代表跨几行或者跨几列
步骤：首先确定一行有多少td，再看有几行，观察哪个单元格有合并，再去分析
<table border="1">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>注意：合并单元格中会产生多余的单元格，因此应该是每一行有多少元素设置多少td，再根据布局合并单元格。跨几行（列）数字就为几
3.表格分区
一个完整的表格包含三个部分：表格标题，表格表头，表格主题
三个分区标签：
1.caption：定义表格的标题
2.thead：定义表格的头部
3.tbody：定义表格的主题
<table border="1" style="border:collapse;">
<caption>
投资概况
</caption>
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计</th>
<th>去年同期增长</th>
<th>自年初累计</th>
<th>去年同期</th>
</tr>
</thead>
<tbody>
<tr>
<td>全国</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>全国</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>全国</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>全国</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr><td>全国</td>
<td>123</td>
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</table>4.表单元素
表单元素是网页中提供给用户进行点击或者输入的控件
1.form标签
form是表单的意思
form是容器级标签，内部可存放可输入的控件，如果输入的表单需要提交到数据，所有的控件需要被form表单包裹。
method：数据提交的方法。属性值是post和get
action：数据提交的位置
2.input标签
input标签是输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展更多功能
input的type属性丰富
<body>
<form action="">
<p>
用户名<input type="text">
</p>
</form>
</body>2.1.输入框
（1）value：输入框默认出现的值，可以被删除 写在type标签内部
（2）placeholder：如果没有value时的提醒用户的文字占位符
（3）如需要输入密码等不能被直接看到的内容，则在type引号内输入password
2.2.单选框
<form action="">
<p>
用户名<input type="text" placeholder="请输入用户名">
</p>
<p>
密 码<input type="password" placeholder="请输入密码">
</p>
<p>
性 别
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</p>
</form>这里的 ；是空格符号的意思；
radio单项选择。
要想实现一组单选按钮的互斥，需要设置相同的name属性、
2.3.复选框
也叫多选框，通过type值为checkbox设置
复选框可以通过对自身进行多次点击实现选择或取消
多选框可以选择一个或者多个，建议同一组设置同一name属性
单选框和多选框有默认被选择的功能，需要给input标签添加一个checked=“checked”
【直接跳转出来就是被勾选的选项】
其中单选框checked只能用一个，多选框可以用多个checked，自动选择。
<form action="">
<p>
用户名<input type="text" placeholder="请输入用户名">
</p>
<p>
密 码<input type="password" placeholder="请输入密码">
</p>
<p>
性 别
<input type="radio" name="sex">男
<input type="radio" name="sex"checked="checked">女
<input type="radio" name="sex">保密
</p>
<P>
爱 好
<input type="checkbox" checked="checked">跳舞<input type="checkbox">唱歌<input type="checkbox">画画
</P>
</form>点击文字不能触发单选框/多选框的点击事件，因此需要加label来触发。
<p>
性 别
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex"checked="checked">女</label>
<label><input type="radio" name="sex">保密</label>
</p>2.4.文本域
标签：textarea
之前学习的input的单行输入框，只能输入单行文本，如果需要使用多行文本，就需要使用textarea标签。
双标签，文本级标签
属性值rows和col
<p>
自我介绍
<textarea rows="3"cols="30" placeholder="请输入自我介绍"></textarea>
</p>rows：定义文本域的可视区域有几行，单位是数字
cols：当前行显示的字节数量（以英文为准），单位是数字
placeholder：占位符
textarea可以通过拖动右下角实现放大或缩小文本域，如果我们不希望缩放，可以在textarea设置style。
<textarea rows="3"cols="30" placeholder="请输入自我介绍"style="resize:none"></textarea>2.5.下拉菜单
需要标签select和option进行制作
select 搭建下拉项
option 搭建下拉项
<select >
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>默认位选中,使用selectd的属性，值也为selected
<option selected="selected">广州</option>10.html注释
注释内容浏览器不加载，输入方式为：ctrl+/
11.html字符实体
w3c手册
有着类似与 ；之类的字符
在网页中普通文字部分在键盘中是打不出来的，比如我们的版权符号，商标符号等，还有一部分场景是替代字符，html会识别一部分字符。
例如浏览器会识别h1当作标签加载，因此需要字符实体进行转换。
<div>
<h1>标签
</div>字符实体以”&“开头，”；“结尾。
|  ； | 实体空格 |
| 小于号 | <； |
| 大于号 | >； |
| 版权符号 | ©； |
| 注册商标 | ®； |
| 引号 | "； |
| 和号 | &； |
12.html中常见标签div和span
div、span都是常见的布局标签
div：分割跨度大跨度
span：小区域小跨度
作用是用来分隔页面的布局，div指的是跨度布局分割，span指的是文字分割
div是容器级标签，
html+css又叫div+css
div主要是对于网页布局的拆分，没有明确的定义
span的作用是一个极限小，只适用于文字的跨度划分
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
