HTML01:

1.标签的分类

根据标签的格式分为:

单标签,例如 <meta charset='utf-8' />, <img src="" />

双标签,例如<p></p>  <h1></h1>

根据标签的特性分类:

块元素:

1.独占一行

2.可以设置宽高.

行元素:

1.多个行元素相邻,共占一行.

2.给行元素设置宽高,无效!!!!其宽高由内容撑起!!!

行级块元素:

1.既能跟其他行元素共行展示,还可以设置有效宽高!

2.个数较少,一般都是多媒体标签,例如图片标签,视频标签,音频标签等!!!

2.emmet(元素,标签)语法

标签名*n    n个标签

标签1+标签2    相邻兄弟关系

标签1>标签2    标签1是父标签,标签2是子标签

$          从1自增

标签名{}    给标签写入文本

()        提升优先级

HTML02：

1.css的三种引入方式

a.行间引入(不推荐使用)---->

<div style="background-color: pink;">

哈哈哈哈哈

</div>

b.内部引入---->

在head中,设置

<style type="text/css">

div{

height: 200px;

}

</style>

c.外部引入---->

定义xx.css文件,使用link,引入html文件中!!!

2.选择器

a.标签名选择器    直接写标签的名字,找的是本文档中所有的此标签.

b.id选择器    #box  #div1等,id不要重复

c.class选择器    .c1  .c2等

d.群组选择器      选择器名字, 选择器名字,...   

e.后代选择器      空格 例如:  #box  a{ } 

f.子代选择器      > 例如:  #box>a{ }

g.兄弟选择器    +  例如: div+p{}  找的是跟div相邻的p标签

h.伪类选择器    :hover  例如:  p:hover{}  一旦鼠标移入p标签上,会立马执行hover中的样式!!!

3.选择器的优先级(从高到低)

a. !important

b. id选择器

c. class选择器

c. 标签名选择器

4.nth-child和nth-of-type

区别:

nth-child  不能分类查找!!

nth-of-type  会先对要查找的标签进行筛选,然后再查找!!!

a.第一个

标签名:first-child{

}

标签名:first-of-type{

}

b.最后一个

标签名:last-child{

}

标签名:last-of-type{

}

c.某一个

标签名:nth-child(3){

}

标签名:nth-of-type(4){

}

d.奇数位置  2n+1/ 2n-1/  odd

标签名:nth-child(odd){

}

标签名:nth-of-type(odd{

}

e.偶数位置  2n  even

标签名:nth-child(2n){

}

标签名:nth-of-type(even){

}

f.任意倍数位置    3n/ 4n/ 5n 等....

标签名:nth-child(3n){

}

标签名:nth-of-type(4n){

}

HTML03:

1.盒模型

每一个标签都是一个盒模型;

包含:内容宽高+内填充padding+边框border+外间距margin

margin的问题:

问题1:

1.上下标签间隔取最大值!

2.左右排布的标签间隔要相加!!!!

问题2:

第一个子标签的margin-top 值会传递父标签,导致父标签位置变化.

阻断传递:

a.给父标签设置边框border

b.给父标签设置overflow:hidden;

建议:*****

不要给第一个子标签设置margin-top,可以改用给父标签设置padding-top(内填充)来设置父子标签之间的间隔!!!!!