学习HTML的第二天

一、表单标签

form

是一个容器标签，本身单独没有意义，一般需要结合表单相关的标签(input、select、textarea)来使用
它可以对表单标签中所有用户信息收集相关的标签的内容进行整体的重置和提交.
action属性 - 后端数据接口的地址
method属性 - 请求方式（get、post）

二、input标签

input是表单相关标签，可以放在form标签中做数据的提交和重置

type属性 - 设置标签类型

test(默认值) - 普通的文本输入框

value属性 - 和输入框的内容是关联的
name属性 - 用来区分不同的数据和对数据进行提交的（因为提交数据是以name=value的形式提交的）
placeholder - 设置输入的提示信息
maxlenth - 设置最大字符个数
disabled属性 - 设置标签不可用

password - 密码输入框

value属性 - 和输入框的内容是关联的
name属性 - 用来区分不同的数据和对数据进行提交的（因为提交数据是以name=value的形式提交的）
placeholder - 设置输入的提示信息
maxlenth - 设置最大字符个数
disabled属性 - 设置标签不可用

radio - 单选按钮

value - 单选选中的时候被选的值
name - 提交和区分以外，还可以将相同name作为一个租，再同一个组中只能选一个选项
checked - 默认选中

checkbox - 复选按钮

value - 单选选中的时候被选的值
name - 提交和区分以外，还可以将相同name作为一个租，再同一个组中只能选一个选项
checked - 默认选中

button - 按钮

value - 按钮上显示的文字

submit - 提交按钮

将当前当前表单中所有设置了name属性的标签内容，以name=value的形式提交

reset - 重置

将当前表单中所有表单相关的标签状态变成初始状态

三、select和textarea

1.下拉列表：select-option

name属性 - 是select的属性，用于提交和区分
value属性 - 是option属性，表示当前选项的值和提交数据
selected属性 - 是option属性，设置默认选项
option标签内容 - 用来展示选项

2.多行文本域 - textarea

row属性 - 设置一次最多能显示的行数（默认2）
cols属性 - 设置一行的列数
placeholder属性 - 占位符
name属性 - 用于区分和提交
maxlength属性 - 限制最大输入字符的个数

注意：textarea在使用的时候代码要放在一行

四、div和span

div和span本身无语义，也是html中比较轻量级的标签

1.span

用于一行显示多个内容的时候

2.div

主要用于界面标签的分块和分组

五、css基础

1.什么是CSS

CSS（Cascading Style Sheets） - 层叠样式表
CSS是web标准中的表现标准，主要用来设置网页内容的样式和布局（给标签化妆）

2.css代码写在哪儿

内联样式表：将样式表（css代码）卸载标签的style属性中（只能作用于一个标签）
内部样式表：将样式表写在style标签中(样式只能作用于当前html中所有标签)
外部样式表：将样式表写在外部的css文件中，然后再html文件中用link导入（可作用于所有的html中的所有标签）
优先级：内联样式表>内部样式表、外部样式表 （谁后写谁优先级高）

3.CSS怎么写

语法：
选择器{
	属性名1：属性值1；
	属性名2：属性值2；
	属性名3：属性值3；
	...
}

说明：
选择器 - 用来选中当前需要设置样式的标签（写内联样式表选择器{}可以省略）
属性 - 以 属性名：属性值 的形式存在，多个属性之间必须用；隔开
	 a.常用属性：color(文字颜色)；background-color(背景颜色)；font-size(文字大小)
	 		  width(宽度)；height(设置高度)
	 b.常用的值:数字（数字如果是用来表示尺寸，那么值后面必须加单位：px）
	 		     颜色:颜色的英文单词，例如red,green,yellow,pink等
	 		     rgb值(通过调节红色、绿色和蓝色的值来调出不同的颜色，值的范围是0~255)
	 		     rgb(red,green,blue)
	 		     rgba(red,green,blue,透明度)
	 		     16进制颜色值：#6位的16进制数

六、选择器

选择器是用来选中指定标签来添加样式

常用的选择器

1.id选择器

在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签(注意：同一个id值在当前页面中只能是一个标签)
#p1{} - 选中id是p1的标签

2.类选择器：

在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。
.c1{} - 选中class时c1的标签
注意：同一个class可以作用于不同的标签，同一个标签可以拥有多个class值，又多个的时候，中间用空格隔开

3.元素选择器：

直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签

4.通配符：

将*作为选择器，选中当前页面中的所有的标签

5.群组选择器：

将多个其他的选择器用逗号隔开作为一个选择器选中每个独立的选择器

6.后代选择器：

将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有div后代的p标签（div内的p标签）

7.子代选择器：

将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签的子标签中的p标签

七、伪类选择器

1.什么时伪类选择器

普通选择器选中的是标签（选中一个标签的所有状态）
伪类选贼气选中的是标签的状态

2.语法：

选中标签的选择器：伪类选择器{}

3.常用的伪类选择器：

1）link - 连接未被成功访问对应的状态（只针对超链接有效）
2) visited - 链接已经被成功访问对应的状态（只针对超链接）
3）hover - 鼠标悬停的状态（针对所有可见标签）
4）active - 鼠标按住标签不放对应的状态