表格常用标签及属性(表格标签基本使用,表格结构和常用列表,自定义列表和表单,表单输入,表单输入)
1. 表格常用标签及属性
1.1 表格标签基本使用
表格的主要作用是什么？
- 以行、列的方式（表格）整齐地展示数据，例如：股票价格
- 用表格布局页面
表格的基本语法：
单元格内容
... //重复 td → 单元格
... //重复 tr → 行
常用的表格标签有几个？分别代表什么含义？
三个基本的表格标签：
| 序号 | 标签名 | 说明 |
|---|---|---|
| 1 | table |
表格标签，用于包含多个 tr |
| 2 | tr |
定义表格中的行，用于包含多个 td |
| 3 | td |
定义表格中的单元格，用于存放单元格内容 |
注意:
- table 和 tr 是用来搭建表格结构的，不能存放实际内容；
- td 是用来存放单元格数据的。
序号
姓名
性别
1
张三
男
2
李四
男
3
王五
女
1.2 表头单元格标签
表头标签的作用是什么？
第一行通常用来显示标题而不是实际的数据，这样可以方便用户阅读和理解下放表格数据的含义
标签是什么？
th同样可以存放内容，但是默认会被加粗并且居中显示。
<table>
<th>
<td>序号td>
<td>姓名td>
<td>性别td>
th>
<tr>
<td>td>
<td>1td>
<td>张三td>
<td>男td>
tr>
<tr>
<td>td>
<td>2td>
<td>李四td>
<td>男td>
tr>
<tr>
<td>td>
<td>3td>
<td>王五td>
<td>女td>
tr>
table>
1.3 表格相关属性
表格属性应该写在哪一个标签中？为什么？
属性是用来描述标签的特征（显示效果）的，因此属性都应该写在 table 标签中
属性语法复习：
注意：
- 属性名不需要引号
- 属性值必须要用引号，通常使用双引号
属性="值"这种定义方式又被称为键值对 —— 属性名：键 / 属性值：值 / 成对出现- 每一个键值对之间使用空格分隔
表格的常用属性：
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right |
对齐方式 |
| border | 宽度像素值或 “” | 表格边框，默认 “” 无边框 |
| width | 像素值 | 宽度 |
| height | 像素值 | 高度 |
| cellspacing | 像素值 | 单元格之间的间距，默认 2 像素 |
| cellpadding | 像素值 | 内容与边框之间的距离，默认 1 像素 |
表格居中显示，设置表格边框、宽度、高度、内容间距和单元格间距。
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="100">
<th>
<td>序号td>
<td>姓名td>
<td>性别td>
th>
<tr>
<td>td>
<td>1td>
<td>张三td>
<td>男td>
tr>
<td>td>
<td>2td>
<td>李四td>
<td>男td>
tr>
<td>td>
<td>3td>
<td>王五td>
<td>女td>
tr>
table>
2. 表格结构和常用列表
2.1 表格结构标签
就语义而言，表格可以被划分成哪两个区域？分别对应什么标签？
就语义而言，表格可以被划分成以下两个区域：
thead定义表格头部（标题行），必须拥有tr标签，一般位于第一行tbody定义表格的主体，通常包含标题行下方的表格数据区域
注意：thead和tbody只是用来划分表格结构的，区分标题行和数据区域，不能替代原有的tr、th、td标签的作用。
2.2 合并单元格
合并单元格有那两种方式？
合并单元格的方式：
- 跨行合并（
rowspan），把多个行的单元格合并 → 纵向合并 - 跨列合并（
colspan），把多个列的单元格合并 → 横向合并
合并单元格的步骤是什么？
- 明确合并方式（跨行 / 跨列）
- 找到目标单元格
td，增加合并单元格属性
- 跨行
rowspan="x"（纵向） - 跨列
colspan="y"（横向）
<table align="center" width="640" height="240" cellspacing="1" cellpadding="20" border="2">
<thead>
<tr>
<th colspan="4">学生信息th>
tr>
thead>
<tbody>
<tr>
<td>姓名：td>
<td>巨小帅td>
<td>班级：td>
<td>合肥10期td>
tr>
<tr>
<td>出生日期：td>
<td>2000-02-14td>
<td>性别：td>
<td>小帅td>
tr>
<tr>
<td>手机号：td>
<td>110td>
<td>微信号：td>
<td>119td>
tr>
tbody>
table>
- 删除多余的单元格
2.3 无序列表
列表的主要是用来做什么的？
列表就是用来布局的，可以整齐、有序的展示数据，用列表做布局会更加自由和方便；
我们一共要学习几种列表？
- 无序列表（
ul） - 有序列表（
ol） - 自定义列表（
dl）
无序列表一共有几个标签？分别是什么，作用是什么？有什么注意事项？
无序列表的的基本语法：
<ul>
<li>列表项li>
<li>列表项li>
<li>列表项li>
...
ul>
两个无序列表标签：
ul无序列表，只允许包含多个li标签li用于存放列表项内容
注意：ul是用来搭建结构的，不能存放实际内容；ul只允许包含多个li标签；li是用来存放列表项数据的
2.4 有序列表
有序列表和无序列表有什么区别？
有序列表 ol 会在列表项前面自动增加数字排序，并且排序依次递增；
有序列表的的基本语法与无序列表基本一直，只需要把 ul 替换成 ol 即可：
<ol>
<li>列表项li>
<li>列表项li>
<li>列表项li>
...
ol>
有序列表除了序号之外，与无序列表的使用及注意事项有区别吗？
有序列表除了序号之外，与无序列表的使用及注意事项没有区别。
3. 自定义列表和表单
3.1 自定义列表
自定义列表的应用场景是什么？
网站首页下方的网站导航通常可以使用自定义列表来实现
自定义列表的基本语法：
<dl>
<dt>dt>
<dd>
...
dd>
<dt>dt>
<dd>
...
dd>
dl>
注意：虽然一个 dl 中可以包含多个 dt，但是在实际开发中通常只包含一个 dt，因为这样更方便布局
自定义列表的标签有几个？分别代表什么含义？
三个自定义列表标签：
| 序号 | 标签名 | 说明 |
|---|---|---|
| 1 | dl |
自定义列表，只允许包含 dt 和 dd 标签 |
| 2 | dt |
用于存放关键词(term)内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt |
| 3 | dd |
用于存放前面 dt 关键词的列表项内容 |
3.3 表单使用场景以及分类
表单的应用场景是什么？
在开发网站时，可以使用表单收集用户信息，统一提交给后台处理；
表单由那几部分组成？
表单通常包含 3 个部分：
- 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性别等完整的用户信息记录；
- 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓名；
- 提示信息：提示用户每一个表单控件是收集什么信息的。
3.4 表单域
表单域的作用是什么？
- 实现用户信息的收集与传递，例如收集用户的完整信息，然后统一传递给后台；
- 表单的基本语法：
<form>
... 表单控件 ... 提示信息
form>
3.5 input 之 type 属性文本框和密码框
表单控件的作用是什么？
用户通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的。
表单控件可以分为几大类？
表单控件包含以下三大类：
input输入select选择textarea文本域
input 标签的基本语法：
<input type="属性值" />
type 的常用属性值：
| 类型 | 属性值 | 描述 |
|---|---|---|
| 输入 | text | 输入文字 |
| 输入 | password | 密码 |
| 选择 | radio | 单选按钮，多选一 |
| 选择 | checkbox | 复选框（打勾） |
| 点击选择文件 | file | 文件上传使用 |
| 点击 | button | 按钮 |
| 点击 | image | 按钮 |
| 表单操作 | submit | 提交，会把数据发送给服务器 |
| 表单操作 | reset | 重置，会清空表单所有数据 |
4. 表单输入
4.1☆ input 之 type 属性提交和重置按钮
提交按钮的作用是什么？
提交按钮（sumbit) 可以把表单域中的数据提交给后台
重置按钮的作用是什么？
重置按钮（reset) 可以把表单域中的数据清空
value 属性有什么用处？
通过 value 属性可以指定提交按钮或重置按钮中的文字
4.2 input 之 type 属性单选按钮和复选框
单选框的应用场景是什么？
在多选一的时候，使用单选框（radio），例如：性别；
复选框的应用场景是什么？
在多选多的时候，使用复选框（checkbox)，例如：爱好。
注意：在开发时，无论是单选还是复选，都不适合提供太多选项
4.3 input 之 name 和 value 属性
哪一个属性能够把表单控件区分开？（不同的控件负责收集不同的信息）
name属性可以把表单控件区分开value属性可以记录用户在控件中输入的值或者选择结果
怎样能够在多个单选按钮中，只允许用户选择一项？
同一组单选框或复选框，name 属性的值应该一致
5. 表单输入
5.1 input 之 checked 和 maxlength 属性
checked 属性的应用场景是什么？
- 如果用户要修改之前保存过的信息，
checked属性可以选中用户之前的选择，例如：修改个人信息 - 用
checked属性可以帮助用户默认同意用户协议；
maxlength 属性的应用场景是什么？
- 输入框输入项有长度限制时，可以使用
maxlength属性；
input标签的常用属性：
| 属性 | 描述 |
|---|---|
| type | 类型 |
| name | 名称，用于区分控件 |
| value | 值，用于记录或设置控件的值 |
| checked | 默认选中某个单选或复选框 |
| maxlength | 输入框最大输入长度 |
注意：在 H5 中 checked="checked" 可以简写为 checked。
5.2 input 之 type 属性普通按钮和文件域
哪一个属性可以设置普通按钮的显示文字？
用 value 属性可以设置普通按钮的属性值
上传文件的 type 属性值是什么？
上传文件的 type 属性值是 file；
点击普通按钮能提交表单吗？
点击普通按钮不能提交表单，后续学习了 JavaScript 之后普通按钮就非常有用了。
5.3 label 标签
label 标签的作用是什么？
label 可以和表单中的元素绑定，增加点击范围，提高用户体验
label 标签的使用步骤是什么？
步骤：
- 给要绑定的
input标签设置唯一的id属性值； - 使用
让label标签与对应控件绑定。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label 标签title>
head>
<body>
<form action="demo.php" method="get">
<dl>
<dt><h4>用户信息h4>dt>
dl>
用户名：<input type="text" value="请输入用户名" maxlength="6"><br>
密 码：<input type="password" name="password" value="password"><br>
性别：男<input type="radio" name="sex" checked>女<input type="radio" name="sex">人妖：<input type="radio" name="sex"><br>
爱好：全部<input type="checkbox" name="hobby" checked='checked' id="basketball"><label for="basketball"> 篮球label><input type="checkbox" name="hobby" id="football"><label for="football">足球label><input type="checkbox" name="hobby" id="sing"><label for="sing">唱歌label><input type="checkbox" name="hobby" id="dance"><label for="dance">跳舞label><input type="checkbox" name="hobby"><br>
文件上传：<input type="file" name="file" id=""><br>
button按钮: <input type="button" value="获取短信验证码"><br>
上传头像：<input type="image" value="images"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
form>
body>
html>
5.4 select 下拉表单
下拉列表的应用场景是什么？
选项太多，希望节约空间，提升用户体验时可以使用下拉列表
下拉列表的基本语法：
<select>
<option>选项 1option>
<option>选项 2option>
<option>选项 3option>
...
select>
下拉列表的标签有几个？分别代表什么含义？
-
三个下拉列表的标签：
序号 标签名 说明 1 select下拉列表 2 option下拉列表选项，用于存放选项内容 3 selected属性能够默认选中某一项。 在 H5 中 selected=“selected” 可以简写为 selected。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select 下拉表单title>
head>
<body>
选项列表
<select>
<option value="">列表1option>
<option value="">列表2option>
<option value="">列表3option>
<option value="">列表4option>
<option value="">列表5option>
<option value="">列表6option>
<option value="" selected>列表7option>
select>
body>
html>
附录
1. 标签
表格标签
| 序号 | 标签名 | 说明 |
|---|---|---|
| 1 | table |
表格标签，用于包含多个 tr |
| 2 | tr |
定义表格中的行，用于包含多个 td |
| 3 | td |
定义表格中的单元格，用于存放单元格内容 |
| 4 | th |
定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示 |
| 5 | thead |
定义表格头部（标题行），必须拥有 tr 标签 |
| 6 | tbody |
定义表格的主体，通常包含标题行下方的表格数据区域 |
列表标签
| 序号 | 标签名 | 说明 |
|---|---|---|
| 1 | ul |
无序列表，只允许包含多个 li 标签 |
| 2 | ol |
有序列表，只允许包含多个 li 标签 |
| 3 | li |
用于存放列表项内容 |
| 4 | dl |
自定义列表，只允许包含 dt 和 dd 标签 |
| 5 | dt |
用于存放关键词内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt |
| 6 | dd |
用于存放前面 dt 关键词的列表项内容 |
表单标签
| 序号 | 标签名 | 说明 |
|---|---|---|
| 1 | form |
定义表单域，统一收集传递数据 |
| 2 | input |
输入控件，可以是文本框、单选、复选、选择文件、按钮等 |
| 3 | select |
下拉列表 |
| 4 | option |
下拉列表选项，用于存放选项内容 |
input 标签的常用属性：
| 属性 | 描述 |
|---|---|
| type | 类型 |
| name | 名称，用于区分控件 |
| value | 值，用于记录或设置控件的值 |
| checked | 默认选中某个单选或复选框 |
| id | 控件标识，与 label 标签联用 |
| maxlength | 输入框最大输入长度 |
input 标签 type 的常用属性值：
| 类型 | 属性值 | 描述 |
|---|---|---|
| 输入 | text | 输入文字 |
| 输入 | password | 密码 |
| 选择 | radio | 单选按钮，多选一 |
| 选择 | checkbox | 复选框（打勾） |
| 点击选择文件 | file | 文件上传使用 |
| 点击 | button | 按钮 |
| 点击 | image | 按钮 |
| 表单操作 | submit | 提交，会把数据发送给服务器 |
| 表单操作 | reset | 重置，会清空表单所有数据 |
2. 快捷键
VSCode 快捷键
| 快捷键 | 作用 |
|---|---|
| ctrl + n | 新建文件 |
| ctrl + s | 保存文件 |
| ctrl + z | 撤销 |
| ctrl + shift + z | 恢复撤销 |
| ctrl + 加号 / 减号 | 放大 / 缩小 |
| ctrl + c / v | 复制粘贴一行（不能选中文字） |
| ctrl + x | 删除一行 |
| alt + ↑ / ↓ | 上下移动代码 |
| alt + shift + ↑ / ↓ | 上下复制一行代码 |
| ctrl + / | 注释 |
| ctrl + d | 向后多选相同的内容 |
| alt + z | 自动换行 |
Emmet 语法
ul>li*6{h$}
dl>dt+dd*3
重点单词
| 序号 | 英语 | 中文 |
|---|---|---|
| 1 | table | 表格 |
| 2 | row | 行 |
| 3 | data | 数据 |
| 4 | align | 对齐 |
| 5 | left | 左 |
| 6 | center | 中 |
| 7 | right | 右 |
| 8 | cell | 单元格 |
| 9 | spacing | 外部彼此间的间距 |
| 10 | padding | 内边距（填充物）内容距离边框的距离 |
| 11 | row | 行 |
| 12 | col / column | 列 |
| 13 | term | 术语 |
| 14 | input | 输入 |
| 15 | select | 选择 |
| 16 | selected | 已选中 |
| 17 | area | 区域 |
| 18 | type | 类型 |
| 19 | submit | 提交 |
| 20 | reset | 重置 |
| 21 | name | 姓名、名称 |
| 22 | value | 值 |
| 23 | radio | 单选框 |
| 24 | checkbox | 多选框 |
| 25 | option | 选项 |