一、表单标签
form标签
表单标签是用来收集用户信息的，是一个容器，用来获取这个标签中相应的其他标签（input标签）的数据
可以将收集到的数据，通过method对应的方式，去发送请求（发送给action对应的接口）
input标签
单标签
a.type属性:决定input标签的样式
text(默认)：文本输入框
password:密码输入框
radio：单选按钮
注意：input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能
b.name属性：区分不同的input对应值
c.value属性:input标签中的值
a.文本输入框：（text）
1.name属性：区分不同的input对应值，对标签的显示没有影响
2.value属性：input标签中的值，相当于内容（文本输入框中输入的内容就是value的值）
提交input中的数据给服务器的时候，是以name值=value值来提交的
3.placeholder属性：占位符（输入框的提示信息）
b.密码输入框：(password)
注意：value是输入框中注入的内容
maxlength属性：限制输入的最大的长度
c.单选按钮：（radio）
注意：
1.value值：按钮是否选中
2.name值：如果多个按钮只能选中一个，那么这些按钮对应的name值必须一致checked属性：设置默认选中
3.一组（name值一样）单选按钮在提交的时候只提交被选中的按钮的name值和value值
<input type="radio" name="sex" value="boy" checked="checked"/> <span>男</span>
<input type="radio" name="sex" value="girl" /> <span>女</span>
<input type="radio" name="marry" value="已婚" checked="" /><span>已婚</span>
<input type="radio" name="marry" value="未婚" /><span>未婚</span>
d.复选按钮：（）
注意:
1.name值：同一组的数据对应name值一样
<input type="checkbox" name="hobby" id="" value="basketball" checked="checked" /><span>篮球</span>
<input type="checkbox" name="hobby" id="" value="乒乓球" checked="checked"/><span>乒乓球</span>
<input type="checkbox" name="hobby" id="" value="羽毛球" /><span>羽毛球</span>
<input type="checkbox" name="hobby" id="" value="排球" /><span>排球</span>
** e.普通按钮：（button）**
value值：按钮上显示的内容
f.提交按钮：（submit）
自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action对应的接口
g.重置按钮
将当前form标签中的input标签的值回到初始状态
二、下拉,多行文本,按钮
1、下拉和多行文本域可以放在form标签中用于收集信息
1.下拉菜单:select标签
一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
a.selecvted属性：设置默认被选中的选项
<select name="city">
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="云南">云南</option>
</select>
2.对下拉菜单进行分组
可以通过optgroupb标签对下拉菜单进行分组，通过lable属性对分组进行命名
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="绵阳">绵阳</option>
<option value="内江">内江</option>
<option value="达州">达州</option>
<optgroup label="浙江省">
<option value="金华">金华</option>
<option value="义乌">义乌</option>
<option value="台州">台州</option>
<option value="西湖">西湖</option>
</optgroup>
</select>
3.多行文本域：textarea标签
name：提交的数据对应的名字
rows:默认一屏的行数
cols:默认的列数
placeholder：设置占位符
disabled:禁用
maxlength:约束能输入的最大的字符个数
三、div和span
1.div和span
div标签和span标签是空白标签，没有语义
一般用来做分组（将网页分块）
div块级标签（一行只能放一个标签）
span:行内标签（一行可以放多个标签）
2.块级标签和行内标签
块级标签：一个标签占一行
h1-h6,p,列表标签（ul,ol,dl）,table,hr等
行内标签：一行可以放多个行内标签
img,a,input,select,textarea等
四、CSS基础
CSS是web标准中的表现标准，用来规定网页上内容地布局和样式（CSS又叫样式表）
目前广泛使用的是CSS3
1.怎么来写样式表（CSS），写在哪？
a.内联样式表
将样式写在标签的style属性中（每个可见标签都有style属性）
b.内部样式表
将样式表写在head标签中的style标签里
c.外部样式表
将样式表写在CSS文件中，然后再head标签中通过link标签来导入
注意：不管在什么情况下，内联样式表的优先级最高,内部和外部的优先级看谁后写，谁地优先级高
2.固定语法
选择器{属性1：属性值1；属性2：属性值2....}
a.选择器的作用是用来确定后面地样式到底是给哪个/哪几个标签写的
b.属性：属性是CSS中本来就支持和拥有的属性，属性地顺序可以随意写
属性和属性值之间使用冒号连接
属性后面必须写分号
c.属性值：
（1）数值：如果数值是用来表示大小，后面必须跟单位px或者%
px--像素 %--百分比（前提是父标签对应的宽度或者高度确定的）
（2）颜色：颜色对应的英语单词，
1.#加RGB对应的16进制值（一个颜色值对应2位16进制），
2.直接使用RGB值:rgb(R,G,B),rgba(R,G,B,A)Alpha透明度 R,G,B值0-255，Alpha值0-1
3.常见的属性
color：设置字体的颜色
background—color：背景颜色
width：宽度
height：高度
font-size：字体大小
五、选择器
一.选择器
常用地选择器
1.标签（元素）选择器：直接将标签名作为选择器，同时选中网页中所有同类型地标签
a{}--选中所有的a标签
2.id选择器：通过在id属性值前加#，就构成了id选择器，选中id等于对应的值的标签
id属性：所有地标签都有id属性，（并且设置地值必须唯一？？？）
( #p1{}--选中id值是p1的标签)
3.class选择器：通过在class属性值前加.(点)，就构成了类选择器，选中class等于对应的值的标签
.c1{}--选中所有class值是c1的标签
4.群组选择器：多个选择器中间使用逗号隔开。选中所有的单独的选择器
a,p,#p1,.c1{}--选中所有的a标签，p标签和所有id值是p1以及所有class值是c1的标签
5.包含选择器：多个选择器之间使用空格隔开。从前往后，找到最后一个选择器
div .c1 p{}---选中div中class是c1的标签中的p标签
6.通配符*:直接将作为选择器，选中当前页面中所有的标签
二.选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高就谁有效。
看谁地优先级高，就看谁地权重值大
权重值是一样地情况下，谁后写，谁的优先级高
伪类选择器：0001
元素选择器：0001
class选择器：0010
id选择器：0100
群组选择器：直接看单独每一个地权重
包含选择器：多个选择器的权重和
通配符：0001
注意：不管选择器地权重有多高，内联样式的优先级都是最高的
六伪类选择器
前面的元素选择器，id选择器，class选择器选中的都是标签。
伪类选择器是选中标签的某个状态
伪类选择器：选中某个标签的不同状态（一般用于超链接和按钮等）
1.语法：----标签：状态
标签：状态{}
说明：
a.状态：
link:初始状态（a标签对应地初始标签没有访问成功过对应地状态）
visited：访问后的状态（适用a标签）
hower:鼠标悬停在标签上对应的状态
active:被激活对应的状态（一般用于超链接）--鼠标按下对应的状态
focus:成为焦点
b.标签：可以是通过不同地选择器去选中
2.爱恨原则：LoVeHAte--先爱后恨
如果想要给一个标签同时给link\visited\active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则
（如果不按照爱恨原则，可能会出问题，如果按照爱恨原则肯定不会出问题）
<style type="text/css">
a:link{
color: greenyellow;
}
a:visited{
color: green;
}
#a1:hover{
color: red;
font-size: 60px;
}
a:active{
color: blue;
}
p:hover{
color: brown;
}
input:focus{
outline: none;
}
</style>
