一html5
接下来 我们要学习html5、css3 的知识。html5不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，增加了很多语义标签，本质上新语义标签与<div>、<span>没有区别，只是其具有表意性。
input增加了很多type的类型：邮件、日期等类型。
增加了提示输入框（和select有点像，不过select是选择框）
<input type="text" list="myData">
<datalist id="myData">
<option>本科</option>
<option>研究生</option>
<option>不明</option>
</datalist>增加了输入事件：当输入时候调用方法，当验证错误时候的方法。
oninput()：用户输入内容时触发，可用于输入字数统计。oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
增加了多媒体播放，在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。并且移动设备的浏览器并不支持Flash插件。现在html5给我们提供了：
音频
<audio src="music/yinyue.mp3" autoplay controls> </audio>视频
<video src="video/movie.mp4" controls autoplay></video>新增加DOM操作方式：获取节点方式增加了：
document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
修改class方式增加了：
Node.classList.add("class") 添加class
Node.classList.remove("class") 移除class
Node.classList.toggle("class") 切换class，有则移除，无则添加
Node.classList.contains("class") 检测是否存在class
js 里可以通过 box1.index=100; box1.title 来自定义属性和获取属性。
H5可以直接在标签里添加自定义属性，但必须以 data- 开头。
二css3伪元素
元素：<p>内容</p>称为元素。那么什么是伪元素呢？就是在当前元素的左边或右边增加一个类似的元素。如：
左边添加一个元素，元素的内容是smyhvae
div::before{
content:"smyhvae";
color:red;
background-color: pink;
width: 100px;
height: 50px;
display: inline-block;
}div::after{
content:"永不止步";
color:yellowgreen;
}注意：伪元素结合content去设置，伪元素是行内元素，需要转换成块元素才能设置宽高。
类似于选择器的功能：
E::first-letter设置元素 E 里面的第一个字符的样式。E::first-line设置元素 E 里面的第一行的样式。
三css3新属性
3.1颜色相关的
RGBA、HSLA可应用于所有使用颜色的地方。
RGBA 即：Red、Green、Blue、Alpha
R、G、B 的取值范围是：0~255
background-color: rgba(0, 0, 255, 0.3);HSLA 即
H色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。S饱和度，取值范围 0%~100%。值越大，越鲜艳。L亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。A透明度，取值范围 0~1。
background-color: hsla(240,50%,50%,0.4);关于设置透明度的其他方式：
opacity: 0.3;会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。background: transparent;可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
3.2文本相关的
text-shadow：设置文本的阴影
格式举例：
text-shadow: 20px 27px 22px pink;参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
3.3盒子模型
CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。
这就需要用到 box-sizing属性。它的属性值可以是：content-box、border-box。解释如下。
外加模式：（css的默认方式）
box-sizing: content-box;解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
内减模式：【需要注意】
box-sizing: border-box;解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。
3.4边框相关的
边框圆角：border-radius 属性 。可以让图片变成圆形效果。
边框阴影：box-shadow 属性。 box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
边框图片： border-image: url("images/border.png") 27/20px round;
3.5背景相关的
设置背景图片的尺寸：
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比 */
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
/* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */
background-size: cover;
/* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。 */
background-size: contain;控制背景显示：
/* 从 padding-box 内边距开始显示背景图 */
background-origin: padding-box; //默认值
/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;背景裁剪：
background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是：
border-box超出 border-box 的部分，将裁剪掉padding-box超出 padding-box 的部分，将裁剪掉content-box超出 content-box 的部分，将裁剪掉
3.6动画相关的
过渡动画：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;转换动画：
缩放：transform: scale(x, y);x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。
位移： transform: translate(水平位移, 垂直位移);
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度3D动画
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）复杂的动画
1、定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
