牛客网刷题5HTML之元素input表格table与描述列表dl元素label
目录
牛客网刷题(5)（HTML之元素＜input＞、表格＜table＞与描述列表＜dl＞、元素＜label＞）
一、哪种输入类型定义滑块控件？元素（input）
（1）官方解析。
（2）总结。
选项 A， search 类型的输入框主要用于搜索功能。通常带有清除按钮，不是滑块控件。
选项 B， controls 不是元素的type属性值，它常用与
选项 C，HTML 中没有 slider 这种的type值。
选项 D， range 类型的元素定义了一个滑块控件。用户可以在指定的范围内选择一个值 。
（3）牛客大佬总结。
- 元素的type属性字段。
（4）HTML5——元素（input）的新属性。
- file ：不是HTML5新增的，在HTML4就已经存在，用于文件上传。
- reset ：不是HTML5新增的，在HTML4就已经存在，用于重置表单。
- search ：HTML5新增。用于搜索输入框，功能类似于text。但在某些浏览器中会有特殊的样式和功能。
- number ：HTML5新增。专门用于数字输入，可以设置min、max等数值范围。
- tel ：HTML5新增。用于电话号码输入，在移动设备上会调出数字键盘。
- 补充说明。 HTML5增加了其他类型如下所示 。
- email (电子邮件输入)。
- url (网址输入)。
- date (日期选择)。
- range (范围选择)。
- color (颜色选择)。
二、表格（table）与 描述列表（dl）。
（1）表格（input）组成格式。
：表示整个表格的容器，是 表格的根标签 。
：代表表格中的一行，一个 标签内可包含多个
标签来定义多行内容。 ：用于定义表头单元格，一般位于表格的第一行，用来描述每列数据的含义，内容默认加粗居中显示。 ：表示表格的数据单元格，每个 标签内可包含一个或多个 标签，用于存放具体的数据。 （2）描述列表（dl）的组成格式。
- 描述列表在 HTML 中用于 展示术语及其对应的描述 。
：是 描述列表的根标签 ，用于包裹整个描述列表内容。
- ：定义术语，即需要解释的名词或概念。
- ：定义
- 描述，用于对
- 中的术语进行详细解释或说明。一个
- 可以对应多个
- 。
（3）表格与描述列表的代码示例。
- 代码。
<!DOCTYPE html> <!-- 文档类型声明，表示当前是版本html5来显示 --> <html lang="en"> <!-- 当前文档显示语言 --> <!-- zh-CN 代表中文网站 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>my-html</title> <style> h1 { color: coral; } table { /* 让边框合并 */ border-collapse: collapse; } th, td { /* 添加边框，设置内边距 */ border: 1px solid black; padding: 8px; } dl { font-family: Arial, sans - serif; } dt { font-weight: bold; margin-top: 10px; } dd { margin-left: 20px; line-height: 1.5; } </style> </head> <body> <h1>示例表格</h1> <!-- 示例表格 --> <table style="margin-bottom: 100px;"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>23</td> <td>女</td> </tr> </table> <h1>示例描述列表</h1> <!-- 描述列表 --> <dl> <dt>云计算</dt> <dd>一种基于互联网的计算方式，通过这种方式，共享的软硬件资源和信息可以按需提供给计算机和其他设备。</dd> <dt>人工智能</dt> <dd>是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。</dd> </dl> </body> </html>
- 页面渲染结果。
三、元素（label）。
（1）题目。
（2）官方解析与代码示例。
- 选项A正确：
- 代码示例。
<!DOCTYPE html> <html lang="en"> <body> <!-- for与id一致 --> <input type="checkbox" id="myCheckbox"> <label for="myCheckbox">这是一个复选框</label> <!-- 嵌套 --> <label> <!-- radio：定义单选框 --> <input type="radio" name="gender"> 男 </label> </body> </html>
- 选项B正确： 当使用for属性关联方式时，
- 选项C错误：
- 代码示例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 内部链接 --> <label> <a href="https://www.baidu.com">点我百度一下！</a> </label> </body> </html>
- 选项D错误：
