当前位置:   article > 正文

表格常用标签及属性(表格标签基本使用,表格结构和常用列表,自定义列表和表单,表单输入,表单输入)_列表中需用的标签和属性有哪些

列表中需用的标签和属性有哪些

1. 表格常用标签及属性

1.1 表格标签基本使用

表格的主要作用是什么?
  • 行、列的方式(表格)整齐地展示数据,例如:股票价格
  • 用表格布局页面
表格的基本语法:
<table>
  <tr>
    <td>单元格内容</td>
    ... //重复 td → 单元格
  </tr>
  ... //重复 tr → 行
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
常用的表格标签有几个?分别代表什么含义?

三个基本的表格标签:

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

注意:

  • 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
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

1.3 表格相关属性

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

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

属性语法复习:

<table 属性1="值1" 属性2="值2"></table>
  • 1

注意:

  • 属性名不需要引号
  • 属性值必须要用引号,通常使用双引号
  • 属性="值" 这种定义方式又被称为键值对 —— 属性名:键 / 属性值:值 / 成对出现
  • 每一个键值对之间使用空格分隔
    表格的常用属性:
属性名属性值描述
alignleftcenterright对齐方式
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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

2. 表格结构和常用列表

2.1 表格结构标签

语义而言,表格可以被划分成哪两个区域?分别对应什么标签?

语义而言,表格可以被划分成以下两个区域:

  • thead 定义表格头部(标题行),必须拥有 tr 标签,一般位于第一行
  • tbody 定义表格的主体,通常包含标题行下方的表格数据区域
    注意:theadtbody 只是用来划分表格结构的,区分标题行和数据区域,不能替代原有的 trthtd 标签的作用。

2.2 合并单元格

合并单元格有那两种方式?

合并单元格的方式:

  • 合并(rowspan),把多个行的单元格合并 → 纵向合并
  • 合并(colspan),把多个列的单元格合并 → 横向合并
合并单元格的步骤是什么?
  1. 明确合并方式(跨行 / 跨列)
  2. 找到目标单元格 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  1. 删除多余的单元格

2.3 无序列表

列表的主要是用来做什么的?

列表就是用来布局的,可以整齐、有序的展示数据,用列表做布局会更加自由和方便;

我们一共要学习几种列表?
  • 无序列表(ul
  • 有序列表(ol
  • 自定义列表(dl
无序列表一共有几个标签?分别是什么,作用是什么?有什么注意事项?

无序列表的的基本语法:

   <ul>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
      ...
   </ul>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

两个无序列表标签:

  • ul无序列表,只允许包含多个 li 标签
  • li用于存放列表项内容
    注意:
  • ul 是用来搭建结构的,不能存放实际内容;
  • ul 只允许包含多个 li 标签;
  • li 是用来存放列表项数据的

2.4 有序列表

有序列表和无序列表有什么区别?

有序列表 ol 会在列表项前面自动增加数字排序,并且排序依次递增;

有序列表的的基本语法与无序列表基本一直,只需要把 ul 替换成 ol 即可:

    <ol>
      <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
      ...
    </ol>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
有序列表除了序号之外,与无序列表的使用及注意事项有区别吗?

有序列表除了序号之外,与无序列表的使用及注意事项没有区别。

3. 自定义列表和表单

3.1 自定义列表

自定义列表的应用场景是什么?

网站首页下方的网站导航通常可以使用自定义列表来实现
自定义列表的基本语法:

<dl>
  <dt></dt>
  <dd>
    ...
  </dd>

  <dt></dt>
  <dd>
    ...
  </dd>
</dl>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

注意:虽然一个 dl 中可以包含多个 dt,但是在实际开发中通常只包含一个 dt,因为这样更方便布局

自定义列表的标签有几个?分别代表什么含义?

三个自定义列表标签:

序号标签名说明
1dl自定义列表,只允许包含 dtdd 标签
2dt用于存放关键词(term)内容,与 dd 是兄弟关系,不过后续的 dd 都跟随前面的 dt
3dd用于存放前面 dt 关键词的列表项内容

3.3 表单使用场景以及分类

表单的应用场景是什么?

在开发网站时,可以使用表单收集用户信息,统一提交给后台处理;

表单由那几部分组成?

表单通常包含 3 个部分:

  1. 表单域:整个表单区域,统一汇总要收集的数据,统一提交给后台,例如包含姓名、性别等完整的用户信息记录;
  2. 表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,例如姓名;
  3. 提示信息:提示用户每一个表单控件是收集什么信息的。

3.4 表单域

表单域的作用是什么?
  • 实现用户信息的收集与传递,例如收集用户的完整信息,然后统一传递给后台;
  • 表单的基本语法:
    <form>
      ... 表单控件 ... 提示信息
    </form>
  • 1
  • 2
  • 3

3.5 input 之 type 属性文本框和密码框

表单控件的作用是什么?

用户通过表单控件能够输入或者选择内容,以达到通过表单收集信息的目的。

表单控件可以分为几大类?

表单控件包含以下三大类:

  1. input 输入
  2. select 选择
  3. textarea 文本域

input 标签的基本语法:

  <input type="属性值" />
  • 1

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 标签的使用步骤是什么?

步骤:

  1. 给要绑定的 input 标签设置唯一id 属性值;
  2. 使用 <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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

5.4 select 下拉表单

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

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

下拉列表的基本语法:

    <select>
      <option>选项 1</option>
      <option>选项 2</option>
      <option>选项 3</option>
      ...
    </select>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
下拉列表的标签有几个?分别代表什么含义?
  • 三个下拉列表的标签:

    序号标签名说明
    1select下拉列表
    2option下拉列表选项,用于存放选项内容
    3selected属性能够默认选中某一项。

    在 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="">列表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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

附录

1. 标签

表格标签

序号标签名说明
1table表格标签,用于包含多个 tr
2tr定义表格中的行,用于包含多个 td
3td定义表格中的单元格,用于存放单元格内容
4th定义表头中的单元格,用于存放单元格内容,默认会加粗并居中显示
5thead定义表格头部(标题行),必须拥有 tr 标签
6tbody定义表格的主体,通常包含标题行下方的表格数据区域

列表标签

序号标签名说明
1ul无序列表,只允许包含多个 li 标签
2ol有序列表,只允许包含多个 li 标签
3li用于存放列表项内容
4dl自定义列表,只允许包含 dtdd 标签
5dt用于存放关键词内容,与 dd 是兄弟关系,不过后续的 dd 都跟随前面的 dt
6dd用于存放前面 dt 关键词的列表项内容

表单标签

序号标签名说明
1form定义表单域,统一收集传递数据
2input输入控件,可以是文本框、单选、复选、选择文件、按钮等
3select下拉列表
4option下拉列表选项,用于存放选项内容

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
  • 2
  • 3

重点单词

序号英语中文
1table表格
2row
3data数据
4align对齐
5left
6center
7right
8cell单元格
9spacing外部彼此间的间距
10padding内边距(填充物)内容距离边框的距离
11row
12col / column
13term术语
14input输入
15select选择
16selected已选中
17area区域
18type类型
19submit提交
20reset重置
21name姓名、名称
22value
23radio单选框
24checkbox多选框
25option选项
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号