html5与css3区别 html5和css3

HTML5与CSS3

• HTML5新特性

• HTML5新增语义化标签
• HTML新增多媒体标签

• < video >标签
• < audio >标签

• HTML5新增input类型
• HTML5新增表单的属性

• CSS3新特性

• CSS3现状
• CSS3新增选择器

• 属性选择器
• 结构伪类选择器
• 伪元素选择器（重点）
• CSS3盒子模型
• CSS3其他特性
• CCS3过渡（重点）
• 2D变化效果
• 3D变化效果

• 动画
• 3D转换
• 3D移动translate3d
• 3D旋转rotate3d
• 3D呈现transform-style
• 透视perspective
• 浏览器私有前缀

HTML5新特性

HTML5新增语义化标签

可布局成如图所示：

注意：

HTML新增多媒体标签

< video >标签

< audio >标签

语法格式：

<audio src="文件地址" controls="controls"> </audio>
//照顾兼容性
<audio controls="controls" >
	<source src="happy.mp3" type="audio/mpeg">
	<source src="happy.mp3" type="aydio/ogg">
	您的浏览器暂不支持<audio>标签。
</audio>

常见属性：

HTML5新增input类型

HTML5新增表单的属性

设置placeholder提示文字的颜色：

CSS3新特性

CSS3现状

CSS3新增选择器

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

属性选择器

结构伪类选择器

结构伪类选择器主要是根据文档结构来选择元素，常用于根据父级选择器里的子元素。

语法:

:nth-child(n)的相关应用:

nth-child(n)和nth-of-type(n)的区别:

<section>
	<p>光头强</p>
	<div>熊大</div>
	<div>熊二</div>
<section>
<style>
	section div:nth-child(1) {
		color: red;    //熊大和光头强是都不显示红色的，因为第一个是p标签，不与div匹配
	}
	section div:nth-of-type(1) {
		coloe: skyblue;  //熊大会显示天蓝色，执行顺序是先找到所有div，再找到第一个div来改变样式。
	}
</style>

小结:

伪元素选择器（重点）

注意:

语法:

element::before { ... };  //在element元素里的 最前面 添加伪元素
element::after { ... };  //在element元素里的 最后面 添加伪元素

CSS3盒子模型

CSS3其他特性

CCS3过渡（重点）

用法:

若有多个样式需要更改，可以用’ , ’ 分隔开来，或写all，例子如下：

2D变化效果

translate：

3D变化效果

动画

动画常见属性:

动画属性简写:

3D转换

三维坐标系:

3D移动translate3d

3D旋转rotate3d

判断正方向：

3D呈现transform-style

透视perspective

浏览器私有前缀