01表单标签（input）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.表单标签：
1.可以提交表单中收集的信息
action属性：设置提交信息的位置
method属性：提交方式 - post/get
-->
<form action="" method="get">
<!--input标签-
1.是表单的标签
2.type属性：
text--文本输入框
3.name属性：必须输入（a.用于提交信息）
4.value：标签内容
5.placeholder：占位符（）提示信息
6.maxlength：输入框最多能输入的字符个数
7.readonly：readonly - 输入框只读（不能往里面输入内容）
-->
<input type="text" name="username" value="" placeholder="请输入手机号" maxlength="11"/>
<!--input标签密码输入框
1.type属性：password ---输入的的值是密文显示
-->
<input type="password" name"password" value="" placeholder="密码" maxlength="8"/>
<!--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" id="" value="篮球" /><span>篮球</span>
<input type="checkbox" name="interest" id="" value="乒乓球" /><span>乒乓球</span>
<input type="checkbox" name="interest" id="" value="看电影" /><span>看点用</span>
<input type="checkbox" name="interest" id="" value="旅游" /><span>旅游</span>
<!--input标签：普通按钮
disabled：disabled - 让按钮不能点击
-->
<input type="button" name="" id="" value="登录" disabled="disabled"/>
<!--input标签：重置按钮
让当前所在的form中的所有表单相关标签对应的值，回到最初的值
-->
<input type="reset" name="" id="" value="重置全部" />
<!--input标签：文件选择器-->
<input type="file" name="icon" id="icon" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
02表单标签（下拉和多行文本域）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--
fielset：
一个fieldset标签对应一个表单分组
legend标签：设置分组名
-->
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="username" id="" value="" placeholder="用户名"/>
<input type="password" name="password" id="" value="" placeholder="密码"/>
<input type="reset" name="" id="" value="重置" />
</fieldset>
<fieldset id="">
<legend>反馈信息</legend>
<!--1.下拉菜单-->
<select name="city">
<option value="">成都</option>
<option value="">重庆</option>
<option value="">北京</option>
<option value="">大连</option>
<!--seleced：设置默认选中-->
<option value="" selected="selected">青岛</option>
</select>
<!--2.多行文本域（多行文本输入框）-->
<textarea name="message" rows="2" cols="10" placeholder="请输入意见..." maxlength="200">上次没有发送的信息</textarea>
<input type="reset" name="" id="" value="重置" />
</fieldset>
<input type="submit" value="提交"/>
</form>
</body>
</html>
03空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
HTML中标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6,p,hr,列表标签，table，form
2.行内标签：一行可以有多个
a,img，input，下拉列表（select），textarea
div标签，是空白标签，没有任何特殊的意义（无语义标签）
-->
<div style="background-color: aquamarine; width:100px ;">
我是div1 <br />
我是div2
</div>
<div>
<div style="background-color: aquamarine; width:100px ;">
</div>
</body>
</html>
04 认识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：标签的高度
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--关联外部样式表-->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
<!--style标签
专门用来设置样式的标签
-->
<!--关联内部样式-->
<style type="text/css">
div{
background-color:navajowhite;
color: aqua;
}
</style>
</head>
<body>
<!--内联样式-->
<!--style属性：每个标签都有-->
<div style="color:red">
我是div
</div>
</body>
</html>
05CSS选择器
<!--选择器
0.元素选择器（标签选择器）：标签名
选中所有的标签名对应的标签
1.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一
2.class选择器： .class属性值
每个标签都有一个class属性，
3.通配符：*
选中所有的标签
4.层级选择器：选择器1 选择器2....
5.群组选择器：选择器1，选择器2，....
补充：
css中的颜色值
1.颜色英语单词
2.16进制的颜色值 0-255--- 00-ff（#ff0000-红色）
3.RGB值：rgb（红绿蓝） rgba(红绿蓝，透明度)--透明度0-1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 30px;
}
/*元素选择器*/
a{
background-color: #FFDEAD;
}
/*class选择器*/
.c1{
background-color: #00FFFF;
}
/*id选择器*/
#a1{
color: rgba(0,0,255,0.4);
}
/*层级选择器*/
div div a{
color: pink;
text-decoration: none;
}
#all_a{
}
/*群组选择器*/
/*同时选中所有的h1标签和所有的span标签*/
h1,span{
background-color: aqua;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<span id="">
我是span
</span>
<div>
<div id="">
<a href="">aaa</a>
<p></p>
</div>
<div id="all_a">
<a href="">a1</a>
<a href="">a1</a>
<a href="">a2</a>
<a href="">a2</a>
<a href="">a2</a>
</div>
</div>
<a id="a1" href="">我是aaa <br /></a>
<a href="">我是a</a>
<p class="c1">我是p</p>
<a href="">我是a2</a>
<div id="" class="c1">
我是id
<a href="">我是a3</a>
</div>
</body>
</html>
06伪类选择器
<!--伪类选择器： 选择器：状态
link：超链接的初始状态；--- 一次都没有访问成功的时候
visited：超链接访问后的状态 --- 已经访问成功后的状态
hover：鼠标悬停在标签上对应的状态
active：鼠标按住的状态
给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则（先要爱才能恨）
LoVe HAte
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同事设置a标签的所有状态*/
a{
color:black;
}
a:link{
color:darkgreen;
}
a:visited{
color:pink;
}
a:hover{
color:red;
font-size: 40px;
}
a:active{
color: yellow;
}
#d1{
width:300px;
height:400px;
background-color: #8A2BE2;
}
#d1:hover{
background-color: #FFC0CB;
}
</style>
</head>
<body>
<a href="http://taobao.com">
百度一下
</a>
<button id="d1"></button>
</body>
</html>
