html5和c3属性,H5与C3不得不说的知识点

1 HTML 5

html5包含htm5 + css3 + javascript

1.1 新增语义标签

头部

导航栏

块级

内容

侧边栏

脚部

注意：可以多次使用；ie9中需要转换为块级元素；针对搜索引擎；针对于移动端；

1.2 新增多媒体标签

1.2.1 音频标签 audio

格式：ogg.mp3.

浏览器版本太低，不支持本音频，请升级浏览器！

属性：

controls:显示播放按钮

loop:loop 循环

autoplay:autoplay:自动播放 谷歌禁用了该功能

src:音频url

不同浏览器支持的格式不同，采取方案是为音频准备多个格式

1.2.2 视频模式 video

格式：ogg,mp4,webm

你的浏览器版本太低，请升级浏览器

属性：

src:视频的url

controls:显示播放控件

autoplay:自动播放

muted:静音播放 解决谷歌自动播放问题

loop:循环

poster:加载等待时显示的内容

1.3 新增的表单标签 表单属性

1.邮箱

2.网址

3.日期

4.time month week

5. 数字

6.手机号码

7.搜索框

8.颜色选择表单

属性：

1. required 内容不能为空

2. placeholder="请输入内容" 提示文字 占位符

3. autofocus 自动定位光标

4.multiple:多文件提交

5.autocomplete:on off 默认打开 默认提示输入过的内容 必须有name属性 成功提交过

2 CSS3

2.1 新增css3选择器

2.1.1 css3属性选择器

button[disabled]{

cursor:pointer;

}

/*标签[属性名]{

} 属性选择器 类选择器 伪类选择器权重 0010

标签[属性名="属性值"]{

}

标签[属性名^="val"]{

以val开头的

}

标签[属性名$="val"]{

以val结尾的

}

标签名[属性名*="val"]{

包含val的

}*/

2.1.2 css3结构伪类选择器

E:first-child 匹配第一个子元E

E:last-child 匹配最后一个子元素E

E:nth-child(n) 匹配父元素中的第n个子元素 不管子元素的类型

n可以是数字 公式 关键字 even 偶数 odd 奇数 如果公式，n从0开始计算

2n:偶数

2n+1:奇数

5n:5 10 15

n+5:从第5个开始

-n+5:前5个 包含第5个

注意：0和超过的不显示

E:first-of-type 指定类型的第一个

E:last-of-type 指定类型的最后一个

E:nth-of-type(n) 指定类型的第n个

2.1.2 伪元素选择器 权重为0001

div{

width：20px;

height:20px;

border:1px solid red;

}

div::before{

content:'我'；/*内容的前面 是inline 改 inline-block*/

}

div::after{

content:"你"; /*内容的后面*/

}

2.2 转换

2.2.1 2D转换

转换transform:转换就是变形。

2.2.1.1 平移 translate

1.移动 translate

div{

width:100px;

height；100px;

transform:translate(100px,100px); /*水平移动100px 垂直移动100px*/

}

/*注意：不会影响其他盒子的位置

translate对于行内元素是无效的*/

/*实现垂直居中*/

div{

width:500px;

height:500px;

background:pink;

position:relative;

}

p{

width:200px;

height:200px;

background:blue;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%); /* 跟%是相对于盒子自身来说的*/

}

2.2.1.2 旋转 rotate

div{

transform:rotate(40deg); /*负值就是逆时针旋转*/

transform-origin:left bottom;/* 默认50% 50% = center center 也可以是像素 */

}

2.2.1.3 缩放 scale

div{

transform:scale(2,1); x,y

/*等比例缩放：*/

transform:scale(2);

/*进行缩小 小于1*/

transform:scale(0.4);

}

优势：

不会影响其他盒子，而且可以设置缩放中心点

2.2.1.4 综合写法

div{

transform:translate() rotate() scale()；

/*位移和其他属性一起写，位移必须放在最前面；*/

}

3.动画

animation:动画

使用：1.先定义动画 2.再使用动画

div{

width:200px;

height:200px;

background:yellow;

animation-name:move;

animation-duration:5s;

animation-timing-function:ease;/*ease-in; ease-out; 速度曲线*/

animation-delay:1s;/* 延长时间*/

animation-iteration-count:infinite; /*重复次数*/

animation-direction:normal; /*alternate; 是否反方向播放*/

animation-fill-mode:backwards;/* forwards; 结束时的状态*/

animation-play-sate:paused;/* running 控制动画停止或者播放*/

/*animation:名称 时间 曲线 开始时间 播放次数 是否反向 动画起始或者结束状态*/

}

@keyframs move{

0% from{

transform:translateX(0px);

}

100% to{

transform:translateX(1000px);

}

}

4. 3D转换

3d:近大远小

1、3d位移

body{

perspective: 500px; /*透视；让网页中产生透视效果; 透视写在被观察的父盒子上*/

}

div{

transform:translateX() translateY() translateZ();

transform:translate3d(); /*x,y,z 不能省略，没有直接写0 */

}

2、3d旋转 rotate3d();

div{

transform:rotateX();

transform:rotateY();

transform:rotateZ();

transform:rotate3d(x,y,z,deg);

transform:rotate3d(1,0,0,45deg); /* 沿x轴旋转 */

}

3.transform-style 控制子元素是否开启3d

div{

transform-style:preserve-3d; /* 给父盒子添加 */

}

5. 浏览器的私有前缀

div{

-moz-:火狐

-ms-:ie

-webkit-:safari,chrome

-o-:Opera

-o-border-radius:10px;

}

6 补充

1. 线性渐变

背景渐变必须添加浏览器私有前缀；

默认是从上往下显示

div{

background:-webkit-linear-gradient(left,red,blue);

background:-webkit-linear-gradient(left top,red,blue); /*从左上角到右下 角进行渐变 */

}