H5C3

HTML5 的概念与定义

定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

- HTML5 拓展了哪些内容

语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成

HTML5 新增标签

新增了语义化标签

header — 头部标签

nav — 导航标签

article — 内容标签

section — 块级标签

aside — 侧边栏标签

footer — 尾部标签 语义化标签注意:

语义化标签主要针对搜索引擎

新标签可以使用一次或者多次

在 IE9 浏览器中，需要把语义化标签都转换为块级元素

语义化标签，在移动端支持比较好，

多媒体音频标签

多媒体标签有两个，分别是 音频 – audio视频 – video audio 标签说明 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，但是：播放格式是有限的 audio 支持的音频格式 audio 目前支持三种格式

audio 的参数

<body> <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 --> <!-- <audio src="./media/snow.mp3" controls autoplay></audio> --> <!-- 因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件 --> <audio controls> <source src="./media/snow.mp3" type="audio/mpeg" /> <source src="./media/snow.ogg" type="audio/ogg" /> //不支持mp3就播放下一个 </audio> </body>

多媒体视频标签

video 视频标签 目前支持三种格式 video 参数 <body> <!-- <video src="./media/video.mp4" controls="controls"></video> --> <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 --> <video controls="controls" autoplay muted loop poster="./media/pig.jpg"> <source src="./media/video.mp4" type="video/mp4"> <source src="./media/video.ogg" type="video/ogg"> </video> </body>

多媒体标签总结

音频标签与视频标签使用基本一致多媒体标签在不同浏览器下情况不同，存在兼容性问题谷歌浏览器把音频和视频标签的自动播放都禁止了谷歌浏览器中视频添加 muted 标签可以自己播放

新增 input 标签

新增表单属性

CSS3 属性选择器

CSS3 发展现状

移动端支持优于 PC 端CSS3 目前还草案，在不断改进中CSS3 相对 H5，应用非常广泛

属性选择器列表

button { cursor: pointer; } button[disabled] { cursor: default } input[type=search] { color: skyblue; } span[class^=black] { color: lightgreen; } span[class$=black] { color: lightsalmon; } span[class*=black] { color: lightseagreen; }

结构伪类选择器

ul li:first-child { background-color: lightseagreen; } ul li:last-child { background-color: lightcoral; } ul li:nth-child(3) { background-color: aqua; }

nth-child 详解

注意：本质上就是选中第几个子元素n 可以是数字、关键字、公式n 如果是数字，就是选中第几个常见的关键字有 even 偶数、odd 奇数常见的公式如下(如果 n 是公式，则从 0 开始计算)但是第 0 个元素或者超出了元素的个数会被忽略 <style> /* 偶数 */ ul li:nth-child(even) { background-color: aquamarine; } /* 奇数 */ ul li:nth-child(odd) { background-color: blueviolet; } /*n 是公式，从 0 开始计算 */ ul li:nth-child(n) { background-color: lightcoral; } /* 偶数 */ ul li:nth-child(2n) { background-color: lightskyblue; } /* 奇数 */ ul li:nth-child(2n + 1) { background-color: lightsalmon; } /* 选择第 0 5 10 15, 应该怎么选 */ ul li:nth-child(5n) { background-color: orangered; } /* n + 5 就是从第5个开始往后选择 */ ul li:nth-child(n + 5) { background-color: peru; } /* -n + 5 前五个 */ ul li:nth-child(-n + 5) { background-color: tan; } </style>

伪元素选择器

伪类选择器注意事项

before 和 after 必须有 content 属性before 在内容前面，after 在内容后面before 和 after 创建的是一个元素，但是属于行内元素创建出来的元素在 Dom 中查找不到，所以称为伪元素伪元素和标签选择器一样，权重为 1 <style> div { width: 100px; height: 100px; border: 1px solid lightcoral; } div::after, div::before { width: 20px; height: 50px; text-align: center; display: inline-block; } div::after { content: '德'; background-color: lightskyblue; } div::before { content: '道'; background-color: mediumaquamarine; } </style>

伪元素的案例

```css p { width: 220px; height: 22px; border: 1px solid lightseagreen; margin: 60px; position: relative; } p::after { content: '\ea50'; font-family: 'icomoon'; position: absolute; top: -1px; right: 10px; }

2D 转换之 translate

注意动画效果要写过渡：谁做动画给谁加

transition：all 0.3s 2D 转换是改变标签在二维平面上的位置和形状移动： translate旋转： rotate缩放： scaletranslate 语法 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) x 就是 x 轴上水平移动y 就是 y 轴上水平移动 注意：2D 的移动主要是指 水平、垂直方向上的移动translate 最大的优点就是不影响其他元素的位置translate 中的100%单位，是相对于本身的宽度和高度来进行计算的行内标签没有效果 div { background-color: lightseagreen; width: 200px; height: 100px; /* 平移 */ /* 水平垂直移动 100px */ /* transform: translate(100px, 100px); */ /* 水平移动 100px */ /* transform: translate(100px, 0) */ /* 垂直移动 100px */ /* transform: translate(0, 100px) */ /* 水平移动 100px */ /* transform: translateX(100px); */ /* 垂直移动 100px */ transform: translateY(100px) }

盒子居中案例

div { position: relative; width: 500px; height: 500px; background-color: pink; /* 1. 我们tranlate里面的参数是可以用 % */ /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */ /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */ /* transform: translateX(50%); */ } p { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: purple; /* margin-top: -100px; margin-left: -100px; */ /* translate(-50%, -50%) 盒子往上走自己高度的一半 */ transform: translate(-50%, -50%); } span { /* translate 对于行内元素是无效的 */ transform: translate(300px, 300px); }

2D 转换 rotate

rotate 旋转 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转 rotate 语法 /* 单位是：deg */ transform: rotate(度数) rotate 里面跟度数，单位是 deg角度为正时，顺时针，角度为负时，逆时针默认旋转的中心点是元素的中心点 img:hover { transform: rotate(360deg) }

旋转三角

<style> div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all 0.2s; } /* 鼠标经过div 里面的三角旋转 */

设置元素旋转中心点(transform-origin)

transform-origin: x y; style> div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; /* 1.可以跟方位名词 */ /* transform-origin: left bottom; */ /* 2. 默认的是 50% 50% 等价于 center center */ /* 3. 可以是px 像素 */ transform-origin: 50px 50px; } div:hover { transform: rotate(360deg); } </style> 注意后面的参数 x 和 y 用空格隔开x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

旋转中心点案例：

<style> div { overflow: hidden; width: 200px; height: 200px; border: 1px solid pink; margin: 10px; float: left; } div::before { content: "旋转"; display: block; width: 100%; height: 100%; background-color: hotpink; transform: rotate(180deg); transform-origin: left bottom; transition: all 0.4s; } /* 鼠标经过div 里面的before 复原 */ div:hover::before { transform: rotate(0deg); } </style>

2D 转换之 scale

scale 的作用

用来控制元素的放大与缩小 transform: scale(x, y) 注意，x 与 y 之间使用逗号进行分隔transform: scale(1, 1): 宽高都放大一倍，相当于没有放大transform: scale(2, 2): 宽和高都放大了二倍transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致transform:scale(0.5, 0.5): 缩小scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子 div:hover { /* 注意，数字是倍数的含义，所以不需要加单位 */ /* transform: scale(2, 2) */ /* 实现等比缩放，同时修改宽与高 */ /* transform: scale(2) */ /* 小于 1 就等于缩放*/ transform: scale(0.5, 0.5) }

图片放大案例

<style> div { overflow: hidden; float: left; margin: 10px; } div img { transition: all .4s; } div img:hover { transform: scale(1.1); } </style>

分页按钮案例:

<style> li { float: left; width: 30px; height: 30px; border: 1px solid pink; margin: 10px; text-align: center; line-height: 30px; list-style: none; border-radius: 50%; cursor: pointer; transition: all .4s; } li:hover { transform: scale(1.2); } </style>

2D 转换综合写法以及顺序问题

同时使用多个转换，其格式为 transform: translate() rotate() scale()顺序会影响到转换的效果(先旋转会改变坐标轴方向)但我们同时有位置或者其他属性的时候，要将位移放到最前面 div:hover { transform: translate(200px, 0) rotate(360deg) scale(1.2) }

动画(animation)

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 动画的基本使用

先定义动画在调用定义好的动画 语法格式(定义动画)： keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } }

语法格式(使用动画)：

div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间； }

动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100% <style> @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(1000px, 0) } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0, 0); } } div { width: 100px; height: 100px; background-color: pink; animation-name: move; animation-duration: 10s; } </style>

动画常见属性

<style> @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; /* 重复次数 iteration 重复的 conut 次数 infinite 无限 */ /* animation-iteration-count: infinite; */ /* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */ /* animation-direction: alternate; */ /* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */ /* animation-fill-mode: forwards; */ //复合写法 /* animation: name duration timing-function delay iteration-count direction fill-mode; */ /* animation: move 2s linear 0s 1 alternate forwards; */ /* 前面2个属性 name duration 一定要写 */ /* animation: move 2s linear alternate forwards; */ } div:hover { /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */ animation-play-state: paused; } </style> 简写属性里面不包含 animation-paly-state暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用要想动画走回来，而不是直接调回来：animation-direction: alternate盒子动画结束后，停在结束位置：animation-fill-mode: forwards

速度曲线细节

animation-timing-function: 规定动画的速度曲线，默认是ease

奔跑的熊大

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: #ccc; } div { position: absolute; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 我们元素可以添加多个动画， 用逗号分隔 */ animation: bear .4s steps(8) infinite, move 3s forwards; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 50%; /* margin-left: -100px; */ transform: translateX(-50%); } } </style> </head> <body> <div></div> </body> </html>

3D 转换

3D 的特点

近大远小

物体和面遮挡不可见 三维坐标系

x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

3D 转换

3D 转换知识要点

3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 transfrom-style

3D 移动 translate3d

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向transform: translateX(100px)：仅仅是在 x 轴上移动transform: translateY(100px)：仅仅是在 y 轴上移动transform: translateZ(100px)：仅仅是在 z 轴上移动transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 语法transform: translate3d(x, y, z) 实践得知写了3d效果并看不出，这时候就像电影一样需要一透视（3d眼镜）

透视 perspective

如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)实际上模仿人类的视觉位置，可视为安排一直眼睛去看透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离距离视觉点越近的在电脑平面成像越大，越远成像越小透视的单位是像素 透视需要写在被视察元素的父盒子上面 <style> body { perspective: 500px; } div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; transform: translateZ(0);//z 轴越大(正值)，我们看到的物体就越大 }

translateZ

translateZ 与 perspecitve 的区别

perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小

3D 旋转rotate

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

语法 transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度 div { perspective: 300px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotateX(-45deg) }

3D 呈现 transform-style

控制子元素是否开启三维立体环境transform-style: flat 代表子元素不开启 3D 立体空间，默认的transform-style: preserve-3d 子元素开启立体空间代码写给父级，但是影响的是子盒子 <style> body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 2s; /* 让子元素保持3d立体空间环境 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(60deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .box div:last-child { background-color: purple; transform: rotateX(60deg); } </style> </head> <body> <div class="box"> <div></div> <div></div> </div> </body>

两面翻转的案例

<style> body { perspective: 400px; } .box { position: relative; width: 300px; height: 300px; margin: 100px auto; transition: all .4s; /* 让背面的紫色盒子保留立体空间 给父级添加的 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; font-size: 30px; color: #fff; text-align: center; line-height: 300px; } .front { background-color: pink; z-index: 1; } .back { background-color: purple; /* 像手机一样 背靠背 旋转 */ transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <div class="front">潘毅康</div> <div class="back">pyk</div> </div> </body>