表单标签
1、可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 - post/get
input标签
1、是表单标签
2、type属性：text-普通的文本输入框
3、name属性：必须设置(用于提交信息)
4、value属性：标签内容
5、placeholder属性：占位符（提示信息）
6、maxlength:输入框最多能输入的字符个数
7、readonly:readonly:输入框只读，不能往里面写入内容
<form action="" method="get">
<input type="text" value="" readonly="readonly" placeholder="请输入手机号码" maxlength="11"/>
<!--input标签 - 密码输入框
1、type属性：password --输入的值是密文显示-->
<input type="password" name="password" id="" placeholder="密码" />
<!--input标签：单选按钮
1、type属性：radio
2、name：同一类型对应的name值必须一样
3、value：设置选中按钮提交的值
4、checked：设置为checked，让按钮默认处于选中状态-->
<input type="radio" name="sex" id="" value="" checked="checked"/><span> 男 </span>
<input type="radio" name="sex" id="" value="" /><span> 女 </span>
<!--input标签:多选按钮
1、type：CheckBox
2、name：同一类型对应的name值必须一样
3.value：设置选中按钮提交的值
4.checked: 设置为checked，让按钮默认处于选中状态-->
<input type="checkbox" name="interest" value="乒乓" /><span> 乒乓 </span>
<input type="checkbox" name="interest" value="游戏" /><span> 游戏 </span>
<input type="checkbox" name="interest" value="电影" /><span> 电影 </span>
<!--input标签：普通按钮
disabled="disabled"让按钮不能点击-->
<input type="button" name="" id="" value="登录" disabled=""/>
<!--input标签：重置按钮
让当前所在的form中的所有表单相关标签对应的值，回到最初的状态-->
<input type="reset" name="" id="" value="重置全部" />
<!--input标签:文件选择器-->
<input type="file" name="icon" id="" value="添加" />
<input type="submit" name="" id="" value="提交" />
</form>
下拉菜单和多行文本输入
<form action="" method="post">
<!--1、下拉菜单-->
<select name="city">
<option value="">成都</option>
<option value="">重庆</option>
<option value="">北京</option>
<option value="">大连</option>
<!--selected="selected":设置默认选中-->
<option value="" selected="selected">青岛</option>
</select>
!--2、多行文本域（多行文本输入框） rows 行； cols 列-->
<textarea name="" rows="5" cols="10" placeholder="输入意见" maxlength="200"></textarea>
</form>
空白标签div和span
html中标签分为两大类：
块级标签：一行只能有一个（不管标签的宽度是多大）h1 - h6,p, hr， 列表相关的标签，table,form
行内标签：一行可以有多个
a，img,input,下拉列表（select）,textarea
div标签，是空白标签，没有任何特殊的意义（无语义标签）
CSS
1、什么是CSS
CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样、在哪）
CSS代码/CSS文件，我们叫样式表
目前我们使用的是CSS3
2、写在哪儿
内联样式表：将css代码写在标签的 style属性中
内部样式表：写在head标签中的style标签的内容中
外部样式表：写在一个css文件中，通过head中的link标签来关联
优先级: 内联的优先级最高；内部和外部没有绝对优先，主要看同一个属性谁最后赋值，谁就有效
3.怎么写(CSS语法)
选择器{属性:属性值; 属性：属性值;}
选择器： 用来选中需要设置样式的标签
属性：css属性（css2中的属性有两百多个）
属性值：如果属性值是数字，表示的是大小要在后面加px
注意：每个属性之间要使用分号隔开，否则属性无效
补充属性：color：设置字体颜色 background-color:设置背景颜色 width：标签的宽度 height:标签的高度
style标签 专门用来设置样式的标签
<style type="text/css">
div{
background-color: darkgreen;
}
</style>
选择器
0、元素选择器（标签选择器）：标签名
选中所有的标签名对应的标签
1、id选择器：#ID属性值
每个标签都有一个ID属性，整个html中，id的值必须唯一
2、class选择器：.class属性值
每个标签都有一个class属性，
3、通配符： *
选中所有的标签
4、层级选择器：选择器1 选择器2.。。。
5、群组选择器：选择器1，选择器，。。。
补充：
CSS中的颜色值：
1、颜色英语单词
2、16进制的颜色值 0-255 ---00-ff（#ff0000 --表示红色）
3、rgb值：rgb（红，绿，蓝） rgba值：rgba(红，绿，蓝，透明度（0-1）)
<style type="text/css">
/*通配符*/
*{font-size: 50px;}
/*id选择器*/
.c1{color: brown;
background-color: olive;}
/*元素选择器*/
a{background-color: yellow;
}
/*class选择器*/
#a1{/*color:#ff0000;*/
color:rgba(0,0,255,0.4)
}
/*层级选择器*/
#all_a a{color: pink;
}
div div a{text-decoration: none;
}
/*群组选择器*/
/*同时选中所有h1标签和所有的span标签*/
h1,span{background-color: #FFC0CB;
}
</style>
伪类选择器
伪类选择器: 选择器:状态
link: 超链接的初始状态; -- 一次都没有访问成功的时候的状态
visited: 超链接访问后的状态 --- 已经访问成功后的状态
hover: 鼠标悬停在标签上对应的状态
active：鼠标按住的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)
LoVe HAte
注意：css中所有和大小相关的数字后面必须加单位：px
*px:代表像素
* % ：百分比
