表单表格与选择器高级

当您想要通过网页来收集一些用户的信息（例如用户名、电话、邮箱地址等）时，就需要用到 HTML 表单。表单可以接收用户输入的信息，然后将其发送到后端应用程序，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。

表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

在 HTML 中创建表单需要用到<form>标签，具体语法如下所示：

<form action="URL" method="GET|POST">
    表单控件
</form>

action 属性用来指明将表单提交到哪个页面；
method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：
- GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET 提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。
- POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

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

<label for="country">国家：</label>
<select id="country" name="country">
  <option value="usa">美国</option>
  <option value="china">中国</option>
</select>

使用 <table>标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

很早以前，前端页面很多都是使用table来布局的，但是随着前端技术的发展内容的丰富，table的弊端体现的越来越明显，比如太规整了不符合现今网页的布局多样化，维护成本太大等等。所以目前来讲，使用table的情况比较少。

一般我们在使用表格时，需要用到的标签并不多，table、tr、th、td；

给table加上CSS样式border-collapse:collapse;以使相邻单元格的边框合并，border-spacing边框线间距如果设置了边框合并border-spacing就会失效

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

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

写法	介绍	举例
:hover	鼠标悬停	a:hover{color:pink;}
:active	被点击按下状态	a:active{color:green;}

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

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

根据元素在HTML中的结构关系查找元素。常用于查找某父级选择器中的子元素

写法	介绍	举例
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;}

选择器 n 所表示的可以是一个数字或者奇数odd 或者偶数even 或者一个表达式

#wrap p:nth-child(2){
    color:red;
}

#wrap p:nth-child(odd){
    color:red;
}

#wrap p:nth-child(even){
    color:red;
}

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

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

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

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

::after常用来清除浮动。

/* 父元素利用伪类after清除浮动 */
.clear::after{
    content: ""; 
    display: block; 
    clear:both;
}

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

标签：控件,单元格,表格,color,元素,表单,选择器
From： https://blog.csdn.net/2302_79986066/article/details/143728465