学习目标:
- html5的新特性
- CSS3的新特性
学习内容:
1.html5的新增特性
主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,都是IE9+以上版本的浏览器才支持
1.1 html5新增的语义化标签
<header></header> 头部标签
<nav></nav> 导航标签
<article></article> 内容标签
<section></section> 定义文档某个区域
<aside></aside> 侧边栏标签
<footer></footer> 尾部标签
注意 :
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中,需要把这些元素转化为块级元素
- 移动端更喜欢使用这些标签
1.2 html5 新增的多媒体标签
(1)音频:audio
(2)视频:video
使用它们可以在网页中嵌入视频和音频,可以不使用flash
1.视频 video
当前video元素只支持三种视频格式:MP4(尽量使用)\WebM\Ogg
语法:
<video src="文件地址" controls="controls"></video>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频自动播放(谷歌浏览器需要再添加muted属性) |
controls | controls | 向用户显示播放控件 |
width | px | 设置播放器宽度 |
height | px | 设置播放器高度 |
loop | loop | 循环播放 |
preload | auto(预先加载视频) none(不预加载视频) | 规定是否预加载视频(如果有autoplay属性,忽略该属性) |
src | url | 视频地址 |
poster | imgurl | 预览图 |
muter | muter | 静音播放 |
2. 音频标签 audio
目前audio元素支持三种音频格式:MP3(尽量使用)/Wav/Ogg
语法:
<audio src="文件地址" controls="controls"></audio>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 音频就绪后马上播放 |
controls | controls | 向用户显示控件,比如播放按钮 |
loop | loop | 循环播放 |
src | url | 音频的url |
谷歌浏览器禁用自动播放
1.3 html5 新增的input类型
属性值 | 说明 |
---|---|
type=“email” | 必须为邮件类型 |
type=“url” | 必须为URL类型 |
type=“date” | 必须为日期类型 |
type=“time” | 必须为时间类型 |
type=“month” | 必须为月类型 |
type=“week” | 必须为周类型 |
type=“number” | 必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
- 重点记住:number tel search
1.4 html5 新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofoces | autofoces | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认打开,如autocomplete=“on”,autocomplete="off"需要放在表单内,同时加上name属性,同时成功提交。 |
multiple | multiple | 可以多选文件提交 |
2. CSS3新特性
有兼容性问题,IE9+才支持,应用相对广泛,移动端支持优于PC端
2.1 属性选择器
属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者id选择器
选择符 | 简介 |
---|---|
E[att] | 选择具有att属性的E元素 |
E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
E[att^=“val”] | 匹配具有att属性且值以val开头的E元素 |
E[att$=“val”] | 匹配具有att属性且值以val结尾的E元素 |
E[att*=“val”] | 匹配具有att属性且值中含有val的E元素 |
注意: 类选择器、属性选择器、伪类选择器、权重都为10
2.2 结构伪类选择器
主要根据文档结构来选择元素
选择符 | 描述 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E中的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
nth-child(n)
- n可以是数字、关键字、公式
- n如果是数字,就是选择第n个子元素,里面数字从1开始…
- n可以是关键字:even 偶数,odd 奇数
- n可以是公式:n=0,n++,常见公式如下:
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5…10…15 |
n+5 | 从第五个到最后一个 |
-n+5 | 前五个 |
区别:
1. nth-child(n) 会把所有孩子都排列序号
div:nth-child(1) 先选出第一个盒子,然后匹配前面标签类型,匹配成功选中,不成功则不选中
2. nth-of-type(n) 会把指定标签的盒子排列序号
div:nth-of-type(1) 先选出前面标签类型,然后给标签排序,选中指定的序号
2.3 伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化html结构。
选择符 | 描述 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- before和after创建一个元素,但是属于行内块元素
- 新创建的在这个元素在文档树中是找不到的
- 语法:element::after{}
- before和after属性必须有content属性
- before在父元素内容的前面创建元素,after在父元素内容的后面创建元素
- 伪元素选择器和标签选择器一样,权重为1
使用场景:
1.伪元素字体图标
2.黑色半透明遮罩层
3.伪元素清除浮动
2.4 CSS3 盒子模型
CSS3可以通过box-sizing来指定盒模型,有两个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
1、box-sizing:content-box 盒子大小为width+padding+boeder(默认)
2、box-sizing:border-box 盒子大小为width
2.5 CSS3 其他特性
1.图片模糊
CSS3滤镜filter:
filter CSS属性将模糊或者颜色偏移等图形效果应用于元素。
filter:函数();例如:filter:blur(5px);模糊
2.计算盒子宽度width:calc函数
calc()此CSS函数让你在声明CSS属性值时执行一些计算
width:calc(100%-80px);
2.6 CSS 过渡(重点)
过渡动画:是从一个状态到另一个状态的过程,常搭配:hover使用
谁做过渡加给谁
transition:要过渡的属性 花费时间 运动曲线 何时开始;
1. 属性:想要变化的CSS属性,宽度高度 背景颜色 内外边距都可以,如果想要所有属性都改变,写all
2. 花费时间:单位时秒(必须写单位)
3. 运动曲线:默认是eaes(可以省略)
4. 何时开始:单位是s可以设置延迟触发时间,默认是0s(可以省略)
2.7 CSS3 2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
- 移动:transform
- 旋转:rotate
- 缩放:scale
2.7.1 2D 转换
1.translate 移动:改变元素在页面中的位置,类似定位
语法:
transform: translate(x,y);
或者:
transform: translateX();
transform: translatY();
重点
- 定义2D转换中的移动,沿x,y轴移动元素
- 最大优点:不影响别的元素
- translate中的百分比单位是相对于自身元素的
- 对行内元素没有效果
2. 旋转 rotate
语法:
transform: rotate(度数)
重点:
- rotate中度数单位:deg
- 角度为正顺时针,角度为负逆时针
- 旋转的中心点默认为元素的中心点
2.1 2D转换 设置旋转中心点 transform-origin
语法:
transform-origin:x y;
重点
- 参数x和y用空格隔开
- x y 默认转换的中心是元素的中心点
- 可以给x y设置像素或者方位名词(top bottom left right center)
3. 2D转换——缩放scale
语法:
transform:scale(x,y)
注意:
- x和y逗号隔开,不加单位
- transform:scale(1,1):放大一倍,相当于没有放大
- transform:scale(2,2):放大2倍
- transform:scale(2):宽和高都放大2倍,与scale(2,2)效果一样
- transform(0.5):缩小
- 优点:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
4. 2D转换 综合写法
注意:
- 同时使用多个转换时:
transform: translate() rotate() scale()....等
- 顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 同时有位移和其他属性时,记得要将位移放在最前面
2.8 CSS 动画
相对于过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
2.8.1 动画的基本使用
1.用@keyframes 定义动画
@keyframes 动画名称 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
2. 元素使用动画
div {
width: 200px;
height: 200px;
background-color: pink;
animation-name: 动画名称;
animation-duration: 持续时间;
}
3.动画序列
- 动画可以改变任意多样式任意多次数
- 可以用from和to代替0%和100%
2.8.2 动画的常用属性
属性 | 描述 |
---|---|
animation | 所有动画属性的简写属性,除了animation-play-state |
animation-name | 动画名称 |
animation-duration | 一个周期的时间 |
animation-timing-function | 速度曲线,默认“ease” |
animation-delay | 何时开始,默认0 |
animation-iteration-count | 播放次数,默认是1,“infinite”循环播放 |
animation-direction | 逆向播放,默认是“normal”不逆向播放,逆向播放“alternate” |
animation-play-state | 运行或暂停,默认“running”,“paused”暂停 |
animation-fill-mode | 结束后状态,保持“forward”,回到起始“backward” |
2.8.3 动画属性简写
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
2.8.4 速度曲线细节
animation-timing-function
值 | 描述 |
---|---|
linear | 匀速 |
ease | 加速-减速 |
ease-in | 低速开始 |
ease-out | 低速结束 |
ease-in-out | 低速开始和结束 |
steps() | 时间函数中的间隔数量(步长) |
2.9 CSS 3D转换
2.9.1 三维坐标系
- x,右正左负
- y,下正上负
- z,外正里负
2.9.2 3D移动 translate3d
transform: translateX();
transform: translateY();
transform: translateZ();一般用px单位
transform: translate3d(x,y,z);
2.9.3 透视 perspective
- 如果想要在网页产生3D效果需要透视
- 模拟人类的视觉位置
- 也称视距,眼睛到屏幕的距离
- 距离视觉点越近在电脑平面成像越大,越远越小
- 单位是像素
透视写在被观察元素的父盒子上
d:视距
z:就是z轴
2.9.4 3D旋转 rotate3d
transform: rotateX();
transform: rotateY();
transform: rotateZ();
2.9.5 3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- 默认:flat 不开启
- preserve-3d:开启
- 代码写给父级,影响子元素
2.10 浏览器私有前缀
为了兼容老版本的写法
1.私有前缀
- -moz-:代表Firefox浏览器私有属性
- -ms-:代表ie浏览器私有属性
- -webkit-:代表safari、chrome私有属性
- -o-:代表opera私有属性