一、HTML部分

1.表单标签 form标签

表单标签是用来收集用户信息的，是一个容器，用来获取这个标签中相应的其他标签(input标签)的数据
可以将收集到的数据，通过method对应的方式去发送请求（发送给action对应的接口）

<form action='' method=''>

    <input type='submit' name='' id='' value='提交'>
</form>

2.input标签

单标签
a.type属性:决定input标签的样式
-text(默认值):对应的是文本框
-password:密码输入框
-file:文件域，文件选择器
-radio:单选按钮，1、单选按钮中的value值设置为这个按钮选择后提交对应的值
2、多个单选按钮只能选中一个，那么这些按钮对应的
name值必须一致
3、一组（name值一样）单选按钮提交的时候只提交被选中的按钮的name值和value值
4、按钮要默认选择的时候设置checked='checked'
checked属性设置默认选中
-checkbox:复选按钮
1.同一组对应的name值一样
2.value值是选中后对应的值
-button:普通按钮，value值是按钮上显示的内容
-submit:提交按钮，自动将当前form标签中设置了name属性的input标签对应的值
通过method对应的方式提交给action对应的接口，放在form标签里面有效
-reset:重置按钮，将当前form标签里面input标签的值设置为初始状态，放在form标签里面有效
b.name属性:区分不同的input对应的值
c.value属性:input标签中的值，相当于内容
d.placeholder属性:(占位符)input作为文本输入框的属性，输入框中的提示信息
e.maxlength属性:约束输入框能输入的字符的最大个数
提交input中的数据给服务器的时候，是以name值=value值来提交的

        <form>
            <span>账号:</span>
            <input type='text' name='num' />
            <span>手机号:</span>
            <input type='text' name='phonenum' />
            <input type="submit" value='提交' />
        </form>

注意:input标签放在form外边同样可以使用，只是不能直接使用重置和提交功能

3.下拉菜单和多行文本域

a.select标签，option标签
一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举

            <select name='address'>
                <optgroup label="四川省">
                    <option value='cd'>成都市</option>
                    <option value='nj'>内江市</option>
                    <option value='zy'>资阳市</option>
                    <option value='zg'>自贡市</option>
                </optgroup>
                <optgroup label="山西省">
                    <option value="ty">太原市</option>
                    <option value='yc'>运城市</option>
                    <option value='dt'>大同市</option>
                </optgroup>
            </select>

select分组，optgroup实现分组，通过selected属性设置默认被选中状态,默认情况下是第一个被选中

4.按钮，button标签

<button>注册</button>

5.div标签和span标签

div标签和span标签是空白标签，没有语义。一般用来做分组（将网页分块）
div默认会换行，span是在一行显示多个
div:块级标签（一行只能放一个标签）

6.块级标签和行内标签

块级标签：一个标签占一行
h1~h6,p,ul,ol,li,dl,dd,table,tr,hr等
行内标签：一行可以放多个行内标签
a,img,input,select,button,textarea等

二、CSS部分

CSS是web标准中的表现标准，用来规定网页上内容的样式（CSS又叫样式表）
目前广泛使用的是CSS3

1.怎么来写样式表（CSS）,写在哪儿？

a.内联样式表:整个网页只有这个标签有这个样式用内联样式
将样式写在标签的style属性中(每个标签都有style属性),内部中不需要使用选择器

<p style="background-color:red;">样式表</p>
<p style=""></p>
b.内部样式表:将样式表写在head标签中的style标签中
<style type='text/css'>
    选择器{
        属性1:属性值1;
        属性2:属性值2;
    }
</style>

c.外部样式表
将样式表写在css文件中，然后再head中通过link标签导入

<link rel="stylesheet" type="text/css" href='./css/css_basic.css' />

注意三种样式的优先级:
不管是什么情况下，内联的样式表的优先级更高，内部和外联样式的优先级没有确切的，谁后写谁更高

2.固定语法

选择器{
    属性:属性值；
    属性2:属性值2
}

说明:
a.选择器:选择器的作用是用来确定后面的样式到底是给哪个/哪几个标签写的
b.属性:属性是css中本来就支持和拥有的属性，属性的顺序可以随便写
属性和属性值之间使用冒号连接，
属性后面必须写分号，不管是不是最后一个
c.属性值:
(1)数值:如果数值是用来表示大小，后面必须跟单位px(像素)或者%(占比,父标签宽高是确定的才能使用)
px --像素
%---百分比(前提是父标签对应的宽度或者高度是确定的)
(2)颜色:颜色对应的英语单词
#加rgb对应的16进制值(一个颜色值对应两个十六进制) #FF0000 红
直接用rgb值：rgb(0,255,0),rgb(R,G,B), R,G,B的取值范围是0~255
rgba(R,G,B,A) -a代表透明度，范围是0~100

3.常见的属性：

color:设置字体的颜色
background-color:背景颜色
width:宽度
height:高度
font-size:字体大小

4.常用的选择器

注意，在标签中写的代码注释是/注释内容/
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标签

        <div>
            <div>
                <p>hello</p>
            </div>
            <div class='c1'>
                <p>world</p>
                <div>
                    <p>python</p>
                </div>
            </div>
        </div>

6.通配符:直接将作为选择器:选中当前页面中所有的标签
*{}

7.选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高谁有效。
看谁的优先级高，就看谁的权重值大
权重值是一样的情况下，谁后写，谁的优先级高
伪类选择器:0001
元素选择器:0001
class选择器：0010
id选择器:0100
群组选择器:直接看单独的每一个的权重
包含选择器:多个选择器的权重和
通配符:0001
内联选择器1000、
注意:不管选择器的权重有多高，内联演示的优先级都是最高的

8.伪类选择器
前面的元素选择器，id选择器，class选择器选中的都是标签
伪类选择器是选中标签的某个状态
伪类选择器:选中某个标签的不同状态（一般适用于超链接和按钮等）
1.语法：----标签:状态
标签选择器:状态{}
a.状态:
-link:初始状态
-visited:访问后的状态(适用a标签后的状态)
-hover:鼠标悬停在标签上的时候对应的状态
-active:被激活对应的状态（一般用于超链接）--鼠标按下的时候对应的状态
-focus：成为焦点（适用于输入框）

        input:focus{
            outline:none;/*关闭输入框输入的时候的框*/
        }

注意：
1.标签是通过不同的选择器去选中的都可以
2.爱恨原则:如果想要给一个标签同时给link\visited\hover\active中的两个或者
两个以上的状态设置样式，必须遵守爱恨原则（LoVeHate）如果不按爱恨原则可能回去问题
如果按照爱恨原则肯定不会出问题

a:link{属性:属性值}超链接的初始状态

b.多行文本域:textarea标签

<textarea name='' rows='20' cols='20'></textarea>

rows初始行
cols初始列
有placeholder可以设置提示符
disabled：禁用文本框

    <textarea name='message' rows="5" cols="20" placeholder="200字以内" disabled="disabled">
                
    </textarea><br>

span:行内标签（一行可以放多个标签）