一、表单标签的补充
关于form
如果没有value 前端就不会发送数据到后端，字典必须齐备
关于Input
input 一般前面要配一个label ，然后label for 属性绑定input的 id，这样点lable的数据时，可以鼠标定位到input输入框，俗称聚焦。 专业的前端一般有强迫症都会配label
关于select
针对选择类型的标签，可以提前设置默认选项，加一个属性 checked
针对下拉选择类型的标签，也可以提前设置默认选项，加一个属性 selected
二、CSS
通过查看日常的网址的代码，看到他们的dvi啊之类的代码都有封一个class属性
class属性
分类，有点类似红警中的编队,一个单位可以属于很多队
id属性
精准定位
1.语法结构
选择器{
样式1：值；
样式2：值
}
2.注释语法
/*注释内容*/
3.引入CSS的多种方式
- 直接head里style里编写
- Link导入，也是head内（推荐用）
- 标签内部style写 （不推荐）
三、CSS选择器
贯穿整个标签查找
1.CSS基本选择器
- 标签选择器，head里style里然后指某一种标签{}
- 类选择器，head里style里封 点类名 比如.c1 {}
- id选择器，head里style里封 井号id值 比如#999 {}
- 通用选择器，head里style里封直接选择所有标签 * {}
2.CSS组合选择器
根据同级的先来后到分为哥哥、弟弟标签
根据包裹的层级分为父子孙标签，包裹内的所有标签都是后代标签
- 后代选择器，head里style里封 标签名 空格 指定后代标签{} 意思是所有该标签内所有的指定后代都选择
- 儿子选择器，head里style里封 标签名 > 指定的标签，意思是该标签的儿子级标签选择
- 毗邻选择器，head里style里封 标签名+（+要打） 紧挨着的标签，意思是该标签紧挨着的选中，必须贴贴着的！
- 弟弟选择器，head里style里封 标签名~ 指定的标签名 ,意思是该标签之后同级别的某标签都选中
3.分组与嵌套
- 多选用逗号排一起即可
- 符号# 也可用上 注意，紧挨着是修饰左边的符号，如果有空格是找左边的里面的标签！！！！！！！！！
- 标签.类名，选中该标签以及后同级的有该类名的标签
- .类 标签.类 选中某类中带有某类的标签
4.属性选择器
所有标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
- 默认属性：
idclass - 自定义属性：
x=1y=2
1.查找属性名含有name的标签
# head里封
[name] {
background-color:red;
}
2.查找属性名含有那么 并且值是username的标签
# head里封
[name='username'] {
background-color:blue;
}
3.查找div标签并且 属性名含有name值是username的
# head里封
div[name='username'] {
background-color:aqua;
}
5.伪类选择器
a标签 默认的颜色有两种 紫色跟蓝色
紫色：链接地址已经被点过了
蓝色：链接地址从来没有点击过
a:hover { # 鼠标悬浮上去 之后样式改变 适用于所有含有文本的标签
color: blue;
}
a：link { # 没点击的颜色
color:red
}
a:visited { # 点击过后的颜色
color:yellow
}
a:active { # 按住的颜色
color:orange
}
# 获取焦点，被点击的，看我看我看我的意思
input.c888:focus { # 这里是根据类标签选择的
background-color: red;
}
6.伪元素选择器
# 能控制文本的第一个字大小
p:first-letter {
font-size: 500px;
}
# 能以CSS渲染的形式填充文字，防止被爬（一定程度上）
p:before/after {
content:'真的假的';
color: aquamarine;
}
- 补充：如何禁止页面用f12，禁止右击，禁止复制粘贴
https://www.jianshu.com/p/1a7ec4bc2576
7.选择器优先级问题
- 相同类型选择器
就近原则，就便签，HTML代码从上到下执行，head中后执行的更靠近标签
- 不同选择器
内联样式 > id选择器 > 类选择器 > 标签选择器
一句话理解：谁更精准，按谁的来
四、CSS样式调节
1.调字体
# head里封style里封
#调字体大小
p {
font-size: 50px;
}
——————————————————————————
# 调字体粗细
p {
font-weight:xxx # xxx可选bold 粗 bolder更粗 lighter更细等
}
# 调字体颜色
p {
color:xxx # pycharm也可以选
color:rgb(xxx,xxx,xxx) # 微信截图也显示三基色
color:rgba(xxx,xxx,xxx,透明度值%)
}
——————————————————————————
# 居中显示
p {
text-align: center;
}
————————————————————————————
# 取消或者加上下划线 常用于a标签的下划线取消，或者其他的线
text-decoration: underline; # 加上在脚下的线
text-decoration: none; # 取消
text-decoration: overline # 加上文本上的线，在头上】
text-decoration: line-through # 加上穿过文本的线，类似叛忍
—————————————————————————————
# 首行缩进
p {
text-indent: 32px; 字标签 默认16px 这里首行缩进两字符
}
# 设置背景颜色
body {
background-color: #b7b6b6;
}
___________________________
# 设置图片为背景
div {
height:1000px; /*调整块 高度*/
width: 1000px; /*调整长度*/
background-color: /*填充颜色*/
background-image: url("图片地址" );
background-repeat: 填充的方法 repeat-英文意思重复
background-position: 啥啥啥px 啥啥啥px /* 图片 微调漂移
支持background（写在一起）
}