一、表单标签
1、表单标签：form标签
表单标签是用来收集用户信息的，是一个容器，用来获取这个标签中相应的其他标签（input标签）的数据；可以将收集到的数据，通过method对应的方式，去发送请求（发送给action对应的接口）
2、input标签：单标签（没有内容只有属性）
a、type属性：决定input标签的样式
text（默认值）：文本输入框
password:密码输入框
radio：单选按钮
checkbox:复选按钮
buttton:普通按钮
reset:重置按钮
file:文件按钮
注意：input标签放在form外同样可以使用，只是不能直接使用提交和重置功能。
b、name属性：区分不同的input对应的值
c、value属性：input标签中的值
提交input中的数据给服务器的时候，是以name值=value值来提交的。
d、placeholder属性：占位符（输入框的提示信息）
e.maxlength属性：约束输入框能输入的字符的最大个数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form method="get" action="">
<!--
a.文本输入框
-->
<span>账号：</span>
<input type="text" name="username" value="" placeholder="请输入账号" maxlength="设置输入框能输入的最大长度"/>
<br />
<span>手机号：</span>
<input type="text" name="tel" value="" placeholder="请输入电话号码"/>
<br />
<!--
b.密码输入框：（password）
注意：value值是输入框中输入的内容
-->
<span>密码：</span>
<input type="password" name="password" id="" value="" placeholder="密码"/>
<br />
<!--
c.单选按钮：radio
注意：
1、value值：设置为这个按钮选中提交对应的值
2、name值：如果多个按钮只能选中一个，name
3、checked属性：设置默认选中。
3、一组（name值一样）单选按钮在提交的时候只提交被选中按钮的name和value值。
-->
<input type="radio" name="sex" value="man" checked="checked"/><span>男</span>
<input type="radio" name="sex" value="woman"/><span>女</span>
<br />
<!--
d.复选按钮：checkbox
注意：
1、name值：同一组的数据对应的name值一样。
-->
<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>
<br />
<!--
e.普通按钮：(button)
value值：按钮上显示的值
-->
<input type="button" value="登录"/>
<!--
f.提交按钮：submit
自动将当前form标签中设置了name属性的input标签对应的值通过method方式提交给action接口。
-->
<input type="submit" name="" value="提交"/>
<!--
g.重置按钮：reset
将当前form标签中的input标签中的值回到初始状态
-->
<input type="reset" value="重置"/>
<!--
h.文件域：file
-->
<input type="file" />
<input type="date" />
</form>
</body>
</html>
二、下拉框和多行文本域
下拉和多行文本域可以放在form标签中用于收集信息：
1、下拉菜单:select标签
一个select标签对应一个下拉菜单。菜单中的选项通过option来列举。
a.selected属性：设置默认选中显示对象
2.对下拉菜单进行分组：可以通过optgroup标签对下拉菜单进行分组，通过label对分组进行命名。
3、多行文本域：textarea
name:提交的数据对应的名字
rows:默认一屏的行数
cols:more的列数
placeholder:设置占位符
disabled:禁用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉和多行文本域</title>
</head>
<body>
<select name="city">
<option value="成都">成都</option>
<option value="北京">北京</option>
<option value="重庆">重庆</option>
</select>
<select name="city">
<optgroup label="四川省">
<option value="成都">成都</option>
<option value="绵阳" selected="selected">绵阳</option>
<option value="德阳">德阳</option>
<option value="宜宾">宜宾</option>
</optgroup>
<optgroup label="广东省">
<option value="广州">广州</option>
<option value="中山">中山</option>
<option value="深圳">深圳</option>
<option value="佛山">佛山</option>
</optgroup>
</select>
<textarea name="message" rows="20" cols="30" placeholder="请输入消息"></textarea>
<!--
3、按钮：button标签
-->
<button>注册</button>
<button><img src="../day01-html/img/01.jpg" alt="" /></button>
</body>
</html>
三、div和span标签
1、div和span
div和span标签是空白标签，没有语义
一般用来做分组，将网页分块
div是块级标签，一行只能放一个标签
span是行内标签，一行可以放多个标签
2、块级标签和行内标签
块级标签：一个标签占一行
h1-h6,p,ul,列表标签,table标签等。
行内标签：一行可以放多个行内标签
img,a,input,select,textarea等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>
abc
</span>
<span>
abd
</span>
<div class="">
aaa
<a href="">百度</a>
<a href="">谷歌</a>
</div>
<div class="">
bbb
</div>
</body>
</html>
四、CSS基础
css是web标准中的表现标准，用来规定网页上的内容的布局和样式（css又叫样式表）
目前广泛使用的是css3
1、怎么来写样式表（CSS），写在哪儿？
a、内联样式表：
将样式写在标签的style属性中（每个可见标签都有style属性）
b、内部样式表：
将样式表写在head标签中style标签里面。
c、外部样式表:
将样式表写在一个CSS文件中，然后在head标签中通过link标签导入。
注意：不管在什么情况下，内联样式表的优先级最高；内部和外部的优先级看谁后写，谁的优先级高；
2、固定语法
选择器{属性:属性值;属性2:属性值2...}
说明：
a、选择器：选择器的作用是用来确定后面的样式到底是给哪几个标签写的。
b、属性：属性是css中本来就支持和拥有的属性，属性的顺序可以随意写。
属性和属性值之间使用冒号连接;
属性后面必须写分号;
c、属性值：
（1）数值：如果数值是用来表示大小，后面必须跟单位px或者%.
px -- 像素 ； % --- 百分比；
(2)颜色的表示方法：
a.颜色对应的英语单词，
b.#加RGB对应的16进制值（一个颜色值对应2位16进制），
c.直接使用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:字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
外部样式
-->
<link rel="stylesheet" href="css/04-CSS基础.css" />
<!--
内部样式表
-->
<style type="text/css">
h1{
background-color: salmon;
color:seagreen;
}
a{
font-size: 20px;
}
</style>
</head>
<body>
<!--
描述：内联样式
-->
<p style="background-color: crimson;color: rgba(0,255,0,1);">样式表的内容</p>
<p>样式表的语法</p>
<h1>我是标题1</h1>
<h1>我是标题2</h1>
<a href="">百度</a>
<img src="img/01.jpg" alt="" />
</body>
</html>
五、选择器
一、选择器
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标签。
6.通配符：直接将作为选择器：当前页面中所有的标签。
二、选择器的优先级
通过不同的选择器选中了同一个标签，并且设置了同一个属性，谁的优先级高谁就有效。
看谁的优先级高就看谁的权重值大。
权重值是一样的情况下，谁后写，谁的优先级高。
伪类选择器：0001
元素选择器：0001
class选择器：0010
id选择器：0100
群组选择器：直接看单独的每一个的权重
包含选择器：多个选择器的权重和
通配符：0001
注意：不管选择器的权重有多高，内联样式表的优先级都是最高的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*注意:在这个标签中写的代码时css代码
元素选择器*/
a{
color:salmon
}
/*id选择器*/
#a1{
background-color: green;
}
/*class选择器*/
.c1{
color: aqua;
}
</style>
</head>
<body>
<a class="c1" href="">超链接</a>
<div id="">
<a href="">超链接2</a>
</div>
<div id="">
<div id="">
<a id="a1" href="">超链接3</a>
</div>
</div>
<h1 class="c1">我是标题1</h1>
</body>
</html>
六、伪类选择器
前面的元素选择器，id选择器，class选择器选中的都是标签；
伪类选择器是选中标签的某个状态。
伪类选择器：选中某个标签的不同状态（一般适用于超链接和按钮等）
1、语法：
标签:状态{}
说明：
a.状态：
link:初始状态。(a标签对应的初始状态是没有访问成功过的状态)
visited:访问后的状态（使用a标签）。
hover:鼠标悬停在标签上对应的状态。
active:被激活对应的状态。--鼠标按下的时候对应的状态；
focus:成为焦点
标签：可以是通过不同的选择器去选中。
2.爱恨原则：LoVeHAte - 先爱后恨
如果想要给一个标签同时给link，visited，hover,active的两个或两个以上设置样式，必须遵守爱恨原则。
（如果不按爱恨原则可能会出问题，如果按照爱恨原则肯定不会出问题）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: gray;
}
a:visited{
color: #008000;
}
a:hover{
color: red;
font-size: 100px;
}
a:active{
color: yellow;
}
input:focus{
outline: none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
<input type="text" />
</body>
</html>
