一、h5标签
1，表单标签：form标签
表单标签是用来收集用户信息。是一个容器，用来获取这个标签中相应的其它标签（input标签）的数据）
可以将收集到的数据，通过method对应的方式，去发送请求（发送给action对应的接口）
<form action="" method="get">
2，input标签：（单标签）
type属性：决定input标签的样式
- text（默认）：文本输入框
- password：密码输入框
- radio：单选按钮
- checkbox：复选按钮
- button：普通按钮
- submit：提交按钮
- file：文件域
name属性：区分不同的input对应的值
value属性：input标签中的值
提交input中数据给服务器的时候，是以name值=value值来提交
placeholder属性：占位符（输入框提示信息）
maxlength属性：约束输入框能输入的字符的最大个数
注意：input标签放在外边同样可以使用，只是不能使用提交与重置功能
==================================================
type属性：
a，文本输入框（text）
<input type="text" name="id" value="" placeholder="账号"/>
b，密码输入框（password）
<input type="password" name="password" value="" placeholder="password"/>
c，单选按钮（radio）
注意：
- 1，value值：设置为按钮选中后提交的值
- 2，name值：如果多个按钮只能选中一个，那么这些按钮对应的name值必须相同
- 3，一组（name值一样）单选按钮在提交的时候只提交被选中的按钮的name值和value值
- 4，check属性：设置默认选中
<input type="radio" name="sex" value="boy" /> <span>男</span>
<input type="radio" name="sex" value="girl" /> <span>女</span>
d，复选按钮（checkbox）
注意：
- 1，value值：设置为按钮选中后提交的值
- 2，name值：同一组数据对应的name值必须相同
- 3，一组（name值一样）复选按钮在提交的时候只提交被选中的按钮的name值和value值
<input type="checkbox" name="hobby" value="篮球" /> <span>篮球</span>
<input type="checkbox" name="hobby" value="乒乓球" /> <span>乒乓球</span>
<input type="checkbox" name="hobby" value="羽毛球" /> <span>羽毛球</span>
<input type="checkbox" name="hobby" value="排球" /> <span>排球</span>
e，普通按钮（button）
<input type="button" name="" value="登录" />
g，重置按钮（reset）
让当前form标签中的input标签的值回到初始状态
<input type="reset" name="" id="" value="重置" />
h，文件域（file）
<input type="file" name="" id="" value="" />
二、下拉多行文本和按钮
下拉和多行文本域可以放在form标签中用于收集信息
1，下拉菜单：select标签
1.1一个select标签对应一个下拉菜单，菜单中的选项要通过option来列举
slected属性：设置默认被选中的选项
<select name="city">
<option value="成都">成都</option>
<option value="北京" selected="selected">北京</option>
<option value="重庆">重庆</option>
</select>
1.2，对下拉菜单进行分组
可以通过 optgroup 标签对下拉菜单进行分组，通过label属性对分组进行命名
<select name="city">
<optgroup label="四川">
<option value="成都">成都</option>
<option value="德阳">德阳</option>
<option value="绵阳">绵阳</option>
<option value="乐山">乐山</option>
<option value="眉山">眉山</option>
</optgroup>
<optgroup label="广东省">广东省
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="中山">中山</option>
<option value="佛山">佛山</option>
</optgroup>
2，多行文本域：textarea标签
- name：提交的数据对应的名字
- rows：控制一屏的行数
- cols：默认的列数
- placeholder：设置占位符
- disabled：禁用
- maxlength：约束能输入的最大的字符个数
<textarea name="message" rows="2" cols="10" placeholder="请输入"></textarea>
3按钮：button标签
<button>注册</button>
<button><img src="img/QQ截图20180917182741.png"/></button>
4、div\span
4.1，div和span
div和span标签是空白标签，没有语义，一般用来作分组或者将网页分块
4.2,块级标签和行内标签
块级标签：一个标签占一行
h1-h6，p，列表标签（ul，ol，dl）
table，hr-分割线行内标签：一行可以放多个
img，a，input，slect，textarea
三、CSS基础
css是web标准中的表现标准，用来规定网页上的布局和样式（css又叫样式表）——目前广泛使用的是CSS3
1，怎么来写样式表（CSS），写在哪？
- a，内联样式表：将样式写在标签的style属性中（每个可见标签都有style属性）
- b，内部样式表：将样式写在head标签的style标签中
- c，外部样式表:将样式表写在一个CSS标签中，然后在head中通过link来导入
注意：不管在什么情况下，内联样式的优先级最高；内部和外部的优先级，看谁后写，谁的优先级高
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/04-css基础.css"/>
<!--内部样式表-->
<style type="text/css">
h1{background-color:rgba(0,255,255,02);color: yellow}
</style>
</head>
<body>
<p style="background-color:red ;color: yellow;">
</body>
2，固定语法
选择器{属性1：属性值1；属性2：属性值2；......}
- a，选择器:用来确定后面的样式是给那个，那些标签写的
- b，属性：是CSS中本来就支持和拥有的属性，属性的顺序可以随意
- 属性和属性值之间用冒号连接
- 属性后面必须加分号
- c，属性值：
（1）数值：如果数值是用来表示大小，后面必须跟单位px或%
px---像素 %---百分比（父标签对应的宽度或者高度确定）
（2）颜色：颜色对应的英语单词， - "#" 加RGB对应的16进制值（一个颜色值对应2位16进制）
- 直接使用rgb值：rgb（R,G,B）,
- rgba（R,G,B,Alpha）R,G,B的取值范围是0-255，Alpha的取值范围是0-1
3，常见的属性
- color：设置字体颜色
- background-color：：背景颜色
- width：宽度
- height：高度
- font-size：字体大小
四，选择器
1、常用的选择器
- 标签/元素选择器：将标签名作为选择器，同时选中网页中所有的同类型标签
a{}--选中所有的a标签
- id选择器：通过在id属性值前加#，就构成了id选择器。选中id等于对应的值的标签
id属性：所有的标签都有id属性，并且设置的值必须唯一
#p1{}---选中id值是p1的标签
- 3，class选择器：通过在class属性值前加".",就构成了类选择器
.c1{}---选中所有class值是c1的标签
- 群组选择器：多个选择器中间是用逗号隔开。选中所有的单独的选择器
a,p,#p1,.c1{}---选中所有的a标签，p标签，id值是p1，class值是c1的标签
- 包含选择器：多个选择器之间使用空格隔开。从前往后找，找到最后一个选择器
div .c1 p{}--选择div标签中，class值为c1的p标签；只要标签有对应的包含关系就能被选中
- 通配符（）：直接将作为选择器，选中当前页面的所有标签
2、选择器的优先级
通过不同的选择器选中了同一个标签并设置了同一个属性，那么谁的优先级高谁有效
看谁的优先级高就看谁的权重值高，权重值一样的情况下，谁后写谁的优先级高
| 伪类选择器： | 0001 |
|---|---|
| 元素选择器： | 0001 |
| class选择器： | 0010 |
| id选择器： | 0100 |
| 群组选择器： | 直接看单独每一个的权重值 |
| 包含选择器： | 多个选择器的权重和 |
| 通配符： | 0001 |
注意：不管选择器的权重有多大内联样式的优先级最高
3、伪类选择器
前面的元素选择器，id选择器，class选择器选中的都是标签；
伪类选择器是选中标签的某个状态
伪类选择器：选中标签的不同状态
3.1语法：
标签：状态{}
说明：
a，状态：
link：初始状态
visted：访问后的状态
hover：鼠标悬停咋标签对应的状态
active：被激活对应的状态（一般用于超链接）
focus：成为焦点（在输入框中用的比较多）b，标签：可以通过不同的选择器去选中
3.2，爱恨原则：L o V e--H A te
如果想要给一个标签同时给link/visited/hover/active中的两个或者两个以上的状态设置样式，必须遵守爱恨原则
(如果不按原则可能会出问题)
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{color:blue;} /*访问前*/
a:visited{color:gray} /*访问后*/
a:hover{color:red}
a:active{background-color: #2E8B57;}
input:focus{outline: none;}
</style>
</head>
