前端基础（六）-------表单表格与选择器高级

最新推荐文章于 2023-10-19 15:17:55 发布

零度℃192

最新推荐文章于 2023-10-19 15:17:55 发布

阅读量252

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_70761095/article/details/128501230

版权

1.表单

表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

属性名	取值
action	设置数据的提交地址
method	设置数据的提交方式，默认为get方式，可以设置为post

<form action="" method="">
    <!--此处为表单控件--> 
</form>

控件/标签	描述
`<input>`	定义输入框，用于输入单行文字。通过type属性值的不同，展示不同效果
`<textarea>`	定义文本域（一个可以输入多行文本的控件）
`<label>`	为表单中的各个控件定义标题
`<select>`	定义下拉列表
`<option>`	定义下拉列表中的选项
`<button>`	定义一个可以点击的按钮

和Excel中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML表格不支持排序、求和、方差等数学计算，HTML中表格主要用于显示数据、展示数据。可以要数据显示的非常规整

标签名	说明
caption	表格整体大标题
th	表头单元格

合并单元格：将水平或垂直多个单元格合并成一个单元格

当你希望元素在特定的状态下发生样式的变化时，可以使用伪类选择器。

状态类

:hover :active 不仅仅能用在a标签上。

:hover最为常用最为重要。

可以进一步在伪类后进行选择，比如：#wrap:hover .nav{display:none;}

写法	介绍	举例
:focus	获得焦点状态	input:focus{border:1px solid blue;}
:checked	（单选/多选）表单被勾选状态	input:checked{background-color:#aaa;}

结构类

写法	介绍	举例
E:nth-child(n)	E元素父级的第n个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:nth-child(2){color:red;}
E:nth-of-type(n)	E元素父级的第n个E元素，无视其他元素	p:nth-of-type(2){color:red;}
E:first-child	E元素父级的第一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:first-child{color:red;}
E:last-child	E元素父级的最后一个子元素（该子元素需要满足E的选择规则，不满足则不会选中任何元素）	p:last-child{color:red;}

伪类选择器相当于在某种情况下添加一个虚拟类名，而伪元素选择器则是相当于创建了一个虚拟元素。

写法	介绍	举例
E::before	相当于在E元素的最前面添加一个额外的子元素	#wrap::before{content:"Hello World!"}
E::after	相当于在E元素的最后面添加一个额外的子元素	#wrap::after{content:"Hello World!"}

必须拥有 content 样式，上述两个伪元素才会生效。

创建的子元素是一个行内元素。

::after常用来清除浮动。

content 除了写文字之外，还可以用url指定一张图片等其他写法。