本文详细介绍HTML5新增标签及特性，如语义化标签、音视频处理等，并深入讲解CSS3的选择器、2D与3D转换、过渡与动画等核心特性。
目录结构
✍ 项目-PC端
一、HTML5 新增 ✍
概述
- 什么是HTML5
定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。
两个概念：
是一个新版本的HTML语言，定义了新的标签、特性和属性
拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML5。
- HTML5拓展了哪些内容
语义化标签
本地存储
兼容特性
2D、3D
动画、过渡
CSS3特性
性能与集成
HTML5新增标签
- 什么是语义化
语义化是指用HTML写出符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
语义化标签
- 新增了哪些语义化标签
header— 头部标签
nav— 导航标签
article— 内容标签
section— 块级标签
aside— 侧边栏标签
footer— 尾部标签
音视频
- 新增多媒体音频标签
多媒体标签有两个，分别是音频audio和视频video。
<audio controls>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件 -->
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg /">
您的浏览器不支持播放声音
</audio>
- 新增多媒体视频标签
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加muted属性就可以自己播放了
<!--
autoplay 视频自动播放
controls 向用户显示播放控件
width：pixels（像素） 设置播放器宽度
height：pixels（像素） 播放器高度
loop 循环播放
preload （有autoplay 就忽略该属性）
-auto 预先加载视频
-none 不应加加载视频
src：url 视频地址
poster：url 未加载，等待时的画面图片
muted 静音播放
-->
<!-- <video src="media/video.mp4" controls="controls"></video> -->
<!-- 谷歌浏览器把自动播放功能给禁用了 有解决方案： 给视频添加静音属性 -->
<video muted="muted" loop="loop" poster="media/pig.jpg" controls>
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.ogg" type="video/ogg" />
您的浏览器太low了，不支持播放此视频
</video>
input标签
- 新增input标签
<li>邮箱: <input type="email" /></li>
- 新增表单属性
二、CSS3 新增 ✍
选择器
- CSS3属性选择器
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
input[value] {
color:pink;
}
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
</style>
结构伪类选择器
- 结构伪类选择器
<style>
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: pink;
}
ul li:nth-child(2) {
background-color: skyblue;
}
</style>
nth-child(n)参数n详解n 可以是数字、关键字、公式
常见的关键字有even偶数、odd奇数
<style>
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
ol li:nth-child(-n + 3) {
background-color: pink;
}
</style>
CSS3新增选择器 nth-type-ofnth-child与nth-of-type区别
① nth-child 会把所有的盒子都排列序号
执行的时候首先看 :nth-child(1) 之后回去看 前面 div
② nth-of-type 会把指定元素的盒子排列序号
执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子section div:nth-child(1) { background-color: red; } section div:nth-of-type(1) { background-color: blue; }
- 伪元素选择器
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小猪佩奇';
}
</style>
伪元素字体图标
p { position: relative; width: 220px; height: 22px; border: 1px solid lightseagreen; margin: 60px; } p::after { content: '\ea50'; font-family: 'icomoon'; position: absolute; top: -1px; right: 10px; }
2D转换
2D 转换之translate移动
transform: translate(x, y)
transform: translate(100px, 100px);
transform: translateX(n)
transform: translate(100px, 0);
transfrom: translateY(n)
让盒子实现水平垂直居中
<style>
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旋转/* 单位是：deg */ img:hover { transform: rotate(360deg) }设置元素旋转的中心的(
transform-origin)
- 可以跟方位名词
transform-origin: left bottom;- 默认的是 50% 50% 等价于 center center
- 可以是px 像素
transform-origin: 50px 50px;
2D 转换之scale缩放
div:hover {
1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍
transform: scale(x, y);
transform: scale(2, 2);
2. 修改了宽度为原来的2倍 高度 不变
transform: scale(2, 1);
3. 等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽度修改了2倍，高度默认和第一个参数一样
transform: scale(2);
4. 我们可以进行缩小 小于1 就是缩放
transform: scale(0.5, 0.5);
transform: scale(0.5);
5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点
}
CSS 过渡transition
- 定义
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)
复合属性写法：
transition: 变化的属性 花费时间 运动曲线 何时开始;
transition: width .5s ease 0s, height .5s ease 1s;
如果想要写多个属性，利用逗号进行分割
transition: width .5s, height .5s;
如果想要多个属性都变化，属性写all就可以了
transition: height .5s ease 1s;
谁做过渡，给谁加
transition: all 2s;
动画(animation)
动画的使用
/* 1. 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translate(1000px, 500px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2. 调用动画 */
/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
animation: move 3s infinite;
}
动画序列
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%
@keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(1000px, 0); } }
动画属性
动画常见属性
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 */
animation-fill-mode: forwards;
}
div:hover {
/* 规定动画是否暂停或者播放 */
animation-play-state: paused;
}
动画简写方式
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode
3D转换
3D的特点
近大远小，物体和面遮挡不可见
三维坐标系图解
3D 转换知识要点透视 ：
perspctive
3D 位移：translate3d(x, y, z)
3D 旋转：rotate3d(x, y, z)
3D呈现transfrom-style
3D 移动translate
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(100px, 100px, 150px); transform: translate3d(100px, 100px, 0);
透视perspective
理解：
透视需要写在被视察元素的父盒子上面
注意下方图片
d：就是视距，视距就是指人的眼睛到屏幕的距离
z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大body { /*透视需要写在被视察元素的父盒子上面 */ perspective: 1000px; }
3D 旋转rotate(X,Y,Z)
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 为角度
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>
<div class="box">
<div></div>
<div></div>
</div>
浏览器私有前缀
- 私有前缀
-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性
- 提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
总结
CSS3
- CSS3 新增加的属性、结构伪类、伪元素选择器
- CSS3 2D 移动、旋转和缩放属性
- CSS3 动画设置方法
- CSS3 3D 移动、旋转和缩放属
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
