前端学习:列表元素+表格元素+表单元素
2022/7/23 23:28:21
本文主要是介绍前端学习:列表元素+表格元素+表单元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
列表元素
认识列表元素
在开发一个网页的过程中, 很多数据都是以列表的形式存在的
列表的实现方式
事实上现在很多的列表功能采用了不同的方案来实现:
方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
方案二: 使用列表元素, 使用元素语义化的方式实现;
事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:
原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;
HTML提供了3组常用的用来展示列表的元素
有序列表:ol、li(list-style:none 去除浏览器定义样式)
无序列表:ul、li(list-style:none 去除浏览器定义样式)
定义列表:dl、dt、dd
有序列表 – ol – li
◼ ol(ordered list)
有序列表,直接子元素只能是li
◼ li(list item)
列表中的每一项
无序列表 – ul - li
◼ ul(unordered list)
无序列表,直接子元素只能是li
◼ li(list item)
列表中的每一项
定义列表 – dl – dt - dd
◼ dl(definition list)
定义列表,直接子元素只能是dt、dd
◼ dt(definition term)
term是项的意思, 列表中每一项的项目名
◼ dd(definition description)
列表中每一项的具体描述,是对 dt 的描述、解释、补充
一个dt后面一般紧跟着1个或者多个dd
表格元素
认识表格元素
在网页中, 对于某些内容的展示使用表格元素更为合适和方便
表格常见的元素
编写表格最常见的是下面的元素:
◼ table
表格
◼ tr(table row)
表格中的行
◼ td(table data)(注意td没有margin属性 但是又padding属性)
行中的单元格
非常重要的一个属性
border-collapse CSS 属性是用来决定表格的边框是分开的还是合并只能用在table里。
table { border-collapse: collapse; }
合并单元格的边框
单元格合并
在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的
一个单元格可能会跨多行或者多列来使用;
比如下面的表格
这个时候我们就要使用单元格合并来完成;
如何使用单元格合并呢?
单元格合并分成两种情况:
跨列合并: 使用colspan
✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
跨行合并: 使用rowspan
✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;
表单元素
HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单:
常见的表单元素
◼ form
表单, 一般情况下,其他表单相关元素都是它的后代元素
◼ input
单行文本输入框、单选框、复选框、按钮等元素
◼ textarea
多行文本框
◼ select、option
下拉选择框
◼ button
按钮
◼ label (for 属性和包裹元素的对应id保持一致,作用是通过点击label文字 就可以切换到包裹的元素)
表单元素的标题
input元素的使用
◼ 表单元素使用最多的是input元素
◼ input元素有如下常见的属性:
◼ type:input的类型
text:文本输入框(明文输入)
password:文本输入框(密文输入)
radio:单选框
checkbox:复选框
button:按钮
reset:重置
submit:提交表单数据给服务器
file:文件上传
布尔属性(写上属性名就代表使用这个属性)
◼ readonly:只读
◼ disabled:禁用
◼ checked:默认被选中
只有当type为radio或checkbox时可用
◼ autofocus:当页面加载时,自动聚焦
◼ name:名字
在提交数据给服务器时,可用于区分数据类型--也就是传的url里对应的key
◼ value:取值--也就是传的url里对应的value
表单按钮
表单可以实现按钮效果:
普通按钮(type=button):使用value属性设置按钮文字
重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)
提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select
我们也可以通过按钮来实现:
input和label的关系
label元素一般跟input配合使用,用来表示input的标题
labe可以跟某个input绑定,点击label就可以激活对应的input变成选中
radio的使用
我们可以将type类型设置为radio变成单选框(name值相同的radio才具备单选功能)
checkbox的使用
我们可以将type类型设置为checkbox变成多选框(属于同一种类型的checkbox,name值要保持一致):
select和option的使用
option是select的子元素,一个option代表一个选项
option常用属性
selected:默认被选中
form常见的属性
form通常作为表单元素的父元素:
form可以将整个表单作为一个整体来进行操作;
比如对整个表单进行重置;
比如对整个表单的数据进行提交;
form常见的属性如下:
action
用于提交表单数据的请求URL
method
请求方法(get和post),默认是get
target
在什么地方打开URL(参考a元素的target)
这篇关于前端学习:列表元素+表格元素+表单元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21动态面包屑教程:新手入门指南
- 2024-12-21动态主题处理教程:新手必读指南
- 2024-12-21富文本编辑器教程:新手入门指南
- 2024-12-21前端项目部署教程:从零开始的全面指南
- 2024-12-21拖拽表格教程:轻松入门指南
- 2024-12-21Element-Plus教程:新手入门与实战指南
- 2024-12-21TagsView标签栏导航教程:轻松掌握标签栏导航
- 2024-12-21动态表格实战:新手入门教程
- 2024-12-21动态菜单项实战:一步步教你实现动态菜单项
- 2024-12-21动态面包屑实战:新手教程