1 表单标签和input标签
1.1表单标签（form）
表单标签的作用：收集用户信息。-实质是将表单标签作为容器，来收集表单标签中其他标签的信息；本身没有任何显示效果。
action属性：设置提交地址
method属性：提交方式（post/get）
点提交按钮提交的时候，将表单中所有相关标签以name=value的形式，
按照method属性提供的提交方式，提交给action属性对应的接口
form标签提供了两大功能：a.统一提交 b.重置
<form action="" method="get">
</form>
1.2input标签- 单标签
既可以放在form标签中，也可以不放在form标签里单独使用
type属性 - type对应的值不一样，input标签体现的功能就不一样
1.2.1 type属性
text - 文本输入框
name属性 - 专门用来区分不同的信息，相当于字典的key
value属性 - 标签内容；指向输入框中的内容；设值其实是设文本输入框中的默认值
placeholder - 当输入框中没有内容的时候，显示的提示信息
maxlength属性 - 设置输入框最大能输入的文字的个数
1.2.2 password -密码输入框
<font>密码：</font><input type="password" name="password" id="" value="" placeholder="请输入密码"/>
1.2.3 radio-单选按钮
name属性-要求同一组的数据的name属性值必须一样，才能单选
value属性 - 不可见的，专门用于数据的提交；或者区分被选中的值
checked属性 - 让单选按钮默认处于选中状态
<input type="radio" name="sex" id="" value="" / checked="checked"><font>男</font>
<input type="radio" name="sex" id="" value="" /><font>女</font>
1.2.4 checkbox-复选按钮
<input type="checkbox" name="hobby" id="" value="" /><font>篮球</font>
<input type="checkbox" name="hobby" id="" value="" /><font>足球</font>
<input type="checkbox" name="hobby" id="" value="" /><font>羽毛球</font>
<input type="checkbox" name="hobby" id="" value="" /><font>太极</font>
1.2.5 button - 普通按钮
value属性 - 决定按钮上显示的文字
<input type="button" name="" id="" value="注册" />
1.2.6 submit按钮-提交按钮
点击提交按钮后会自动提交当前form中所有设置了name属性的相关标签的值。
以“name”=“value”的形式提交
<input type="submit" name="email" id="" value="提交" />
1.2.7 reset 重置按钮
将当前form标签中所有的标签状态设置为初始状态（写在form标签里面，才能重置form标签里面的内容）
<input type="reset" name="" id="" value="重置" />
<!--上传文件-->
<input type="file" name="" id="" value="" />
1.3按钮标签（button）
双标签，中间内容部分更灵活
<!--文字标签-->
<button>登陆</button>
<!--图片标签-->
<button>
<img src="life.png"/>
<p>登陆</p>
</button>
2 下拉菜单和多行文本框
2.1下拉菜单（select-option）
2.1.1select标签-代表整个下拉菜单
name属性-区分和提交
2.1.2option标签-下拉菜单中的选项
内容 - 显示部分
value属性 - 提交的内容
selected属性 - 设置默认选中
2.1.3optgroup标签
显示效果上对下拉菜单进行分组
label属性-给分组设置名字
<font>考试学科</font><select name="学科">
<optgroup label="理科"></optgroup>
<option value="">数学</option>
<option value="">物理</option>
<option value="">化学</option>
</select>
<font>城市</font><select name="province">
<option value="四川省">四川省</option>
<option value="湖南省">湖南省</option>
<option value="湖北省">湖北省</option>
<option value="广西省" selected="selected">广西省</option>
<option value="广东省">广东省</option>
<option value="陕西省">陕西省</option>
</select>
<select name="city">
<option value="成都市">成都市</option>
<option value="长沙市">长沙市</option>
<option value="武汉市">武汉市</option>
<option value="南宁市">南宁市</option>
<option value="深圳市">深圳市</option>
<option value="咸阳市">咸阳市</option>
</select>
2.2多行文本输入框（）
可以输入多行内容，内容超出范围可以上下滚动
name属性-提交和区分
rows-一次性可以显示的行数
cols-列数（一行最多可以显示多少文字）
placeholder -提示语句
内容 - 相当于value
maxlength属性 - 最多能输入的文字的个数
<textarea name="" rows="4" cols="30" placeholder="意见..."></textarea>
3 div和span
div和span两个标签都是无语义标签
一般用来将网页中的标签进行分组和分模块使用；
div-会自动换行，一般都用div
span-不会换行
4css基础
4.1什么是css
css是web中的表现标准，专门负责网页中内容的布局和样式
目前使用的是css3
css代码又叫样式表
4.2css语法
选择器{属性名1：属性值1；属性名2：属性值2；...}
说明
选择器{} - 通过选择器决定样式是针对哪个标签写的（在内联样式表中没有这个结构）
属性 - 属性不是随便写的，必须是css提供的两百多个属性中的一个
属性名和属性值之间用冒号连接，多个属性之间用分号隔开（如果没有分号会导致后边所有的属性无效）
4.3css代码写在哪
4.3.1.内联样式表
将样式表作为html中标签的style属性值
内联样式表只能针对一个标签有效
4.3.2.内部样式表
将样式表作为head标签中的style标签的内容
内部样式表可以针对当前html中所有的标签
4.3.3.外部样式表
将样式表写在一个css文件中，再通过link导入
外部样式表可以针对所有html文件中的所有标签
优先级：内联样式表的优先级最高；内部样式和外部样式，谁后写谁的优先级就高
4.4常用属性补充
color - 字体颜色
font-size：字体大小
background-color：背景颜色
width：宽度
height：高度
css中的颜色值：
a.颜色的英语单词
b.rgb的十六进制值，例如：#ff0000
c.直接使用rgb值：rgb（r,g,b）,rgba(r,g,b,alpha) alpha：透明度，0（完全透明）~1（不透明）
css中的数字：如果数字表示大小，必须加单位：px（像素），em（空格）
4.4.1.内联样式表
body中每个有显示效果的标签都有style属性，用来设置当前标签的样式
style属性值的引号中，写的是css代码
<p style="color:greenyellow;font-size: 30px;">我是内联样式表</p>
4.4.2内部样式表
style标签中的内容，必须也只能是css代码
内部样式，可以同时写多个样式表
<style type="text/css">
a{color: green;background: yellow;}
div{color: #008000;background-color: blue;}
</style>
<a href="http://www.baidu.com">百度一下</a>
<div id="">
我是div
</div>
4.4.3外部样式表
a.link标签：导入外部文件
rel属性：确定导入的文件功能；stylesheet-设置样式表 icon - 设置网页图标
type属性：确定文件类型;文件类型/文件后缀；text/css-文本/文件后缀是css
href属性：需要导入的文件的文件路径
image/ico - 图片/文件后缀是ico
<!--导入样式表-->
<link rel="stylesheet" type="text/css" href="css/css基础.css" />
<!--设置网页图标-->
<link rel="icon" type="image/ico" href="img/jd.ico" />
5选择器
css语法：选择器{属性名1：属性值；属性名2：属性值；...}
css提供的选择器的写法大概有十几种，常见的有：
5.1标签选择器
直接将标签名作为选择器，选中当前html中所有指定的标签.
例如：a{} - 选中当前html中所有的a标签；div{}选中当前html中所有的div标签
5.2id选择器
将标签的id属性值前面加#作为选择器，选择所有id是指定值的标签
例如：#text - 选中当前html中id属性值是text的所有标签
5.3class选择器（类型选择器）
将标签的class属性值前面加.作为选择器，选中所有class是指定值的标签
例如：.text - 选中当前html中class属性值是text的所有标签
5.4群组选择器
将多个选择器用逗号隔开作为一个选择器，同时选中每个单独的选择器选中的所有的标签
例如：p，a，.test，#text{}选中所有的p标签、a标签和class值是test以及id值是text的标签
5.5后代选择器
将多个选择器用空格隔开作为一个选择器，从前往后一层一层的找，找到最后一个选择器对应的标签
例如：div .test #text{}-选中div标签中class值是test的标签中id值是text的标签
div div p{} - 选中div中的div中的p标签
5.6通配符
将作为选择器，选中当前页面中所有的标签
例如：{}-选中当前页面中所有的标签
5.7设置文字的装饰效果
underline给文字添加下划线
line-through-删除线
none - 去掉下划线
overline-上划线
style表实质可以写在html文件中的任何位置
<style type="text/css">
/*1.标签选择器*/
div{color: red;}
/*2id选择器*/
#text{background-color: blue;}
/*3.class选择器*/
.test{width100px;height: 200px;background-color: greenyellow;}
/*4群组选择器*/
div,.test{font-size: 50px;}
/*5.后代选择器*/
div div{color: yellow;}
/*6.通配符*/
*{
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="">
div1
</div>
<div class="test">
div2
<p>我是段落</p>
</div>
<div class="test">
div3
<p id="">我是标题1</p>
</div>
<div id="">
<div id="">
div中的div
</div>
</div>
</body>
</html>
6伪类选择器
伪类选择器是用来选中标签的不同的状态（为标签的不同状态设置不同的样式）
6.1基本格式
普通选择器：伪类选择器
6.2伪类选择器
1）link： -标签的初始状态；一般作用于a标签，表示a标签中的连接没有成功访问过对应的状态
标签：link{} - 标签是通过各种选择器来选中的标签
2)visited：超链接被访问过后的状态。一般作用于a标签
3）hover - 鼠标悬停在标签上的时候对应的状态
4)active - 激活状态，鼠标按下还没有弹起的时候对应的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
/*去掉下划线*/
text-decoration: none;
}
a:link{color:red;}
a:visited{color:green;}
/*悬停的时候添加下划线*/
a:hover{color:yellow; text-decoration: underline;}
a:active{background: blue;}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
6.3.爱恨原则：
当同一个标签需要同时给多个状态添加样式的时候，要遵守爱恨原则：Link-visited-hover-active
LoVeHAte
