一.什么是HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与
XHTML的新一代标准版本，所以叫HTML5。
HTML5的设计目的是为了在移动设备上支持多媒体。
增加了新特性：语义特性，本地存储特性，设备兼容特
性，连接特性，网页多媒体特性，三维、图形及特效特
性，性能与集成特性，CSS3特性。
废弃一些元素和属
广义的HTML5 是 HTML5本身 + CSS3 + JavaScript
二.html5部分
1.新增语义化标
header：头部标签
nav：导航标签
articl：内容标签
section：块级标签
aside：侧边栏标签
footer尾部标签
2.H5新增多媒体标签
多媒体标签包含两个，具体如下：
音频：audio
视频：video
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件。
- 音频标签
<audio src="文件地址" controls="controls"></audio>
//解决<audio>在不同浏览器的兼容问题
< audio >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
</ audio>
- 视频标签
<video src="文件地址" controls="controls"></video>
//解决<video>在不同浏览器的兼容问题
< video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
3.H5新增input表单、表单属性
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 限制用户输入必须为手机号码类型 |
| type=“search” | 搜索框 |
| type=“color” | 颜色选择器 |
三.css3部分
1.属性选择器
| 选择符 | 简介 |
|---|---|
| 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元素 |
<style>
/* 属性选择器使用方法 */
/* 属性选择器的权重是 10 */
/* 1.直接写属性 既是button 又有 disabled 这个属性的元素*/
button[disabled] {
cursor: pointer;
}
/* 2. 属性等于值 */
input[type="search"] {
color: pink;
}
/* 3. 以某个值开头的 属性值 */
div[class^="icon"] {
color: red;
}
/* 4. 以某个值结尾的 */
div[class$="icon"] {
color: green;
}
/* 5. 可以在任意位置的 */
div[class*="icon"] {
color: blue;
}
</style
<body>
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
<div class="iicon3">图标4</div>
<div class="absicon">图标5</div>
</body>
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个 |
<style>
/*匹配ul元素中的第一个子元素li */
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: deeppink;
}
/* nth-child(n) 我们要第几个，n就是几 比如我们选第8个， 我们直接写 8就可以了 */
ul li:nth-child(8) {
background-color: lightpink;
}
/* of-type 选择指定类型的元素 */
div span:first-of-type {
background-color: purple;
}
div span:last-of-type {
background-color: skyblue;
}
div span:nth-of-type(2) {
background-color: red;
}
</style>
<body>
<div>
<p>我是一个p</p>
<span>我是第一个span</span>
<span>我是第二个span</span>
<span>我是第三个span</span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
3.伪元素选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before 和 after 必须有 content 属性
- before 在内容的前面，after 在内容的后面
- before 和 after 创建一个元素，但是属于行内元素。
- 因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素 伪元素和标签选择器一样，权重为 1
四、2D 转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。
- 缩放：scale
- 移动：translate
- 旋转：rotate
- 倾斜：skew
1. 2D 转换之移动 translate
- 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
/* 表示转化过渡时间*/
transition: all 4s;
/* 语法 transform: translate(x,y) */
transform: translate(30px, 30px);
特点：
-
定义 2D 转换，沿着 X 和 Y 轴移动元素
-
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
-
translate类似定位，不会影响到其他元素的位置 对行内标签没有效果
2. 2D 转换之旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
/* 设置旋转角度 */
transform: rotate(360deg);
/* 设置中心的旋转 */
/* transform-origin: left bottom; */
/* 2. 默认的是 50% 50% 等价于 center center */
/* 3. 可以是px 像素 */
transform-origin: 50px 50px；
3. 2D 转换之缩放scale
缩放，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小,不影响其他元素。
/*语法： transform: scale(x, y); */
/* transform:scale(1,1) 宽和高都放大一倍，相对于没有放大 */
/*transform:scale(2,2) 宽和高都放大了2倍*/
/* transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)*/
/* transform:scale(0.5,0.5)：缩小*/
/* scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
transform: scale(2,2);
2D转换综合写法顺序
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
五、动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
- 用keyframes 定义动画（类似定义类选择器）
- 调用动画
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
3. 动画简写属性
animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
- 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards
- 想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
- 暂停动画：animation-play-state: puased;
动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。（必填） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必填） |
| animation-timing-function | 规定动画的速度曲线，默认是“ease”。 |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"pause"。 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
六、3D 转换
1.三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴：水平向右 注意： x 右边是正值，左边是负值
- y轴：垂直向下 注意： y 下面是正值，上面是负值
- z轴：垂直屏幕 注意： 往外面是正值，往里面是负值
2.3D移动 translate3d
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
translform:translateX(100px)：仅仅是在x轴上移动
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）
3.透视 perspective
在父元素添加；
/*perspective越大显示越小*/
perspective: 500px;
4 translateZ
translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到translateZ 引起的变化了
translateZ：单位只能是px
translateZ：往外是正值，数值越大显示越大
translateZ：往里是负值，数值越小显示越小
5.3D旋转 rotate3d
语法
- transform:rotateX(45deg)：沿着x轴正方向旋转 45度
- transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
- transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
- transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即）
6 .3D呈现 transfrom-style
- 控制子元素是否开启三维立体环境。
- 给父亲添加影响的是子盒子。
- Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启
<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: red;
}
.box div:last-child {
background-color: blue;
/*在x轴旋转60度*/
transform: rotateX(60deg);
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
效果：
六、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1. 私有前缀
- -moz-：代表 firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表 safari、chrome 私有属性
- -o-：代表 Opera 私有属性
2. 提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10
