1.HTML5新增语义化标签
-
< header>:头部标签
-
< nav>:导航标签
-
< article>:内容标签
-
< section>:定义文档某个区域
-
< aside>:侧边栏标签
-
< footer>:尾部标签
2.视频< video>
<video src="文件地址" controls="controls"></video>
3.音频标签< audio>
4.HTML新增的 input 类型
- 重点记住:number tel search
HTML新增表单属性
5.CSS3新增属性选择器
属性选择器可以根据元素特定属性来选择元素
input[value] {
color : pink;
}
input[type=text] {
color : pink;
}
div[class^=icon]{
color : red;
}
div[class$=data] {
color : blue;
}
6.结构伪类选择器
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字,关键字和公式
- n 可以是关键字 : even偶数 , add奇数
- n 可以是公式 :如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略
7.伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
- befor 和 after创建一个元素,但是是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以称为伪元素
- 语法: element::before{ }
- before 和 after 必须有 content 属性
- 伪元素选择器 和 标签选择器一样,权重为1
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
content: "我";
}
div::after {
content: "Zedking";
}
</style>
<body>
<div>是</div>
</body>
8.伪元素清除浮动
.clearfix:after{ //生成一个新的盒子放在浮动元素后面
content:""; //伪元素必须的属性
display:block; //插入的元素必须是块级
height:0;
clear:both; //核心代码清除浮动
visibility:hidden; //不要看见这个元素
}
9.CSS3盒子模型
CSS中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box 、 border-box,这样我们计算盒子大小的方式就发生了改变
- box-sizing:content-box 盒子大小为 width + padding + border (以前默认的)
- box-sizing:border-box 盒子大小为width
如果盒子模型我们改为了box-sizing:border-box , 那 padding 和 border 就不会撑大盒子了
10.CSS过渡
transition:要过渡的属性 花费时间 运动曲线 何时开始;
transition: width 0.5s, height 0.5s;
10.CSS过渡
transition:要过渡的属性 花费时间 运动曲线 何时开始;
transition: width 0.5s, height 0.5s;