表单标签和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>