前端（十一）

一html5

接下来 咱们要学习html五、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: rotate(角度); 改变旋转原点： transform-origin: 水平坐标 垂直坐标;

transform: rotateX(360deg);    //绕 X 轴旋转360度

transform: rotateY(360deg);    //绕 Y 轴旋转360度

transform: rotateZ(360deg);    //绕 Z 轴旋转360度复制代码

3D动画

transform-style: preserve-3d;     //让 子盒子 位于三维空间里

transform-style: flat;            //让子盒子位于此元素所在的平面内（子盒子被扁平化）复制代码

复杂的动画

一、定义动画的步骤

（1）经过@keyframes定义动画；

（2）将这段动画经过百分比，分割成多个节点；而后各节点中分别定义各属性；

（3）在指定元素里，经过 animation 属性调用动画。