1. HTML5新特性
HTML5的新特性主要针对以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本都是IE9以上版本才支持,如果不考虑兼容性问题,才可以使用这些新特性。
1.1 HTML5 新增的语义化标签
以前布局,基本都是用div来做。但是div对于搜索引擎来说,是没有语义的。
- <header>:头部标签
- <nav>:导航标签
- <section>:定义文档某个区域的标签
- <article>:内容标签
- <aside>:侧边栏标签
- <footer>:尾部标签
注意:
- 这些语义化标签主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中, 需要把这些元素转换为块级元素
- 这些标签更多地使用在移动端
- HTML5 还增加了很多其他的标签,这些只是较常用的。
1.2 HTML5新增的多媒体标签:
- 音频:<audio>:用于在文档中表示音频内容
-
<audio> 元素常见属性:
src:媒体的来源
controls:增加控制工具栏
autoplay:自动播放,但是存在兼容性问题
muted:静音
loop:循环播放
- 视频:<video>
-
<video>元素常见属性:
controls: controls 增加控制工具栏(加上controls属性,视频才会播放)
autoplay: autoplay 自动播放(谷歌浏览器禁用了自动播放功能,加了muted属性就可以自动播放了)
muted: muted 静音,增加后静音并且自动播放会生效
loop: loop 循环播放
preload: auto(预加载) none(不预加载) 规定是否预加载视频(如果有了autoplay 就忽略该属性)
src: url() 视频url地址
poster: imgurl() 加载等待的画面图片
width: px 设置播放器宽度
height: px 设置播放器高度
<video src="movies.mp4" controls autoplay muted loop> </video>
-
<source>元素:
如果存在兼容性问题,可以将多个视频格式的数据源放到source元素中
<video controls> <source src="... .mp4"> <source src="... .avi"> <source src="... .webm" </video>
1.3 HTML5 对 表单的扩展:
-
HTML5 新增的表单属性
- required :值 required 表示其内容不能为空
- placeholder:输入框的占位文字
- multiple:可以多选文件提交
- autofocus:自动聚焦
-
对于input的type值也有很多扩展
- url: URL类型
- date:日期类型
- time:时间类型
- month:月类型
- week:周类型
- number:数字类型
- tel:手机号码
- search:搜索框
- color:会显示一个取色板,可以选择颜色
- email:邮件类型
2. CSS3 新特性
2.1 CSS3 的现状
- 新增的CSS3特性有兼容性问题,ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
2.2 CSS3 新增选择器
CSS3新增了选择器, 可以更加便捷,更加自由的选择目标元素
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
1. 属性选择器
属性选择器可以根据元素特定的属性来选择元素。这样就不用借助于类或者id选择器。
input[value]
input[type=text]
E[att^="cal"]
匹配具有att属性且值以val开头的 E 元素
E[att$="val"]
匹配具有att属性且值以val结尾的 E 元素
E[att*="val"]
匹配具有att属性且值中含有val的 E 元素
注意:类选择器 属性选择器 伪类选择器 权重都为10
2. 结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择里面的子元素
E:first-child
匹配 父 元素中的第一个子元素 E
E:last-child
匹配 E 元素中的最后一个子元素
E:nth-child(n)
匹配 E 元素中的第n个子元素
ul li:first-child {...} /*选择ul里面的第一个li*/
ul li:last-child {...} /*选择ul里面的最后一个li*/
ul li:nth-child(n) {}/*选择ul里面的第n个li n可以是:
1. 数字 1,2,3...
2. 关键字(even偶数,odd奇数)
3. 公式:
n:选择所有
-n+5:选择前5个
*/
E:first-of-type
指定类型 E 第一个元素
E:last-of-type
指定类型 E 最后一个元素
E:nth-of-type(n)
指定类型 E 元素中的第n个
<style>
section div:nth-child(1) {...}/*谁都选不出 原因:nth-child会把所有的孩子都排列序号 本段代码执行的时候先找到第一个孩子p 但是p不是我们要找的div 所以选不出我们要找的元素*/
section div:nth-of-type(1){...}/*选出熊大 执行过程:先找到div然后选出第一个div*/
</style>
<body>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
3. 伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
::before
在元素内部的前面插入内容
::after
在元素内部的后面插入内容
注意:
- before 和 after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以称之为伪元素
- 语法:element::before{content: ’ '}
- before 和 after必须有content属性
- before 在父元素内容的前面创建元素, after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样, 权重为1
div::before {
content:'你好';/*content必须要写*/
width:14px;
heith:20px;
}
伪元素使用场景:
- 伪元素字体图标
- 伪元素清除浮动
.clearfix:after {
content:""; /* 伪元素必须写的属性 */
display: block; /* 插入的元素必须是块级 */
height:0; /* 不要看见这个元素 */
clear:both; /* 核心代码清除浮动 */
visibility:hidden; /* 不要看见这个元素 */
}
2.3 CSS3 过渡(重点)
过渡(transition) 是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变化为另一种样式时为元素添加效果。
过渡动画:是从一个状态 渐渐的过渡到另外一个状态
可以让我们的页面更好看,更动感十足,虽然低版本浏览器不支持(ie9一下版本) 但是不会影响页面布局。
经常和 :hover 一起搭配使用。
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性:想要变化的属性,宽度 高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以。
- 花费时间:单位是秒(必须写单位) 比如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位) 可以设置延迟触发时间 默认是0s(可以省略)
div {
width:200px;
height:100px;
background-color:pink;
/* transition:要过渡的属性 花费时间 运动曲线 何时开始*/
/*如果想写多个属性,利用逗号分割*/
/*如果想变化多个属性,可以使用 all*/
transtion:width 1s ease 1s,height .5s;
}
div:hover {
width:400px;
height:200px;
}
2.4 CSS3 2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
- 移动:translate
- 旋转:rotate
- 缩放:scale
2D转换是改变标签在二维平面上的位置和形状的一种技术。
1. 2D移动 translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
语法:
transform:translate(x,y);或者分开写:
transform:translateX(n);
transform:transateY(n);
div {
width:200px;
height:200px;
background-color:pink;
/* x就是x轴移动位置 y就是y轴移动位置 */
/* transform:translate(x,y) */
transform:translate(100px,100px);
/*1. 如果只移动x坐标*/
transform:translate(100px,0);/*y坐标不可省略*/
transform:translateX(100px);
/*2. 如果只移动y坐标*/
transform:translate(0,100px);/x坐标不可省略*/
transform:translateY(100px);
}
重点:
- 定义2D转化中的移动,沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate(50%,50%)
- 对行内标签没有效果
2. 2D旋转 rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。
语法:
transform:rotate(度数)
重点
- rotate里面跟度数,单位是deg比如rotate(45deg)
- 角度为正时,顺时针,为负时,逆时针
- 默认旋转的中心点是元素的中心点
3. 2D转换中心点 transform-origin
设置元素转换的中心点
语法
transform-origin: x y;
重点
- 注意后面参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y 设置像素 或者 方位名词 (top bottom left right center)
transform-origin: left bottom;/*转换点为左下角*/
4. 2D缩放 scale
只要给元素添加上了这个属性就能控制它放大还是缩小
语法:
transform:scale(x,y);
注意:
- 其中的x y 用逗号隔开
- transform:scale(1,1):宽和高都放大一倍,相对于没有放大
- transform:scale(2,2):宽和高都放大了2 倍
- transform:scale(2):只写一个参数,第二个参数则和第一个参数一样
- transform:scale(0.5,0.5):缩小
- scale缩放的最大优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
5. 2D转换的综合写法
注意:
- 同时使用多个转换,其格式为:transform:translate() rotate() scale()等
- 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
- 当同时有位移和其他属性的时候,记得要将位移放到最前面
2.5 CSS3 动画
动画(animation)是css3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果
1. 动画的基本使用
制作动画分为两步
- 先定义动画
- 再使用(调用)动画
用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
-
定义动画
动画序列:
- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式,任意多的次数
- 请用百分比来规定变化发生的时间,或用"from"和"to" ,等同于0%和100%(百分比是对总的时间的划分)
- 元素使用动画
例:
div {
width: 200px;
height:200px;
background-color: pink;
margin: 100px auto;
/* 调用动画 */
animation-name:动画名称;
/* 持续时间 */
animation-duration:持续时间;
}
2. 动画常用属性
@keyframes move {
0% {
transform:translate(0,0);
}
100% {
transform: translate(1000px,0);
}
}
div {
width:100px;
height:100px;
background-color:pink;
/* 动画名称(必写) */
animation-name:move;
/* 持续时间 (必写)*/
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function:ease;
/* 何时开始 */
animation-delay:1s;
/* 动画重复次数 默认为1 , infinite 无限循环 */
animation-iteration-count:infinite;
/* 是否反方向播放 默认normal alternate 反方向播放*/
animation-direction:alternate;
/* 动画结束后的状态 默认backwards 回到起始状态, 停在结束状态 forwards*/
animation-fill-mode:forwards;
}
div:hover {
/*鼠标经过div 动画停止 鼠标离开 继续动画*/
animation-play-state:paused
}
3. 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
- 简写属性里面不包含animation-play-state
- 暂停动画:animation-play-state: puased;经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是跳回来:animation-direction: altermate
- 盒子动画结束后,停在结束位置:animation-fill-mode: forwards
4. 速度曲线细节
div {
width:0;
height:30px;
background-color:pink;
/*steps 就是分几步来完成动画 有了steps 就不要写ease了*/
animation: w 4s steps(5) forwards;
}
@keyframes w {
0% {
width:0;
}
100% {
width:200px;
}
}
2.6 CSS3 3D转换
1. 三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
- x轴:水平向右 右边是正值,左边是负值
- y轴:垂直向下 下面是正值,上面是负值
- z轴:垂直屏幕 往外面是正值,往里面是负值
2. 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向
-
transform:translateX(100px);仅在x轴上移动
-
transform:translateY(100px);仅在y轴上移动
-
transform:translateZ(100px);仅在z轴上移动(注意:一般用px作为单位)
-
transform:translate3d(x,y,z);其中x,y,z分别指在x,y,z轴上移动的距离,不可省略,如果没有就写0
注意:z轴上的效果需要借助接下来的透视才能看到
3. 透视 perspective
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面
body {
perspective: 500px;
}
div {
width:200px;
height:200px;
background-color:pink;
transform:translate3d(100px,100px,100px)
}
4. 3D旋转 rotate3d
3D旋转可以让元素在三维平面内沿着x轴,y轴,z轴 或者自定义轴进行旋转。
- transform:rotateX(45deg):沿着x轴正方向旋转45度
- transform:rotateY(45deg):沿着y轴正方向旋转45度
- transform:rotateZ(45deg):沿着z轴正方向旋转45度
- transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可),例如transform:rotate3d(1,1,0,45deg): 这句代码表示的方向是x轴和y轴的矢量叠加
对于元素旋转的方向,借助左手准则
左手准则:
- 左手拇指指向x轴的正方向
- 其余手指的弯曲方向就是rotateX(deg)中deg取正值的旋转方向
5. 3D呈现 transfrom-style
- 控制子元素是否开启三维立体环境
- transform-style:flat 子元素不开启3d立体空间 默认值
- transform-style:preserve-3d; 子元素开启立体空间
- 代码写给父级 但是影响的是子盒子
- 这个属性很重要
2.7 CSS3 盒子模型
CSS3中可以通过box-sizing 来指定盒子模型,有2个值:即可指定为content-box 、 border-box
计算盒子大小的方式
- box-sizing: content-box; 盒子大小为width + padding + border(以前默认的)
- box-sizing: border-box; 盒子大小为width,即padding和border就不会撑大盒子了
2.8 CSS 其他特性(了解)
1. CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
filter:函数(); 例如:filter:blur(5px)
2. CSS3 calc 函数:
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% - 80px);可以让子盒子的宽度永远比父盒子少80px