HTML 第 02 天
表格常用标签及属性
表格的主要作用:以行、列的方式(表格)整齐地展示数据
表格的基本语法:
基本的表格标签
- 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
- 在列表项前面自动增加数字排序,并且排序依次递增
-
- 列表项内容
- 列表项内容
- 列表项内容
- ...
自定义列表: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 下拉列表选项,用于存放选项内容
-
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