Day21表单标签和CSS基础

表单标签和input标签
1.表单标签
这个标签是作为一个容器，来收集和提交这个标签中的其他相关标签的数据。一般不会单独使用。
action属性：设置提交路径（接口）
method：设置请求方式（post，get）
2.input标签
input标签可以单独使用，也可以和form配合使用
type属性：这个值不一样，input的功能就不一样
text，password
name：对输入的内容进行说明，提交数据的时候以name：value的形式进行提交，
name值会作为发送请求的参数名，value就是参数值
value：指向的就是文本框输入的内容
placeholder:提示信息
maxlength：输入的最大长度
3.单选：radio
name:同一类信息的name需要设置成一样的值，才能做到。选择其中一个让别的取消选中
checked:默认选中
4.复选：checkbox
5.下拉菜单：select>option
6.普通按钮：button
type:button
value：设置按钮上的文字
button标签
7.提交按钮
type:submit
8.重置标签
type：reset
可以将当前form标签中所有的标签的值设置为初始状态的值
<form action="" method="post">
用户名<input type="text" name="username" placeholder="姓名"/><br />
密码<input type="password" name="password" placeholder="密码"/><br />
电话<input type="text" name="tel" placeholder="电话"/><br />
<input type="radio" name='sex' value="boy" checked="true"/>男
<input type="radio" name="sex" value="girl" />女<br />
<input type="color" name="" id="" value="" />
<input type="submit" value="提交" />
</form>

下拉菜单和多行文本域
多行文本域:textarea
输入的内容可以显示多行
rows：设置一屏最多能显示的行数
cols:设置一行能显示最大的列数
<form action="" method="get">
<select name="ABC">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select name="">
<optgroup label="四川"></optgroup>
<option value="">成都</option>
<option value="">绵阳</option>
<optgroup label="云南"></optgroup>
<option value="">昆明</option>
<option>玉溪</option>
</select>
<input type="submit" name="" id="" value="提交" />

<textarea name="" rows="5" cols=""></textarea>

div和span
div和span标签都是无语意的标签，一般用来对网页中的标签进行分组和分块使用
一个div独占一行，多个span可以在一行
css基础
1.什么是css
css就是web标准中的表现标准，专门用来对网页标签进行布局和设置样式的一门语言
目前一般使用css3，css又叫样式表
2.css基本语法
结构：
选择器{属性：属性值；属性2：属性值2...}
说明：
选择器：用来选中/确定需要设置样式的标签
属性：必须是css提供的属性
属性值：根据属性赋不同的值。如果属性是数字，后面必须加单位。例如：px（像素）、em（空格）
css中的颜色值：颜色的英文单词，颜色对应的6位十六进制值，RGB(R，G，B)，rbga(r,g,b,alpha)
属性和属性值之间用冒号隔开。多个属性用分号隔开；属性的顺序除特殊情况外是任意的
3.在哪写css代码
内联样式：写在标签的style属性 --只对一个标签有效
内部样式：写在head的style标签中 -- 只对当前HTML文件有效
外部样式：写在外部的css问价中，通过link导入 -- 可以作用于所有的html
内联样式优先级最高，内部样式和外部样式谁后写，谁的优先级高
css选择器
选择器{属性1:属性值1...}
选择器 -- 选中需要添加样式的标签
常用的选择器：元素选择器，id选择器，class选择器，群组选择器，父子选择器，通配符
1.元素选择器：
将标签作为选择器
2.id选择器：
将id属性的值作为选择器
3.class选择器：
将class属性的值作为选择器
4.群组选择器：
多个选择器用逗号隔开，同时选中所有选择器对应的标签
5.父子选择器：
多个选择器用空格隔开作为一个选择器，按顺序依次往后找，找到最后一层选择器对应的标签
6.通配符：
将*作为选择器
伪类选择器
伪类选择器是选中某个标签的不同的状态。可以给不同状态设置不同的样式
1.link
标签:link{} - 选中的是初始状态(a标签中的网址一次都没有访问成功的状态)
例如：a:link{}; p:link{}; #a1:link{}
2.visited:访问后的状态
3.hover:鼠标悬停在标签是对应的状态
4.active:鼠标按住没有放开的效果
注意：使用伪类选择器的时候要遵守爱恨原则(LoVeHAte),如果不遵守可能会导致某些状态的样式无效
选择器的优先级：权重值越大，优先级越高
内联样式 > id > class > 元素选择器 = 伪类选择器
1000 0100 0010 0001 0001
群组选择器权重：单独看每个选择器的权重
父子选择器权重：所有的选择器权重之和

<style type="text/css">
    a{
        transition: all, 0.5s;
    }
    a:link{
        color: red;
    }
    a:visited{
        color: green;
    }
    a:hover{
        font-size: 20px;
    }
    a:active{
        color: deepskyblue;
    }
</style>