目录
表单标签
一、获取用户输入的标签两大重要属性
1.name属性
类似于字典的键
2.value属性
类似于字典的值
form表单再朝后端发送数据的时候，标签必须要有name，否则不会发送该标签的值
二、获取用户输入的input标签理论上需要label配合使用
<lable for="某个input标签的id值"></lable>
三、获取用户输入的input标签也可以添加背景提示
<input type="text" name="password" placeholder="密码">
四、获取用户输入的标签如果不是让用户自己写而是选择，那么标签需要自己写value
<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
<option value="sh">上海</option>
</select>
五、针对radio和checkbox可以默认选中
checked="checked"
如果属性名和属性值相等，那么可以简写成：checked
六、针对option标签也可以默认选中
selected="selected" 简写为：selected
css
一、层叠样式表
1.作用
调整标签样式
2.语法结构
选择器 {
属性名1：属性值1；
属性名2：属性值2；
}
3.注释语法
/*注释内容*/
4.三种编写css的方法
1.head中style标签内部直接编写（学习阶段使用）
<head>
<meta charset="UTF-8">
<title>first_css</title>
<style>
p {color: red;}
</style>
</head>
2.head中link标签引入外部css文件（最正规）
<link href="numb1.css" rel="stylesheet" type="text/css">
3.直接在标签内部通过style属性编写（不推荐）
<p style="color: aqua">abcd</p>
二、基本选择器
1.标签选择器：直接编写标签名来查找标签
div {
color:green;
/*查找所有的div标签，将其内部的文本颜色变为绿色*/
}
2.类选择器：通过编写class的值来查找标签
.c1 {
color:red;
/*查找所有class属性中含有c1的标签，并将其内部的文本颜色变为红色*/
}
3.ID选择器：通过编写id的值来精确查找标签
#d1 {
color:aquamarine;
/*查找id的值是d1的标签，并将其内部的文本颜色改为天青色*/
}
4.通用选择器：查找所有标签
* {
color:blue;
/*查找所有的标签，并将其内部的文本颜色改为蓝色*/
}
三、标签之间的关系
<p1></p1>
<div id="d1"> /*父标签*/
<p2> /*子标签*/
<span>span1</span>
</p2>
</div>
<p></p>
1.<div>是<p1>的弟弟
2.<p2>是<div>的儿子
3.<p2>和<span>都属于<div>的后代
四、组合选择器
1.后代选择器
两个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
/*查找div标签内部所有的后代span*/
#d1 span {
color:green;
}
<div id="d1">
<p>
abcd
<span>ooooooo</span>
<span>12314</span>
</p>
</div>
2.儿子选择器
两个选择器之间大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面的选择器要求的标签
/*选择所有父级是<div>元素的<p>元素*/
#d1>p {
color: blueviolet;
}
<div id="d1">
<p>
abcd
</p>
<p>
qqqqqqq
</p>
<span>12323</span>
</div>
3.毗邻选择器
两个选择器之间用+隔开，查找前面选择器同级别下面紧挨着的符合后面选择器要求的标签
/*查找div标签同级别下面紧挨着的span标签（紧挨着的的弟弟）*/
#d1+span {
color: blue;
}
<div id="d1">
<p>
abcd
</p>
<p>
qqqqqqq
</p>
<span>12323</span>
</div>
<span>毗邻选择器</span>
<span>不毗邻</span>
4.弟弟选择器
两个选择器用~隔开，查找前面选择器同级别下的所有符合第二个选择器要求的标签
/*查找div标签同级别下面所有的span标签（弟弟们）*/
#d1~span {
color: pink;
}
<div id="d1">
<p>
abcd
</p>
<p>
qqqqqqq
</p>
<span>12323</span>
</div>
<span>dd1</span>
<span>dd2</span>
<span>dd3</span>
五、属性选择器
1.所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性
默认属性：id class
自定义属性：x=1 y=2
2.查找属性名含义name的标签
[name] {
background-color:red;
}
2.查找属性名含有name且值值username的标签
[name='username'] {
background-color:orange;
}
3.查找input标签并且，属性名含有name值是username的标签
input[name='username'] {
background-color:aqua;
}
# 前面的选择器可以是任意类型的 标签、id、class
六、选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式，那么可以合并
div,p,span{
color:red;
}
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span{
color:red;
}
还可以在选择器基础之上添加额外的选择是的查找更精确
span.c1
div#d1
七、伪类选择器
'''
补充知识：
a标签默认的颜色有两种，蓝色跟紫色
蓝色：链接地址从来没有点击过
紫色：链接地址曾经有被点击过
'''
a.hover {
color:blue;
}
鼠标悬浮上去之后样式改变，适用于所有含有文本的标签
八、伪元素选择器
通过css代码来操作标签的文本内容
p:first-letter{
font-size: 48px;
color: pink;
}
p:before{
content: "学习需要毅力";
color: lightgreen;
}
p:after{
content: "学习无止尽";
color: aquamarine;
}
九、选择器优先级
当多个选择器查找到相同的标签修改不同的样式，那么标签应该执行哪个呢？
1.选择器相同，引入位置不同
就近原则
2.选择不同
行内>id选择器>类选择器>标签选择器
十、字体样式
width：为元素设置宽度
height：为元素设置高度
块级标签才能设置宽度，行内标签的宽度由内容来决定
# 设置字体
body {
font-family:微软雅黑;
}
# 设置字体大小
p {
font-size: 16px;
}
p {
font-weight: lighter; # 细
font-weight: bolder; # 加粗
}
# 设置文本颜色的四种方法
p{
color: red;
color: rgba(255, 0, 0, 0.19);
color: #af6060;
color: rgb();
}
# 元素位置
p {
text-align: center;
}
a{
text-decoration: none;
}
p {
text-indent: 32px;
}