表格常用标签及属性

最新推荐文章于 2024-04-19 20:39:07 发布

九千七947

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量2.5k

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_60988128/article/details/129820476

版权

1. 表格常用标签及属性

1.1 表格标签基本使用

表格的主要作用是什么？

以行、列的方式（表格）整齐地展示数据，例如：股票价格
用表格布局页面

表格的基本语法：

<table>
  <tr>
    <td>单元格内容</td>
    ... //重复 td → 单元格
  </tr>
  ... //重复 tr → 行
</table>

常用的表格标签有几个？分别代表什么含义？

三个基本的表格标签：

序号	标签名	说明
1	`table`	表格标签，用于包含多个 `tr`
2	`tr`	定义表格中的行，用于包含多个 `td`
3	`td`	定义表格中的单元格，用于存放单元格内容

注意:

table 和 tr 是用来搭建表格结构的，不能存放实际内容；
td 是用来存放单元格数据的。

<table>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>女</td>
        </tr>
    </table>

1.2 表头单元格标签

表头标签的作用是什么？

第一行通常用来显示标题而不是实际的数据，这样可以方便用户阅读和理解下放表格数据的含义

标签是什么？

th同样可以存放内容，但是默认会被加粗并且居中显示。

<table>
        <th>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
        </th>
        <tr>
            <td></td>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
        </tr>
        <tr>
            <td></td>
            <td>3</td>
            <td>王五</td>
            <td>女</td>
        </tr>
    </table>

1.3 表格相关属性

表格属性应该写在哪一个标签中？为什么？

属性是用来描述标签的特征（显示效果）的，因此属性都应该写在 table 标签中

属性语法复习：

<table 属性1="值1" 属性2="值2"></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>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
            <td></td>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
        </tr>
            <td></td>
            <td>3</td>
            <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-14</td>
                <td>性别：</td>
                <td>小帅</td>
            </tr>
            <tr>
                <td>手机号：</td>
                <td>110</td>
                <td>微信号：</td>
                <td>119</td>
            </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 for="控件id">标签文字</label> 让 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">
        <!-- 必需的 action 属性规定当提交表单时，向何处发送表单数据。 -->
        <dl>
            <dt><h4>用户信息</h4></dt>
        </dl>
        用户名：<input type="text" value="请输入用户名" maxlength="6"><br>
        <!-- 输入 text 输入文字 -->
        密 &nbsp; 码：<input type="password" name="password" value="password"><br>
        <!-- 输入 password 密码 -->
        性别：男<input type="radio" name="sex" checked>女<input type="radio" name="sex">人妖：<input type="radio" name="sex"><br>
        <!-- 选择 radio 单选按钮，多选一 -->
        爱好：全部<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>
        <!-- 选择 checkbox 复选框（打勾） -->
        文件上传：<input type="file" name="file" id=""><br>
        <!-- 点击选择文件 file 文件上传使用 -->
        button按钮: <input type="button" value="获取短信验证码"><br>
        <!-- 点击 button 按钮 -->
        上传头像：<input type="image" value="images"><br>
        <input type="submit" value="提交">
        <!-- 表单操作 submit 提交，会把数据发送给服务器 -->
        <input type="reset" value="重置">
        <!-- 表单操作 reset 重置，会清空表单所有数据 -->
    </form>
</body>
</html>

5.4 select 下拉表单

下拉列表的应用场景是什么？

选项太多，希望节约空间，提升用户体验时可以使用下拉列表

下拉列表的基本语法：

    <select>
      <option>选项 1</option>
      <option>选项 2</option>
      <option>选项 3</option>
      ...
    </select>

下拉列表的标签有几个？分别代表什么含义？

三个下拉列表的标签：

序号标签名说明
1 select 下拉列表
2 option 下拉列表选项，用于存放选项内容
3 selected 属性能够默认选中某一项。
在 H5 中 selected=“selected” 可以简写为 selected。

序号	标签名	说明
1	`select`	下拉列表
2	`option`	下拉列表选项，用于存放选项内容
3	`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="">列表1</option>
        <!-- 下拉列表选项，用于存放选项内容 -->
        <option value="">列表2</option>
        <option value="">列表3</option>
        <option value="">列表4</option>
        <option value="">列表5</option>
        <option value="">列表6</option>
        <option value="" selected>列表7</option>
        <!-- 使用 selected 属性能够默认选中某一项。 -->
    </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	选项