HTML 第 02 天

HTML 第 02 天

表格常用标签及属性

表格的主要作用：以行、列的方式（表格）整齐地展示数据

表格的基本语法：

单元格内容 ... 重复 td → 单元格 ... 重复 tr → 行

基本的表格标签

• table 表格标签，用于包含多个 tr
• tr 定义表格中的行，用于包含多个 td
• td 定义表格中的单元格，用于存放单元格内容

表头单元格标签

• 表头单元格的标签是th
• 存放第一行，显示标题，自己加粗居中

表格相关属性

• align left、center、right 对齐方式
• border 宽度像素值或 “” 表格边框，默认 “” 无边框
• width 像素值 宽度
• height 像素值 高度
• cellspacing 像素值 单元格之间的间距，默认 2 像素
• cellpadding 像素值 内容与边框之间的距离，默认 1 像素

表格结构标签

• thead 定义表格头部（标题行），必须拥有 tr 标签，一般位于第一行
• tbody 定义表格的主体，通常包含标题行下方的表格数据区域。

合并单元格

• 跨行合并（rowspan）
• 跨列合并（colspan）
• 合并单元格的步骤：明确合并方式（跨行 / 跨列）；
  找到目标单元格 td 增加合并单元格属性；
  跨行 rowspan=“x”（纵向）；
  跨列 colspan=“y”（横向）；
  删除多余的单元格。

三种列表

无序列表：ul

• ul只允许包含多个 li 标签
• li 用于存放列表项内容
• • 列表项内容
  • 列表项内容
  • 列表项内容
  • ...

有序列表：ol

• 在列表项前面自动增加数字排序，并且排序依次递增
• 1. 列表项内容
  2. 列表项内容
  3. 列表项内容
  4. ...

自定义列表：dl

• dl 自定义列表，只允许包含 dt 和 dd 标签

  • dt 用于存放关键词（term）的内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt
  • dd 用于存放前面 dt 关键词对应的列表项内容

• ...

  ...

表单

应用场景：收集用户信息，统一提交给后台

表单控件（表单元素）

• 类型

  • input 输入

    • type 属性

      • 是 input 标签的必须属性，用来指定 input 控价的类型
      • 输入 text 输入文字
        输入 password 密码
        选择 radio 单选按钮，多选一
        选择 checkbox 复选框（打勾）
        点击选择文件 file 文件上传使用
        点击 button 按钮
        点击 image 按钮
        表单操作 submit 提交，会把数据发送给服务器
        表单操作 reset 重置，会清空表单所有数据

    • 单标签

  • select 选择

  • textarea 文本域

• 作用：通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的

• 文本框和密码框

• 提交和重置按钮

  • 提交按钮（sumbit) 可以把表单域中的数据提交给后台
  • 重置按钮（reset) 可以把表单域中的数据清空

• 单选按钮和复选框

  • 在多选一的时候，使用单选框（radio），例如：性别；
  • 在多选多的时候，使用复选框（checkbox)，例如：爱好；

• 普通按钮和文件域

  • 文件域：
  • 普通按钮：

• select 下拉表单

  • 应用场景：选项太多，希望节约空间
  • select 下拉列表
  • option 下拉列表选项，用于存放选项内容

选项 1 选项 2 选项 3 ...

• textarea 文本域标签

  • 应用场景：需要输入大量文字并且需要换行时，可以使用文本域，例如：个人简介、留言板、评论。

• name属性

  • 可以把表单控件区分开

• value属性

  • 记录用户在控件中输入的值或者选择结果

• checked属性

  • 用 checked 属性可以帮助用户默认同意用户协议
  • 如果用户要修改之前保存过的信息，checked 属性可以选中用户之前的选择，例如：修改个人信息；
  • 在 H5 中 checked=“checked” 可以简写为 checked

• maxlength 属性

  • 某写输入项有长度限制时，可以使用 maxlength 属性

• label 标签

  • 作用：和表单中的元素绑定，增加点击范围，提高用户体验。
  • 使用步骤：1.给要绑定的 input 标签设置唯一的 id 属性值；2.使用 标签文字 让 label 标签与对应控件绑定。
  • ①密　码： ②密码
  • label 标签和 input 标签是父子关系,通过 label 标签的 for 属性和对应 id 的 input 标签建立联系

表单域

• 作用：实现用户信息的收集与传递，例如收集用户的完整信息，然后统一传递给后台。
• 标签：form
• ... 表单控件 ... 提示信息

- 属性

- action：	URL 地址	用于指定接收并处理表单数据的服务器程序的 URL 地址。
- method：	GET / POST	用于设置表单数据的提交方式，取值为 GET、POST 等。
- name：	名称	用于指定表单名称，用以区分同一个页面中的多个表单域。

提示信息

表格，列表及表单

XMind - Trial Version