html5与css3新特性
HTML5新特性
增加了一些新的标签、新的表单以及新的表单属性等
这些新特性都有兼容性问题,基本上IE9+以上版本浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性
新增语义化标签
- <header>:头部标签
- <nav>:导航标签
- <article>:内容标签
- <section>:定义文档某个区域
- <aside>:侧边栏标签
- <footer>:尾部标签
<details>
<summary>点击查看代码</summary>
注意:
- 这种语义化标签主要是针对搜索引擎的
- 这些新标签可以多次使用
- IE9中,需要把这些标签转化为块级元素
- 移动端常用
新增的多媒体标签
新媒体标签主要包含两个:
1. 音频:<audio>
2. 视频:<video>
使用他们不需要flash和其他浏览器插件即可嵌入视频或者音频
video目前支持三种视频格式,mp4,WebbM,Ogg,一般推荐mp4格式,兼容性好
<video src="地址" controls="controls"></video>
<video src="地址" controls="controls" width="300">
<source src="move.mp4" type="video/mp4">
<source src="move.ogg" type="video/ogg">
你的浏览器暂时不支持<video>标签播放视频
</video>
常见属性
- src: 图片地址
- autoplay=“autoplay" 视频就绪自动播放(谷歌浏览器禁用了自动播放)
muted="muted"静音播放,使用这个属性后谷歌浏览器也可以自动播放
- control="controls"播放控件(播放、暂停、静音)
- width: 100% 显示和浏览器一样宽
- height
- loop: 值为loop时循环播放,不写该属性则不循环
- preload: auto预先加载视频,none不加载视频,如果有了autoplay忽略该属性
- poster: 值imgurl,加载等待的图片画面(视频正在加载时显示的图片)
- muted: muted静音播放
一般不加controls,因为不同浏览器控件不同,后续可以用JS实现相同的控件
新增input表单
type值:
原有text、password、submit等
- email:
- url
- date
- time
- month
- week
- number
- tel 手机号码
- search 搜索框
- color 生成一个颜色选择表单
type="submit" value="提交"为提交按钮,提交时会对其他输入检测
number、tel、search最重要
HTML5新增的表单属性
- required="required" 表示不能为空,必须写
- placeholder="": 默认显示的内容,输入一些文字后会消失
还可以通过box::placeholder选择该属性并进行属性调整
- autofocus=“autofocus": 自动获取焦点
- autocomplete=off/on 记录上次提交过的内容,开始键入时显示以前输入过的
- multiple:multiple 用于多选文件
广义的H5
广义的HTML5指的是HTML5本身+CSS3+JavaScript,这个集合有时称为HTML5和朋友,将来HTML5是一种发展趋势
CSS3的现状
新增选择器和盒子模型和其他特性,ie9+才支持
新的选择器
属性选择器:
-
可以根据元素特定属性来选择元素,可以不用借助类或id选择
input[value] {color: pink;} 选择具有value属性的input
input[type="text"] 选择文本框的input(重要)
input[class^="icon"] 选择具有class属性且属性值为icon开头的元素
input[class$="-data"] 选择具有class属性且以-data为结尾的元素
input[class*="val"] 选择出具有class属性且包含val的元素
-
类选择器、属性选择器、伪类选择器权重为10
结构伪类选择器
-
主要根据文档结构选择器元素,常用与根据父级选择器里面的元素
E:first-child 选择父元素的第一个子元素
E:last-child 选择父元素的最后一个子元素
E:nth-child(n) 选择父元素的第n个子元素
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type 指定类型E的第n个
-
完整写法ul li:first-child ul
-
nth-child给所有孩子排序,先看第几个孩子,再判断是否符合要求如果第一个孩子不是li则选不出来结果,优先看第几个孩子
-
nth-of-type会把指定元素的孩子排列序号,优先看类型,再看第几个孩子
-
n可以是数字关键字或者公式; n可以是关键字:even偶数odd奇数;直接写n表示每次加1往后计算; 可以是公式:可以写2n(偶数),2n+1(奇数),5*n(一行显示5个时可以选择第五个去掉右边距),n+5(从第五个开始到最后),-n+5(前五个)
-
无序列表用nth-child更多
-
类选择器、属性选择器、伪类选择器权重为10
伪元素选择器
帮助我们利用css创建标签元素,而不需要HTML便签,从而简化HTML结构
CSS3时是两个冒号,CSS2前是单冒号
::before 在元素的内部的前面插入内容
::after 在元素的内部的后面插入内容
- before和after创建一个元素,但是是行内元素
- 装饰类的小图片可以用伪元素做,不需要插入新标签
- 新创建的元素在文档树中无法找到,所以称为伪元素
- before和after必须有content属性
- 伪元素选择器和标签选择器的权重一样为1,div::before权重为2
使用场景:
- 配合字体图标
content: '\e91e'
content: ''''
content: ''也可以
- 视频遮罩 .box::hover::before 鼠标经过时的before
- 伪元素清除浮动
CSS3盒子模型
CSS3可通过box-sizing指定盒模型,有两个值:即可指定为content-box、border-box,
- box-sizing: content-box 盒子大小为width+padding+border
- box-sizing: border-box盒子大小为width
这样使用padding和border就不会撑大盒子了(padding和border不要超过width)
经常在css开头*中加上border-sizing: border-box;
CSS其他特性
CSS3滤镜filter
可以将模糊或者颜色偏移等图形效果应用于元素
filter: 函数();
例如filter: blur(5px) 可以让图像模糊,数值越大,图像越模糊
CSS3 calc函数
width: calc(100% - 80px);
可以实现一些计算,可以实现比父盒子小多少像素
运算符前后要加空格
CSS过渡
过渡是CSS3具有颠覆性的特性之一,可以实现某些动画,经常与:hover一起使用
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性:想要变化的CSS属性,宽度高度背景颜色等
- 花费时间:单位是秒
- 运动曲线:默认是ease(渐慢) linear(匀速)
- 何时开始:单位是秒,最迟延迟触发时间,默认是0s
后两个属性可以省略
要同时改变两个属性,需要在类和类:hover中写变化前和变化后的属性值
transition: width .5s, height .5s
transition: all 0.5s
利用逗号分隔
背景颜色渐变
background: linear-gradient(起始方向,颜色1,颜色2,...)
电脑端使用尽量加上前缀-webkit- linear-gradient
起始方向包括top left, left, right等
转换
动画
2D转换
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
转换可以简单理解为变形
- 移动: translate
- 旋转:retate
- 缩放:scale
过渡效果是transition: all 0.3s;
translate
二维坐标系:向右向下为正
transform: translate(x,y)
transform: translateX(x)
transform: translateY(y)
- x是x轴上移动位置,y是y轴移动位置
- translate不会影响其他元素位置
- 百分比单位是相对自身元素的
- 对行内标签无效
- 在子盒子想要定位到父盒子中间时,可以定位top%50,left50%,然后translate(50%,50%)
rotate
transform: rotate(360deg)
- 可以用来实现小三角><朝上朝下(小正方形只要两个边框,旋转)
- 度数逆时针为正
转换中心点 transform-origin
默认为50 % 50%
transform-origin: x y;
x y可以是像素、百分比、方位名词
缩放scale
可以实现放大缩小
transform:scale(x,y);
transform:scale(x);
x,y表示倍数,1表示一倍,只写一个表示同时x倍
- 不会影响其他盒子,而且可以设置缩放中心点
- 缩放是向四周缩放的,比直接改宽高更适合做动画
综合写法
transform: translate() rotate() scale()
- 先旋转会改变坐标轴方向
- 先同时有位移和其他效果时,位移放在最前面
动画
可以通过设置多个节点来精确控制一个或者一组动画,实现复杂的动画效果
- 先定义动画
- 再调用动画
用keyframes定义动画
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
使用的元素 {
animation-name: move;
animation-duration: 2s;
}
- from to等同于0%,100%
- 可以做多个状态的变化,百分比要是正数,100%的时候是总时间
动画属性
- animation: 动画属性的简写属性
- animation-name: 动画名字
- animation-duration: 持续时间
- animation-timing-function: 规定动画的速度曲线,默认是'ease'
- animation-delay: 规定动画何时开始,单位是秒
- animation-iteration-count: 规定动画被播放的次数infinite表示无限循环
- animation-direction: 规定动画
- animation-direction: 默认是normal反方向是alternate
- animation-play-state: 规定动画是否正在运行或者暂停,默认是running,pause
- animation-fill-mode: 规定动画结束后状态,保持forwards回到起始backwards
简写
annimation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
annimation: myfirst 5s linear 2s infinite alternate;
前两个不能省略
速度曲线细节
animation-timing-function:
- linear 匀速
- ease 低-->高-->低
- ease-in 低速开始
- ease-out 低速结束
- ease-in-out 低速开始和结束
- steps()指定了时间函数中的间隔数量(步长),相当于一步一步走,离散化
--可以通过设定一个盒子,装n个字,宽度为n个字的宽度,并且分n步,设定一行显示和溢出隐藏,即可实现打字机效果
动画实例
body {
background-color: rgb(163, 151, 229);
}
div {
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
background: url(bear.png) no-repeat;
animation: run 1s steps(8) infinite, move 3s forwards;
}
@keyframes run {
0% {
background-position: 0 0;
/* transform: translate(0, 0); */
}
100% {
background-position: -1600px 0;
/* transform: translate(-1400px, 0); */
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
3D变换
x水平向右y垂直向下z垂直屏幕(往外是正值,往内是负值)
3D位移
translateZ沿着z轴运动,后面的单位一般跟px
translate3d(100px,100px,100px) 不能省略x,y,z,如果没有就写0
z轴值越大,我们看到的物体越大
透视perspective
网页中产生3D效果需要透视,透视也称为视距(人的眼睛到屏幕的距离),透视的单位是像素
透视要加在父亲上
perspective: 500px;
3D旋转rotate
transform: rotate3d(x,y,z,deg):沿着自定义轴旋转deg
(x,y,z)可以表示轴的方向
transformX:
transformY:
transformZ:
左手准则,大拇指指向x正向,则四指指向翻转方向
3D呈现transform-style
- 控制子元素是否开启三维立体空间
- 默认flat不开启3D
- transform-style: preserve-3D子元素开启3D立体空间
- 代码写给父级,影响的是子盒子
实现双面盒子
- 两个盒子叠在一起放在一个父盒子里,先将背面盒子旋转180,再将父盒子旋转180,记得维持3D效果
- 多个transform记得放在一起
- 要让旋转轴在中间
实现旋转木马
- 先旋转后移动