form提交方式:
get :不安全的提交数据,高效
post:安全的提交数据,低效
不管是哪种提交方式,前台都可以给后台提交数据,后台一定会给前台一个反馈结果
label for循环
1.给input提供信息
2.通过for关联指定的input标签
如果想要换行,加<p></p>标签
如果加<br>,所有的都会并列在一行,无层次关系
选择器高级
选择器就是css与HTML标签建立起关系的桥梁,选择器高级其实讲的就是基础选择器的各种组合
(1)将字体的颜色全变为一个颜色
注意:不管是什么,先起类名,这样数据多的时候,就不会混乱
1.群组选择器
2.后代(子代)选择器
后代选择器:.div .p或body .div .p
后代不一定相邻,可以是父子或父孙;通常用这个
选择器是由内而外查询的,如果第一次查找没有,往外找,再没有,再找,直到找到为止,如果到最后也没有,就结束,说明这个选择器没有匹配到
子代选择器: .div.p
有父标签
优先级:在控制同一个标签的条件下
后代选择器起作用:控制一个标签,前方的都是修饰,增加优先级
高级选择器通过权重区别优先级(个数)
权重:权值之和
个数一样,后面的起作用,和标签出现的位置不相关,
比较顺序
id>class>标签
种类相同:比个数,
个数相同,比顺序
高级选择器种类不影响优先级
3.兄弟相邻选择器
控制一个标签,前方的都是修饰
兄弟选择器 .p6~ .i1
可相邻也可以不相邻,但必须通过上方修饰下方
相邻选择器 .div5 + .i1
必须相邻,但必须通过上方修饰下方
优先级 根据权重
伪类选择器
:nth-child()
:nth-of-type()
有:就是伪类选择器
1.()内填的是编号,所以从1开始
伪类选择器可以单独出现,相当于省略了统配
2.:nth-child
先匹配层级位置,再匹配标签
3.:nth-of-type
先匹配标签类型,再匹配(层级)位置
结构层次都是同一类型,优先选择:nth-child
如果结构类型不一样,优选nth-of-type
a标签的四大伪类
1.链接时的初始状态
a:link{}
2.链接的悬浮状态
a:hover{}
3.链接的激活状态
a:active{}
4.链接的已访问状态
a:visited{}
普通标签可以使用:hover active
文本样式
字体库:
font-family
字体大小 最小12px，还需要更小就更换字体库
font-size
字重 100~900 bold normal lighter
font-weight
字体颜色
font-color
水平位置 left center right
line-height
文本划线 underline line-through overline none
text-decoration
font-style
<i>标签字体自带斜体
背景样式
background-color
背景图片
background-image:url(链接)
平铺 no-repeat repeat repeat-x repeat-y
background-repeat
背景定位 x轴(left center right) y轴(top center默认 bottom)
background-position 默认值 right top:右上
指定尺寸移动 right top
background-position 100px
反向移动 正向下 负向上
background-position 10px -10px
边界圆角
左上是第一个角,顺时针编号,不足就找对角
只有一个角时,同时控制着四个角,
border-radius :10px
border-radius : 10px 20px 30px 40px
横向/纵向
border-radius : 10px 20px 30px 40px/10px 20px 30px 40px
border-radius : 10px / 20px
显示方式
block 1.可以手动设置 2.自动换行 3.支持所有的css样式
inline 1.宽高只能由文本内容撑开,不能手动设置 2.不带换行 3.支持部分css样式
inline-block 1.可以手动设置宽高 2.不带换行 3.支持所有css样式
嵌套关系
block
可以嵌套block、inline、inline-block
div、li搭架构的，可以任意嵌套 h1~h6、p 建议只嵌套inline，就是用来转文本的
inline：只用来嵌套inline
span、i、b、em、strong a一般都会修改其display为block
inline-block：不建议嵌套任何
img input系统都设计成了单标签
none：没有显示方式，就会在页面中隐藏
开发是：修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
display: block;
100px;
height: 100px;
background-color: red;
}
span {
display: inline;
100px;
height: 100px;
background-color: orange;
}
owen {
display: inline-block;
100px;
height: 100px;
background-color: pink;
}
</style>
<style>
a {
display: block;
100px;
/*height: 100px;*/
/*透明色：transparent*/
background-color: brown;
border: 1px solid black;
}
img {
100px;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!--div{divdivdiv}*2+span{spanspanspan}*2-->
<div>divdivdiv</div>
<div>divdivdiv</div>
<span>spanspanspan</span>
<span>spanspanspan</span>
<owen>owenowenowen</owen>
<owen>owenowenowen</owen>
<a href="https://www.baidu.com">
<img src="img/bd_logo.png" alt="">
<p>前往百度</p>
</a>
</body>
</html>
block的显示规则
不同的标签在页面中有不同的显示规则
如有些是自带换行、有些同行显示、有些同行显示还支持宽高，这些不是标签的特性，而是标签的display属性值决定的
完成复杂的布局和样式，标签的显示方式都采用 block
a {
display: block;
}
a可以任意嵌套其他标签，还可以设置宽高，还支持所有css样式，但是a不再同行显示了(block自带换行)
如果解决block同行显示 => css布局
*/
/*
inline: 同行显示，不用去关宽高，不用额外操作
inline-block: 同行显示, 一般会主动设置宽或高、设置宽，高会等比缩放，反之亦然
有inline特性的标签，同行显示，但是有默认垂直对其方式vertical-align
*/
/*
block：默认显示规则
宽继承父级，高由内容撑开
overflow 属性
1.规定了标签的宽高,标签的内容超出范围
2.规定了标签的宽高,标签内的字标签显示区域大,超出范围
如果让父级宽高限制内容和子集
.box {
200px;
height: 200px;
background-color: orange;
overflow: scroll;
}
内容超出，都会以 hidden 处理影藏，如果想显示全内容，采用子页面
hidden：影藏超出内容 scroll：以滚动显示超出内容 auto：有超出内容才滚动显示
盒模型
什么是盒模型：页面中的每一个标签都可以称之为一个盒子
盒子的组成并发：外边距、边框、内边距、内容四部分组成，每部分都有独立区域
外边距 - margin - 控制位置
边框 - border - 控制边框
内边距 - padding - 控制内容与边框的间距
内容 - content(width*height) - 文本内容或子标签显示的区域
.box {
上右下左
当要保证显示区域不变，内容往里偏移，增加padding、相应减少content
padding: 20px 0 0 20px;
180px;
height: 180px;
.box {
border边框：宽度 、 样式 solid实现 dashed虚线 dotted点状线、 颜色
border: 10px dotted black;
}
margin参考系：自身原有位置
margin的left和top控制自身位置
margin的right和bottom控制兄弟位置
盒模型布局的地位：盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调*/
.abc {
上右下左
margin: 10px 20px 30px 40px;
快速居右
margin-left: auto;
快速居中
margin-left: auto;
margin-right: auto;
margin: 0 auto;
浮动布局
浮动布局：不再撑开父级高度，但浮动受父级宽度影响
.d {
float: right;
}
如何让父级刚刚好包含所有子标签：清浮动 - 不是清除子标签的浮动效果，而是让父级获得一个刚好的高度
.wrap:after {
display: block;
content: "";
清浮动的关键
clear: both;
}