11、HTML5 新增表单控件¶
| 标签 | type 属性 | 描述 |
|---|---|---|
<input> |
color | 颜色选择控件 |
<input> |
date、time | 日期、时间选择控件 |
<input> |
电子邮件输入控件 | |
<input> |
file | 文件选择控件 |
<input> |
number | 数字输入控件 |
<input> |
range | 拖拽条控件 |
<input> |
search | 搜索框 |
<input> |
url | 网址输入控件 |
注：兼容到 IE9，手机端完全兼容
<form>
<p>
颜色选择：
<input type="color" />
</p>
<p>
日期选择：
<input type="date" />
</p>
<p>
时间选择：
<input type="time" />
</p>
<p>
电子邮件（提交自动校验）：
<input type="email" />
</p>
<p>
必填项：
<input type="text" required />
</p>
<p>
数字（min最小值，max最大值）：
<input type="number" min="2" max="10" />
</p>
<p>
拖拽条：
<input type="range" min="10" max="50" />
</p>
<p>
搜索框（多一个清空按钮）：
<input type="search" />
</p>
<p>
网址：
<input type="url" />
</p>
<p>
<input type="submit" value="提交表单信息" />
</p>
</form>
datalist 控件¶
为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能提示感应
<input type="text" list="language-list" />
<datalist id="language-list">
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Python">Python</option>
<option value="Go">Go</option>
<option value="C++">C++</option>
</datalist>
![[Pasted image 20260127183724.png]]
五、其他 HTML5 不常用但实用的标签¶
TIP
关于 HTML5 标签有一些是不常用但实用的标签
1、<details>和 <summary>¶
TIP
创建可折叠的内容区块（无需 JavaScript）
常见于 FAQ 页面，或考虑添加 open 属性默认展开
<!-- open 属性为默认展开 -->
<details>
<summary>点击查看详情</summary>
<p>这里是隐藏的内容，点击摘要时会展开。</p>
</details>
<details>
<summary>点击查看详情</summary>
<p>这里是隐藏的内容，点击摘要时会展开。</p>
</details>
2、<progress>和 <meter>¶
TIP
进度和度量显示
<progress>用于未知总量的进度（如下载）
<meter>用于已知总量的度量（如磁盘使用）
<label for="file">下载进度：</label>
<progress id="file" value="70" max="100">70%</progress>
<label for="disk">磁盘使用：</label>
<meter id="disk" value="0.6">60%</meter>
3、<output>¶
TIP
显示计算或用户操作的结果（常与表单结合）
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0" /> +
<input type="number" id="b" value="0" /> =
<output name="result">0</output>
</form>
4、<ruby>、<rp>、<rt>¶
TIP
<ruby>标签是 HTML5 中用于为东亚字符（如汉字、日文假名等）添加注音或发音标注的标签，通常与<rt>（注音内容）和<rp>（备用内容）配合使用。其核心作用是为文本提供发音辅助，尤其在教育、多语言支持和无障碍访问场景中具有重要价值。
<ruby>：包裹需要标注的文本和注音内容。
<rt>：定义注音文本（如拼音、假名等）。
<rp>：为不支持<ruby>的浏览器提供备用显示内容（如括号）。
4.1、语法¶
<ruby>基础文本 <rp>(</rp><rt>注音内容</rt><rp>)</rp> </ruby>
<!-- 给汉字添加拼音-->
<ruby>汉<rp>(</rp><rt>Hàn</rt><rp>)</rp>字<rp>(</rp><rt>zì</rt><rp>)</rp></ruby>
注：在支持 <ruby>的浏览器中显示为"汉 Hàn 字 zì"，在不支持的浏览器中显示为"汉(Hàn)字(zì)"
4.2、可选标签 <rb>¶
TIP
用于明确包裹基础文本，提升代码可读性（非必需）
<ruby>
<rb>汉</rb><rp>(</rp><rt>Hàn</rt><rp>)</rp> <rb>字</rb><rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
六、表格¶
1、HTML 表格标签¶
![[Pasted image 20260127184134.png]]
| 标签 | 描述 |
|---|---|
<table> |
定义表格 |
<th> |
定义表格的表头 |
<tr> |
定义表格的行 |
<td> |
定义表格单元 |
<caption> |
定义表格标题（作为 table 的第一个子元素出现） |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主体 |
<tfoot> |
定义表格的页脚 |
2、table 标签属性¶
| 属性 | 描述 |
|---|---|
| border | 表格的边框 |
| width | 表格的宽度（HTML5 不支持） |
| cellpadding | 单元边沿与其内容之间的空白（HTML5 不支持） |
| cellspacing | 单元格之间的空白（HTML5 不支持） |
注：在 HTML5 中 table 标签的大部分属性已经废弃，全部用 CSS 代替了
示例¶
<h1>table标签</h1>
<table border="1" width="500" cellpadding="10" cellspacing="0">
<!-- caption标签，表格标题 -->
<caption>
同学通讯录
</caption>
<tr>
<!-- th，表头 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>所在城市</th>
</tr>
<tr>
<td>arry</td>
<td>男</td>
<td>18</td>
<td>北京</td>
</tr>
<tr>
<td>豆豆</td>
<td>女</td>
<td>21</td>
<td>上海</td>
</tr>
<tr>
<td>翠花</td>
<td>19</td>
<td>男</td>
<td>深圳</td>
</tr>
</table>
![[Pasted image 20260127184355.png]]
3、table 标签跨行、跨列¶
td 标签或 th 标签的属性
| 属性 | 值 | 描述 |
|---|---|---|
| colspan | number | 规定单元格可横跨的列数 |
| rowspan | number | 设置单元格可纵跨的行数 |
注：td 标签的其他属性在 HTML5 中已不支持，直接使用 css 即可
跨列示例¶
<h2>表格实战 - 跨列</h2>
<table border="1" width="800">
<caption>
学生个人信息登记表
</caption>
<tr>
<th colspan="8">高新一中初三一班学生信息登记表</th>
</tr>
<tr>
<th colspan="8">学生基础信息</th>
</tr>
<tr>
<td>姓名</td>
<td>XXX</td>
<td>国籍/地区</td>
<td>中国</td>
<td>姓名拼音</td>
<td>XXX</td>
<td>班内学号</td>
<td>20211101</td>
</tr>
<tr>
<td>性别</td>
<td>女</td>
<td>身份证件类型</td>
<td>本地居民</td>
<td>曾用名</td>
<td>无</td>
<td>班级</td>
<td>初三（1）班</td>
</tr>
<tr>
<td>出生日期</td>
<td>2002年9月1日</td>
<td>民族</td>
<td>汉</td>
<td>户口所在地</td>
<td>北京</td>
<td>入学年份</td>
<td>2015年</td>
</tr>
<tr>
<td>出生地</td>
<td>北京</td>
<td>政治面貌</td>
<td>团员</td>
<td>户口性质</td>
<td>城镇户口</td>
<td>入学方式</td>
<td>普通入学</td>
</tr>
<tr>
<td>籍贯</td>
<td>海淀区</td>
<td>健康状况</td>
<td>良好</td>
<td>特长</td>
<td>书法</td>
<td>就读方式</td>
<td>走读</td>
</tr>
<tr>
<td>身份证号</td>
<td colspan="3"></td>
<td>身份证有效期</td>
<td colspan="3"></td>
</tr>
<tr>
<th colspan="8">学生个人联系信息</th>
</tr>
<tr>
<td>现住址</td>
<td colspan="7"></td>
</tr>
<tr>
<td>家庭地址</td>
<td colspan="7"></td>
</tr>
<tr>
<td>联系电话</td>
<td colspan="7"></td>
</tr>
<tr>
<td>电子信箱</td>
<td colspan="7"></td>
</tr>
</table>
![[Pasted image 20260127184718.png]]
跨行、跨列示例¶
<h2>表格实战 - 跨行跨列</h2>
<table border="1" width="800">
<caption>
版本规划任务分配表
</caption>
<tr>
<th colspan="2">需求：V0.3版本规划</th>
<th>优先级</th>
<th>任务分解</th>
<th>产品负责人</th>
</tr>
<tr>
<td rowspan="3">功能模块1</td>
<td>具体事项1</td>
<td>3</td>
<td>任务1</td>
<td rowspan="3">@翠花</td>
</tr>
<tr>
<td rowspan="2">具体事项2</td>
<td>4</td>
<td>任务2</td>
</tr>
<tr>
<td>1</td>
<td>任务3</td>
</tr>
<tr>
<td rowspan="6">功能模块2</td>
<td>具体事项1</td>
<td>2</td>
<td>任务1</td>
<td rowspan="6"></td>
</tr>
<tr>
<td rowspan="4">具体事项2</td>
<td>3</td>
<td>任务1</td>
</tr>
<tr>
<td>2</td>
<td>任务2</td>
</tr>
<tr>
<td>1</td>
<td>任务3</td>
</tr>
<tr>
<td>4</td>
<td>任务4</td>
</tr>
<tr>
<td>具体事项3</td>
<td>1</td>
<td>任务1</td>
</tr>
<tr>
<th colspan="5">备注信息</th>
</tr>
<tr>
<td colspan="5">...</td>
</tr>
</table>
![[Pasted image 20260127184734.png]]
4、thead，tbody，tfoot 标签¶
<h2>表格：thead、tbody、tfoot标签</h2>
<table border="1" width="500">
<thead>
<caption>
同学通讯录
</caption>
<tr>
<th>专业</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>所在城市</th>
</tr>
</thead>
<tbody>
<tr>
<th>计算机</th>
<td>arry</td>
<td>男</td>
<td>18</td>
<td>北京</td>
</tr>
<tr>
<th>外语</th>
<td>豆豆</td>
<td>女</td>
<td>21</td>
<td>上海</td>
</tr>
<tr>
<th>市场营销</th>
<td>翠花</td>
<td>19</td>
<td>男</td>
<td>深圳</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>备注</th>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
![[Pasted image 20260127184801.png]]