1.表单标签和ijnput标签
1.表单标签：form
这个标签是作为一个容器，来收集和提交这个标签中的其他相关标签的数据，一般不会单独使用
action属性：设置提交路径(接口)
method属性：设置请求方式(post/get)
2.input标签
input标签是单标签
input标签可以单独使用，也可以和form配合使用
type属性：这个值不一样，input的功能就不一样
text，password,submit,reset
2.1.文本输入框（type:text）和密码输入框（type:password）
type:text(明文输入框)
type:password(密文输入框)
name:随便命名，用来对输入的内容进行说明
提交数据的时候以name:value形式进行提交，name值会作为发送请求的参数名，value就是参数值
value:指向的就是文本输入框中的内容
placeholder-占位符（提示信息）
maxlength:限制输入框能输入的最大的字符个数
disabled：禁用
2.2单选按钮
type:radio
name:注意：同一类信息的name需要设置成一样的值，才能做到选择其中一个让别的取消选中
value:需要设置值，来告诉别人选中按钮对应值或者意义
checked:设置默认选中状态
2.3复选按钮
type:checkbox
name：如果是同一类数据，name值应该设置成一样的
checked:设置默认选中状态
2.4普通按钮
type:button
value:设置按钮上显示的文字
2.5提交按钮
type:submit
可以自动提交当前form标签中的所有的设置name属性的标签的值
2.6重置按钮
type:reset
可以将当前form标签中所有的标签的值设置为初始状态的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form action="" method="get">
<input type="text" name="username" id="" value="秋容" placeholder="用户名" />
<input type="text" name="tel" id="" value="13345674894" placeholder="电话号码" />
<input type="password" name="password" id="" value="123456" placeholder="密码" maxlength="8" />
<br/>
<input type="radio" name="sex" id="" value="boy" />男
<input type="radio" name="sex" id="" value="girl" checked="checked" />女
<br/>
<input type="radio" name="marry" id="" value="yes" checked="checked" />未婚
<input type="radio" name="marry" id="" value="no" />已婚
<br/>
<input type="checkbox" name="hobby" id="" value="唱歌" />唱歌
<input type="checkbox" name="hobby" id="" value="跳舞" checked="checked" />跳舞
<br/>
<input type="button" value="点一下" />
<input type="range" name="" id="" value="" />
<input type="reset" name="" id="" value="重置" />
<input type="color" name="color" id="" value="" />
<br/>
其他按钮
<input type="datetime" name="datetime" id="" value="" />
<input type="email" name="email" id="" value="" />
<input type="file" name="file" id="" value="" />
<input type="submit" />
</form>
</body>
</html>
2.下拉菜单和多行文本域
1.下拉菜单
name:提交的时候用来区分不同的数据
value:提交时候提交具体数据
内容：显示的部分（只能是文字）
selected:设置默认选中
对下拉列表进行分组：optgroup
label属性：设置分组名
2.多行文本域textarea
输入的内容可以多行显示
rows：设置一屏最多能显示的行数
cols：设置一行的最大的列数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<form action="" method="get">
<select name="city">
<option value ="成都" >成都</option>
<option value ="北京">北京</option>
<option value ="上海" selected="selected">上海</option>
<option value ="深圳">深圳</option>
</select>
<select name="">
<optgroup label="四川省"></optgroup>
<option >成都</option>
<option >达州</option>
<option >巴中</option>
<option >广元</option>
<optgroup label="山东省"></optgroup>
<option>济南</option>
<option>青岛</option>
<option>烟台</option>
</select>
<textarea name="message" rows="4" cols="30" maxlength="200">你在干嘛？</textarea>
<input type="submit"/>
</form>
</body>
</html>
3.div和span
div和span标签都是无语义标签，一般用来对网页中的标签进行分组和分块用的
一个div占一行；多个span可以在一行显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="">aaa
<div id="">
123
</div>
</div>
<span id="">aaaa
<span id="">
1234
</span>
</span>
</body>
</html>
4.css基础
什么是css
css就是web标准中的表现标准，专门用来对网页标签进行布局和设置样式的一门语言，
目前一般使用css3，css3又叫样式表
常用css属性
color->设置字体颜色
background-color->设置背景颜色
width->宽度
height->高度
2.css基本语法
选择器{属性：属性值；属性2：属性值2；属性3：属性值3；....}
说明：
选择器-用来选中需要设置样式的标签
{}-固定写法
属性-必须是css提供的属性，总共200多个
属性值-根据属性赋不同的值，如果属性的值是数字用来表示大小的数字，后面必须加单位，比如：px(像素),em(空格)
css中的颜色值：a.颜色的英文单词 b.颜色值对应的6位16进制值（#ff00,#00ff00）
c.rgb(r,g,b),rgba(r,g,b,alpha),r,g,b的取值范围是0-255，a表示透明的，取值范围是（0-1）
属性和属性值直接用冒号隔开，多个属性之间用分号隔开，属性的顺序除特殊情况外是任意的
3.在哪写CSS代码
内联样式：将样式表写到标签的style属性中---样式只对一个标签有效
内部样式：将样式表写在head中的style标签--样式只对当前html文件中标签有效
外部样式:将样式表写在外部的css文件中，然后在head中通过link标签导入--样式可以作用于所有的html文件
内联样式的优先级最高
内部样式和外部样式谁后写谁的优先级高，后写的属性值会覆盖先写的
导入外部样式
link标签-导入外部文件
rel属性-说明导入的文件的功能，stylesheet(样式表),icon（设置网页图标）
type属性-对导入的文件类型进行说明：文件类型/文件后缀
href属性-导入的文件地址
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 导入外部样式 -->
<link rel="stylesheet" type="text/css" href="css/04-css基础.css"/>
<!-- 设置网页图标 -->
<link rel="icon" type="image/ico" href="img/..ico"/>
</head>
<body>
<style type="text/css">
/* 内部样式 */
p{
color: cyan;
}
h1{
color: black;
font-size:20px ;
}
</style>
<a href="https://www.baidu.com">百度一下</a>
<p>我是一段文字</p>
<h1>标题1</h1>
<p>文字2</p>
<h1>标题2</h1>
<!-- 内联样式 -->
<div id="" style="height: 50px; background-color: green;">
</div>
</body>
</html>
5.css选中器
选择器{属性：属性值；属性2：属性值2；属性3：属性值3；....}
选择器-选中需要添加样式的标签
常用的选择器：元素选择器，id选择器，class选择器，群组选择器，父子选择器，通配符
元素选择器：将标签名作为选择器，选中指定的标签
用法：标签名{}
2.id选择器：将标签中的Id属性的值作为选择器，选择id值对应的标签
用法：#id值{}
3.class选择器：将标签中的class属性的值作为选择器，选择class值对应的标签
用法：.class值{}
4.群组选择器：多个选择器用逗号隔开，然后作为一个选择器，同时选中所有选择器对应的标签
a,p{}->选中所有的a标签和p标签
.p1,img->选中所有的img和class值是p1的标签
#p2,#p3，p->选中所有id是p2和p3的标签,以及所有的p标签
5.父子选择器：多个选择器用空格隔开作为一个选择器，按顺序依次往后找，找到最后一层选择器对应的标签
div div p{}--选中div里面的div里面的p标签
#d1 a--选中id值是滴的标签中的
6.通配符：将*作为选择器，选中当前网页中所有的标签
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* 元素选择器 */
p{
color: blue;
}
/* id选择器 */
#p2{
color: yellow;
font-size: 30px;
}
/* class选择器 */
.p3{
color: red;
}
/* 群组选择器 */
a,p{
color: rosybrown;
}
/* 父子选择器 */
div p{
color: green;
}
/* 通配符 */
*{
color: lightcoral;
}
</style>
</head>
<body>
<div id="">
<p id="p2">段落1</p>
<a href="https://www.baidu.com">百度一下1</a>
<p class="p3">段落2</p>
<div id="">
</div>
<p>段落3</p>
<a id="p2" href="https://www.baidu.comm">百度一下2</a>
<p class="p3">段落4</p>
</div>
</body>
</html>
6.伪类选择器
1.伪类选择器
伪类选择器是选中某个标签的不同的状态可以给不同状态设置不同的样式
a.link
标签：link{}--选中初始状态(a标签的初始状态指的是a对应的网址一次都没有访问成功的时候对应的状态)
例如：a:link{};p:link;#a1:link .a2:link{}
b.visited:访问后的状态
c.hover:鼠标悬停在标签上对应的状态
d.active:鼠标按住不放对应的状态
注意：使用伪类选择器的时候要遵守爱恨原则（LoveHAte）,如果不遵守可能会导致某些状态的样式无效
2.选择器的优先级:权重值越大，优先级越高，如果权重值相同，后写的优先级高
元素选择器权重：0001-1
class选择器权重：0010-2
id选择器权重：0100-4
伪类选择器权重：0001
群组选择器权重：单独看每个选择器的权重
父子选择器权重：所有的选择器权重之和
内联样式的优先级是最高的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
/* 初始状态 */
a:link{
color: black;
}
/* 访问后的状态 */
a:visited{
color: red;
}
/* 鼠标悬停在标签上的状态 */
a:hover{
font-size: 30px;
}
/* 鼠标按住不放的状态 */
a:active{
color: green;
}
#p1{
color: yellow;
}
div #p1{
color: cyan;
}
p{
color: brown;
}
#p2{
color: hotpink;
}
a,p{
color: purple;
}
div a{
color: deeppink;
}
</style>
</head>
<body>
<div id="">
<p id="p1" class="p2" style="color: red;">我是一段文字</p>
</div>
<a href="https://hao.360.cn/?a1004">360浏览器</a>
<a href="https://www.taobao.com/">淘宝</a>
<a href="https://www.163.com/">网易</a>
</body>
</html>
