表格标签
表格的主要作用
表格主要用于显示、展示数据,可以让数据的显示非常的规整。
表格的基本语法
表格框架:
……
……
其中,
是行标签,是单元格标签,再加上表头单元格标签。
表格属性属性名属性值描述alignleft,center,right表格元素的对齐方式
border1 或 ""表格边框有无,默认为 "" ,表示没有边框
cellpadding像素值规定单元格之间的空白,默认为 1px
cellspacing像素值规定单元格之间的空白,默认为 2px
width像素值 或 百分比规定表格的宽度
表格结构标签
使用场景:表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部 和 表格主体 两大部分。
在表格标签中,分别使用 标签表示表格的头部区域,
表示表格的主体区域,这样可以更好的分清表格结构。
合并单元格
合并单元格的方式:跨行合并:rowspan = "合并单元格的个数"。
跨列合并:colspan = "合并单元格的个数"。
目标单元格:
跨行:最上测单元格为目标单元格,写合并代码。
跨列:最左侧单元格为目标单元格,写合并代码。
列表标签
表格是用来显示数据的,列表是用来布局的。
列表最大的特点就是整齐、整洁、有序,用列表布局会更加自由和方便。
根据使用场景的不同,列表可以分为三大类:无序列表、有序列表、自定义列表。
无序列表
无序列表的基本结构:
……
注意:无序列表各个列表项之间没有顺序级别之分,是并列的。
,在 之间是一个容器,可以容纳任何元素。
有序列表
有序列表的基本结构:
- 列表1
- 列表2
- 列表3
……
注意:
中只能嵌套 ,在 中输入其他标签或文字的做法是不被允许的。 之间是一个容器,可以容纳任何元素。
有序列表带有自己的样式属性,实际使用时可以使用 CSS 设置。
自定义列表
在 HTML 标签中,
(定义项目/名字)和
-
(描述每一个项目/名字)一起使用。
自定义列表的基本结构:
名词1
-
名词1解释1
-
名词2解释2
注意:
中只能包含 或
和 个数没有限制,通常是一个 对应多个。
表单标签
使用表单的目的是为了收集用户信息
在 HTML 中,一个完整的表单通常由 表单域、表单控件(表单元素)、提示信息 三个部分组成。
表单域
表单域 是一个包含表单元素的区域。
在 HTML 中,
用于定义表单域。
表单域的基本结构:
各类表单控件
表单元素
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
输入表单元素
在 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(如文本、复选框、掩码后的文本控件、单选框、按钮等)。
举例:
其中 type 属性的属性值及其描述如下:属性值描述button定义可点击按钮
checkbox定义复选框
file定义输入字段和“浏览”按钮,供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符被掩码(******)
radio定义单选按钮
reset定义重置按钮
submit定义提交按钮
text定义单行的输入字段,默认宽度为 20 个字符
除以上部份外,标签还可以包括以下的属性:属性属性值描述name自定义定义 input 元素名称
value自定义规定 input 元素的值
checkedchecked规定此 input 元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符最大长度
注意:name 是表单元素的名字,其中 单选按钮 和 复选按钮 必须有相同的 value 值。
checked 主要针对 单选框 和 复选框,用于默认选择。
定义标签
标签为 input 元素定义标注。
标签用于绑定一个表单元素,当点击 标签内的文本时,会自动聚焦到对应的表单元素上,增强用户体验。
语法规范:男
注意:是 不是 (重要)。
下拉表单元素
下拉列表,不多解释。
语法规范:
选项1
选项2
选项3
……
注意: 中至少包含一对 。
在 中定义 select = "selected" 时,可以设置当前项为默认项。
文本域元素
多行文本输入,不多解释。
语法规范:
默认文本内容
注意:row 显示几行,cols 每行显示多少字(一般来说,使用 CSS 来实现)。
本文由 小但 创作
全文共:3263个字
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载,均为作者原创,转载前请务必署名
最后编辑时间为: Jul 4, 2020 at 10:20 pm