前端视频学习（九、HTML5+CSS3）

1. HTML5新增标签属性

主流浏览器都支持H5， 然而IE9以及以上支持，IE8以及以下不支持

• HTML5+CSS3改变了用户与文档的交互方式：

  • 多媒体： video audio canvas
  • 新特性： 语义特性、本地存储、网页多媒体、二维三维、特效（过渡动画）

• 相对于H4：

  • 抛弃了一些不合理不常用的标签和属性
  • 新增了一些标签和属性
  • 从代码角度而言，h5的网页结构代码更简洁

  html
  html:xt
  html:xs
  

1.1 部分新语义标签

标签名	作用
nav	导航
header	页眉 或者 其他内容的头部
footer	页脚 或者其他内容的尾部
main	文档主要内容
article	文章
aside	主题内容之外

<header>header>
<nav>nav>
<main>
	<article>article>
	<asdie>aside>
main>
<footer>footer>

兼容性问题

• IE9中这些标签是 inline的，需要更改
• IE8中完全无效，不认识这些标签

解决办法1. ——手动创建标签:

<script>
// 创建了这些标签，IE8就能理解了
//但是他们的display属性默认是inline,需要在css中修改
	document.createElement("header");
	document.createElement("main");
	document.createElement("footer");
	document.createElement("aside");
script>

解决方法2.—— 引入第三方插件

// 默认情况下IE8以下的IE是不支持HTML5的，引入这个之后就可以了
<script src="html5shiv.min.js">script>

1.2 新增表单type属性

type类型	说明	属性
type="email"	邮箱，输入和平时一样，但是在提交的时候添加了验证（@符号和域名），如果不满足要求，会阻止提交
type="tel"	电话，输入和平时一样，没有验证和阻止提交； 为的是在移动端，会打开数字键盘 写一个网页，把文件用手机发送给QQ，在QQ中查看，就能看到数字键盘
type="url"	输入和平时一样，提交的时候添加了验证（合法网址，包含协议名）
type = "number"	有上下箭头选择，且无法输入非数字	max， min, value 分别表示最大、最小、默认值
type="search"	几乎和平时一样，但是右边多了一个删除全部的按钮
type="range"	拖动条（调音量等等使用）	max,min属性
type="color"	拾色器，可使用js获取颜色值
type="time"	显示为时间，并且有上下箭头
type="date"	日期年月日，有日历控件，并且有上下箭头
type="datetime"	日期+时间， 显示和平时一样（目前大多数浏览器不支持）,只有safari有用
type="datetime-local"	日期+时间，上下箭头、日历控件，浏览器有用
type="month"	哪一年的哪一月
type="week"	哪一年的第几周

1.3 新增表单属性

表单属性	说明	取值
placeholder	用户没输入时的占位符	文本
autofocus	自动获取焦点	无
autocomplete	自动根据以前成功提交的内容，提示补全； 且该元素必须要有name属性	on | off
required	必须输入, 不填写会阻止提交	无
pattern	给一些输入的正则验证规则，比如给tel	正则表达式
multiple	给type="file"的，允许选择多个文件 给type="email"中允许输入多个邮件，用逗号分隔	无
form	给表单控件设置这个属性，用来指定属于哪个form	form标签的id名称

1.4 新增表单元素—— datalist, keygen, output

datalist

可以输入又可以选择的输入—— input + datalist

使用list属性加上 id号来关联

<datalist id="subjects">
	
	<option value="前端" label="就业不错">option>
	<option value="后端" label="就业也不错">option>
	<option value="全栈" label="就业很不错">option>		
datalist>

url+ datalist—— value必须添加http://

<datalist id="subjects">
	
	<option value="http://www.baidu.com" label="就业不错">option>
	<option value="http://www.baidu.com" label="就业不错">option>
datalist>

兼容性问题：

1. 在谷歌中，选择的内容为value内容， label内容为说明
2. 在火狐中，选择的内容为label，不支持value

keygen

密钥生成器。当提交表单时，会生成2个密钥，公钥和私钥；私钥存储于客户端，公钥会提交到服务器。 这个用于之后的验证客户端证书——实现非对称加密。

• 浏览器支持率： 极地
• 使用频率：低

<form>
	<input type="text" >
	<input type="password" >
	<keygen>keygen>
	<input type="submit" >
form>

传递公钥+ 二次加密的数据。服务器收到后，使用公钥来解密。

output

• 只是用来显示输出的，不能显示不能修改不能选中。
• 输入内容是自己设置的，无法自动计算

<output>总金额：1000元output>

• 使用频率：低

1.5 新增的表单事件—— oninput、oninvalid

• oninput：监听当前指定元素内容的改变（添加删除修改）
• oninvalid：当验证不通过时触发

oninput

document.getElementById("inp1").oninput = function(){
	console.log(this.value);
}

对比：

onkeyup： 键盘弹起触发，每一个键弹起触发一次
oninput: 不光是键盘输入，赋值粘贴都可以触发

oninvalid —— 可以设置验证失败时的提示信息

document.getElementById("inp1").oninvalid = function(){
	// 设置默认提示信息
	this.setCustomValidity("请输入合法手机号");
}

1.6 新增标签—— progress, meter

标签	属性	说明
progress	max, value	进度条
meter	max,min,high,low,value	度量器

<progress max="100" value="100">progress>

<meter max="100" min="0" high="80" low="40" value="30">meter>
<meter max="100" min="0" high="80" low="40" value="60">meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level">meter>

1.7 新增标签——audio, video, source

以前使用音频、视频的方式：

1. embed : 直接插入视频文件——本质是调用本机上已经安装的软件，有兼容性
2. flash插件： 需要安装flash——需要学习flash使用、苹果设备不支持
3. audio或者video

标签	属性	说明
audio	src,controls, autoplay, loop	播放音频
video	src, controls, autoplay, loop, width, height, post	播放视频

属性说明：

标签	说明	取值
src	音频文件路径
controls	显示播放器控制面板	无
autoplay	自动播放	无
loop	循环	数字
poster	视频专有， 当视频还没有完全下载，或者用户还没有点击播放前，显示的封面 默认显示视频文件的第一帧	图片路径

<audio src="../mp3/aa.mp3" controls>audio>
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600">video>

==注意：==设置宽高的时候，一般只设置一个，让他等比例缩放； 如果都设置，不会完全按照宽高设置。

a. source标签

因为不同浏览器支持的视频和音频文件格式不一样，所以我们在进行视频添加的时候，需要考虑到浏览器是否支持。我们可以准备多个格式的视频文件，让浏览器去选择

<video>
	<source src="mp3/1.flv" type="video/flv">
	<source src="mp3/1.mp4" type="video/mp4">
	您的浏览器不支持当前视频播放   
video>

b. ★自定义播放器

参考地址：
W3School
MDN中Video的事件

常用方法	含义
load()	重新加载视频元素。
play()	开始播放视频。
pause()	暂停视频
常用属性	含义
currentTime	获取当前视频播放进度——秒
duration	获取视频总时间——秒
paused	返回视频是否在暂停状态
常用事件	含义
oncanplay:	加载到可以播放视频/音频时触发
ontimeupdate	播放进度改变的时候触发——播放时持续触发
onended	视频播放完成后触发

注意：

1. video标签的方法都是js方法，如果使用jquery的话需要将他们变回js对象才可以使用
2. 使用hbuilder或者webstorm来设置currentTime属性的时候，用他们自带服务器打开会有点问题，但实际运行是ok的
3. 进度条由4层组成：总长度、当前播放进度、已加载进度、 透明的最上层，用来响应点击事件改变播放进度

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<script src="jquery-1.12.4.js" >script>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color:black;
			}
			.videoplayer{
				position: relative;
				width: 800px;
				height: 550px;
			}
			.videoplayer .media{
				width: 100%;
				height: 100%;
				background-color: black;
			}
			.videoplayer .media .video{
				/*width: 100%;*/
				height: 100%;
				margin: 0 auto;
				display: block;
			}
			/* 下方控制栏，让他在*/
			.controls{
				position:  absolute;
				width: 100%;
				height: 50px;
				left:0;
				bottom: 0;
				background-color: pink;
				/* 让 儿子按钮定位*/
				/*position: relative;*/
			}
			.controls .play {
				position: absolute;
				left: 0;
			}
			.controls .fullscreen{
				position: absolute;
				right: 0;
			}
			
			/* 进度条 */
			.controls .progress{
				position: relative;
				
				margin-left: 70px;
				float:left;
				width: 60%;
				height: 100%;
			}
			.controls .progress > div{
				/* 将所有 进度条 固定在 中间*/
				position: absolute;
				height: 20px;
				left: 0;
				top: 50%;
				margin-top: -10px;
			}
			.controls .progress .fullbar{
				width: 100%;
				background-color: darkgrey;
			}
			/* 透明的bar，用于响应事件*/
			.controls .progress .bar{
				width: 100%;
				opacity: 0;
				z-index: 999;
			}
			/* 已走过的长度*/
			.controls .progress .elapse{
				background-color: white;
				width: 0%;
			}
			/* 已加载长度*/
			.controls .progress .loaded{
				background-color: grey;
				width: 60%;
			}
			
			/* 显示时间 */
			.controls .time{
				float:left;
				height: 50px;
				line-height: 50px;
				margin-left: 10px;
			}
		style>
	head>
	<body>
		<div class="videoplayer">
			
			<div class="media">
				<video class="video" src="窃格瓦拉.mp4">video>	
			div>
			<div class="controls">
				
				<a class="play" href="javascript:void(0);">
					<i class="iconfont icon-play_fill">i>	
				a>
				
				
				<a class="fullscreen" href="javascript:void(0);">
					<i class="iconfont icon-fullscreen">i>
					
				a>
				
				<div class="progress">
					
					<div class="fullbar">div>
					
					<div class="bar">div>
					
					<div class="loaded">div>
					
					<div class="elapse">div>
				div>
				
				<div class="time">
					<span class="current-time">00:00span>
					/
					<span class="total-time">00:00span>
				div>
			div>
		div>
		<script>
			$(function(){
				var video = $(".video").get(0);
				
				//1. 处理播放和暂停
				$(".play").click(function(){
					
					if(video.paused){
						video.play();	
					}
					else{
						video.pause();
					}
					$(".play .iconfont").toggleClass("icon-play_fill icon-suspend");
					
				})
				// 2. 全屏幕事件
				$(".fullscreen").click(function(){
					// 查看是否全屏幕
					if(document.webkitFullscreenElement){
						document.webkitCancelFullScreen();
					}
					else{
						$(".videoplayer")[0].webkitRequestFullScreen();
					}
					$(".fullscreen .iconfont").toggleClass("icon-fullscreen icon-smallscreen");
				})
				
				function getFullTimeString(secondtime){
					let hour = Math.floor(secondtime/3600);
					let min = Math.floor(secondtime/60%60);
					let sec = parseInt(secondtime) % 60; 
					// 补0操作
					hour = hour<10?"0"+hour:hour;
					min = min<10?"0"+min:min;
					sec = sec<10?"0"+sec:sec;
					return hour+":"+min+":"+sec;
				}
				// 3. 视频准备好后(video的canplay事件    )，设置
				video.addEventListener("canplay",function(){
					$(".total-time").text(getFullTimeString(video.duration));
					
				});
				
				// 4. 播放过程中事件——timeupdate
				video.addEventListener("timeupdate",function(e){
					// 设置当前已播放时间
					$(".current-time").text(getFullTimeString(video.currentTime));
					// 设置已播放进度条长度
					let widthPercent = video.currentTime/video.duration;
					$(".elapse").width(widthPercent*100+"%" );
				});
				
				// 5. 处理透明bar点击改变播放位置事件
				$(".bar").click(function(e){
					// 获取距离这个进度条左边的长度，除以总长度
//					console.log( e.offsetX/$(this).width() *video.duration);
					video.currentTime = e.offsetX/$(this).width() *video.duration;
				});
				
				// 6. 播放完毕后的处理
				video.addEventListener("ended",function(){
					video.currentTime = 0;
					$(".play i").removeClass("icon-suspend").addClass("icon-play_fill");
				});
			})
		script>
	body>
html>

1.8 H5中获取DOM元素的新方法 ——querySelector, querySelectorAll

方法	说明
document.querySelector	获取满足条件的第一个值
document.querySelectorAll	获取满足条件的所有值

// 获取满足条件的第一个值
var javaLi=document.querySelector(".green");

// 获取满足条件的所有值
var allLi=document.querySelectorAll("li")[0];

1.9 操作元素类样式——classList

方法	说明	案例
classList.add	给这个对象添加一个类方法（只能一个））	divObj.classList.add("red");
classList.item	根据索引获取class的名字	divObj.classList.item(0)
classList.remove	一次移除一个class	divObj.classList.remove("red“)
classList.toggle	切换有无class	divObj.classList.toggle("red")
classList…contains	判断是否包含一个class	divObj.classList.contains("red")

/*add:为元素添加指定名称的样式.一次只能添加一个样式*/
            document.querySelector("#add").onclick = function () {
                /*classList:当前元素的所有样式列表-数组*/
                document.querySelector("li").classList.add("red");
                document.querySelector("li").classList.add("underline");
                //document.querySelector("li").className="red underline"
                /*获取样式*/
                var result = document.querySelector("li").classList.item(2);
                console.log(result);
            }

            /*remove:为元素移除指定名称的样式(不是移除class属性)，一次也只能移除一个*/
            document.querySelector("#remove").onclick = function () {
                document.querySelector(".blue").classList.remove("blue");
            }

            /*toggle：切换元素的样式：如果元素之前没有指定名称的样式则添加。如果有则移除*/
            document.querySelector("#toggle").onclick = function () {
                document.querySelectorAll("li")[2].classList.toggle("green");
            }

            /*contains:判断元素是否包含指定名称的样式，返回true/false*/
            document.querySelector("#contain").onclick = function () {
                var isContain = document.querySelectorAll("li")[3].classList.contains("red");
                console.log(isContain);
            }

1.10 自定义属性 —— data-

规范：

1. 自定义属性以data-开头
2. 之后至少有一个字符
3. 名称应该都是用小写
4. 名称中不要有任何特殊符号
5. 名称不要使用纯数字
6. 多个单词的话，使用-来连接

设置和获取：

<p data-school-name="itcast">传智播客p>

<script>
	// 一定要使用这种方式获取！
    var value=p.dataset["schoolName"];//data-school-name
    console.log(value);
script>

2. HTML5新增接口

HTML5的很多接口都是侧重于移动端，在PC端使用有时会有兼容性问题

2.1 网络监听接口——ononline, onoffline

加载window上的2个事件：

1. ononline: 网络连通的时候触发这个事件
2. onoffline：网络断开的时候触发

/*1.ononline:网络连通的时候触发这个事件*/
window.addEventListener("online",function(){
    alert("网络连通了");
});

/*2.onoffline:网络断开时触发*/
window.addEventListener("offline",function(){
    alert("网络断开了");
})

2.2 全屏接口——requestFullScreen, cancelFullScreen,fullScreenElement

在全屏和非全屏之间切换

不同浏览器需要添加不同的前缀

• chrome： webkit
• firefox: moz
• IE: ms
• opera: o

方法属性	含义	调用者
requestFullScreen()	开启全屏显示	需要全屏的元素
cancelFullScreen()	退出全屏	document
fullScreenElement	判断是否全屏	document

document.querySelector("#full").onclick=function(){
	/*div.requestFullScreen();*/
    /*div.webkitRequestFullScreen();*/
    /*div.mozRequestFullScreen();*/
    /*使用能力测试添加不同浏览器下的前缀*/
    if(div.requestFullScreen){
        div.requestFullScreen();
    }
    else if(div.webkitRequestFullScreen){
        div.webkitRequestFullScreen();
    }
    else if(div.mozRequestFullScreen){
        div.mozRequestFullScreen();
    }
    else if(div.msRequestFullScreen){
        div.msRequestFullScreen();
    }
}

/*退出全屏*/
document.querySelector("#cancelFull").onclick=function(){
    if(document.cancelFullScreen){
        document.cancelFullScreen();
    }
    else if(document.webkitCancelFullScreen){
        document.webkitCancelFullScreen();
    }
    else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();
    }
    else if(document.msCancelFullScreen){
        document.msCancelFullScreen();
    }
}

/*判断是否是全屏状态*/
document.querySelector("#isFull").onclick=function(){
    /*两个细节：使用document判断  能力测试*/
    if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
        alert(true);
    }
    else{
        alert(false);
    }
}

2.3 ★读取文件接口——FileReader

几个知识点：

1. 提交了文件/改变了内容，使用的是input的onchange事件
2. 获取文件提交的内容是 **文件上传控件的files**属性——伪数组
3. 读取内容是通过**创建fileReader对象，调用它的方法读取
4. fileReader对象也有事件，用于在特定时期获取内容

fileReader对象的方法	作用
readAsText()	读取文本文件，返回字符串，默认是UTF-8编码
readAsBinaryString()	读取二进制文件，返回二进制字符串，用于存储文件、发送给后台
readAsDataURL()	读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL
abort()	中断读取

DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。

src:指定路径(资源定位–url):src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源

fileReader对象的事件	时机
onabort	读取文件中断片时触发
onerror	读取错误时触发
onload	文件读取成功完成时触发
onloadend	读取完成时触发，无论成功还是失败
onloadstart	开始读取时触发
onprogress	读取文件过程中持续触发

读取文件步骤：

1. 创建文件读取对象

var reader=new FileReader();

2. 读取文件

reader.readAsDataURL(file[0]);

3. 操作

获取读取文件时的进度：

reader.onprogress=function(e){
    var percent= e.loaded/ e.total*100+"%";
    div.style.width=percent;
}

2.4 ★拖拽接口

学习拖拽就是学习各种事件

注意点:

1. 在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽
2. 览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为e.preventDefault();
3. 各种事件的事件对象e中可以获取到被拖拽的对象属性target

a. 应用于被拖拽元素的事件

事件名	解释
ondrag	应用于拖拽元素，整个拖拽过程都会调用–持续
ondragstart	应用于拖拽元素，当拖拽开始时调用
ondragleave	应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend	应用于拖拽元素，当拖拽结束时调用*/

b. 应用于目标元素的事件

事件名	解释
ondragenter	应用于目标元素，当拖拽元素进入时调用
ondragover	应用于目标元素，当停留在目标元素上时调用
ondrop	应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave	应用于目标元素，当鼠标离开目标元素时调用*/

c. 通用写法

1. 使用document来注册各种事件,避免了每次给单个元素注册
2. 使用事件对象获取拖拽元素
3. 通过dataTransfer来实现拖拽过程中,数据的存储与获取

// 被拖拽元素
document.ondragstart=function(e){
        /*通过事件捕获来获取当前被拖拽的子元素*/
        e.target.style.opacity=0.5;
        e.target.parentNode.style.borderWidth="5px";
        obj= e.target;
        /*通过dataTransfer来实现数据的存储与获取
        * setData(format,data):
        * format:数据的类型：text/html   text/uri-list
        * Data:数据:一般来说是字符串值*/
        e.dataTransfer.setData("text/html", e.target.id);
    }
    document.ondragend=function(e){
        e.target.style.opacity=1;
        e.target.parentNode.style.borderWidth="1px";
    }

// 目标元素
document.ondrop=function(e){
        /*添加元素*/
        //e.target.appendChild(obj);
        /*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
        var id=e.dataTransfer.getData("text/html");
        /*console.log("id="+id);*/
        e.target.appendChild(document.getElementById(id));
    }

2.5 地理定位接口

浏览器上就算允许了,基本也获取不到,主要是在移动端使用

navigator.geolocation.getCurrentPosition(success(position){

}, error(error){
	// error.code
}, option);

1. success ,error 是事件处理函数
2. 如果成功了,那么success函数会接受到一个position参数, 包含信息位置
3. 如果失败了,那么error会受到一个 error参数,包含原因

position参数的属性:
4. position.coords.latitude 纬度
5. position.coords.longitude 经度
6. position.coords.accuracy 精度
7. position.coords.altitude 海拔高度

2.6 ★web存储— sessionStorage, localStorage

cookie存储大小只有4k左右

• sessionStorage存储数据到本地,存储容量为5M左右,数据是存储在当前页面的内存中
• localStorage存储内容大约为20M

a. sessionStorage

特点:

1. 存储容量大约为5M
2. 数据是存储在当前页面的内存中
3. 生命周期在关闭当前页面后结束

方法	作用
setItem(key, value)	存储数据,键值对
getItem(key)	通过key获取数据
removeItem(key)	删除数据,通过制定的key,找不到返回null
clear	清空所有存储内容

在调试窗口中的application或者Resources中可以看到存储的数据

window.sessionStorage.setItem("hello",123);

b. localStorage

特点:

1. 存储容量大约为20M
2. 不同浏览器不能共享数据,但是同一个浏览器的不同窗口可以共享数据
3. . 永久生效,数据是存储在硬盘上,不会随着浏览器关闭而丢失
4. 只能手动清除

方法	作用
setItem(key, value)	存储数据,键值对
getItem(key)	通过key获取数据
removeItem(key)	删除数据,通过制定的key,找不到返回null
clear	清空所有存储内容

window.localStorage.setItem("hello",123);

2.7 应用缓存

浏览器的自己缓存是没有选择的，要么缓存所有内容，要么不缓存。 而HTML5新增了对缓存的控制

google浏览器的调试工具中可以模拟不同的网络状况

• 概念： 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本
• 优势：
  a) 可配置需要缓存的资源
  b) 网络无连接应用仍可用
  c) 本地读取缓存资源，提升访问速度，增强用户体验
  d) 减少请求，缓解服务器负担

a. 使用步骤

1. 在文档的 标签中包含 manifest 属性, 指定一个缓存配置文件名称——建议文件名以.appcache为后缀

<html manifest="demo.appcache">

2. 书写manifest文件配置内容

manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

b. manifest文件内容

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容

manifest 文件可分为三个部分:

• CACHE MANIFEST – 开始（必须作为缓存配置文件的第一行书写）
• CACHE 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

例子：

CACHE MANIFEST
# 上面一句代码必须是当前文档的第一句
#井号后面代表注释

# 需要缓存的文件清单列表
CACHE:
# 下面就是需要缓存的清单列表，如果都要缓存，输入  * 井号
../images/l1.jpg
../images/l2.jpg

# 每一次都需要从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg

# 如果无法获取，则使用特定的文件进行替代,  /  斜线代表所有文件
FALLBACK:
../images/l4.jpg  ../images/banner.jpg

c. 注意事项

1. CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST后面
2. 可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
3. #表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4. chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
5. 使用IIS查看的时候，manifest 文件需要配置正确的 MIME-type，即 text/cache-manifest。必须在 web 服务器上进行配置
6. 一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，也需要更新 manifest 文件，也就意味着一旦应用被缓存，它就会保持缓存直到发生下列情况：
7. 用户清空浏览器缓存
8. manifest 文件被修改（参阅下面的提示）
9. 由程序来更新应用缓存

说明：更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

3. CSS3新增选择器和样式

现状：

1. 浏览器支持程度差，需要添加私有化前缀
2. 移动端支持优于PC端
3. 不断改进中

如何对待：

1. 坚持渐进增强 (vs 优雅降级)
2. 考虑用户群体
3. 听boss的

3.1 新增选择器——属性、伪类、伪元素

属性选择器

选择器写法	含义	案例
[attr]	任何拥有attr这个属性的标签	[class]
ele[attr]	任何拥有attr这个属性的ele标签	p[class]
ele[attr=val]	任何拥有attr这个属性，且属性值为val 的ele标签m完全匹配	p[class=red]
ele[attr*=val]	任何拥有attr这个属性，且属性值包含val这个字符串的ele标签	p[class*=red]
ele[attr^=val]	任何拥有attr这个属性，且属性值以val这个字符串开头的ele标签	p[class^=red]
ele[attr$=val]	任何拥有attr这个属性，且属性值以val这个字符串结尾的ele标签	p[class$=red]

兄弟伪类 —— +, ~

选择器写法	含义	案例
selector1 + selector2	selector1这个元素的： 1.相邻的下一个兄弟 2. 满足selector2的	.first + li
selector1 ~ selector2	selector1这个元素的满足selector2的兄弟元素	.first ~ li

+：

<style>
	.first + li{
		color: red;
	}
style>
<li class="first">前端与移动开发li>
<span>不会变色span>
<li>不会变色li>
<li>不会变色li>
<li>不会变色li>

<style>
	.first + li{
		color: red;
	}
style>
<li class="first">前端与移动开发li>
<li>会变红色li>
<li>不会变色li>
<li>不会变色li>

<style>
	.first ~ li{
		color: red;
	}
style>
<li class="first">前端与移动开发li>
<span>不会变色span>
<li>会变色li>
<li>会变色li>
<li>会变色li>

相对父元素的伪类

选择器写法	含义	案例
:first-child	满足条件的标签，并且是在该标签父元素中的第一个子元素	li:first-child
:last-child	满足条件的标签，并且是在该标签父元素中的第一个子元素	li:last-child
:nth-child()	满足条件的标签，并且是在该标签父元素中的第n个子元素	li:nth-child(5)
:nth-last-child()	满足条件的标签，并且是在该标签父元素中的倒数第n个子元素	li:nth-last-child(5)
:first-of-type	满足条件的标签，并且是该标签父元素的儿子中，同类标签中第一个
:last-of-type
:nth-of-type
:nth-of-type(even)	该标签父亲的儿子中，满足条件的同类标签中，第偶数序号个	li:nth-of-type(even)
:nth-of-type(oldd)	该标签父亲的儿子中，满足条件的同类标签中，第奇数序号个	li:nth-of-type(oldd)
:nth-last-of-type
:only-of-type	该标签父亲的儿子中，唯一一个满足条件的
:empty	标签内容为空的	li:empty
:target	被设置了锚点的元素，锚点跳转激活后	h2:target

n默认表示 从0到子元素长度，当 n小于等于0时索引无效

/* 选中前5个 */
li:nth-of-type(-n+5){
	font-size: 30px;
}

伪元素选择器 —— ::before, ::after

伪元素	含义
::before	元素之前插入的内容
::after	元素之后插入的内容
::first-letter	文本的第一个字母
::first-line	文本第一行
::selection	文本选中的部分

::before, ::after特点:

1. 默认是行内元素，设置宽高的话需要转换（float，position，display）
2. 必须添加content，没有内容就设置为""
3. :after, :before在旧版本是伪类，新版本是伪元素。 新版中 :的写法都会转变成::
4. IE6、7中，伪类伪元素都不认识
5. IE8中只认识:写法
6. 页面中无法选中，源代码中没有内容

  div:nth-of-type(2)::before{
            /*必须添加content属性，否则后期不可见*/
            content: "";
            /*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            left: -10px;
            top: -10px;
        }
        div:nth-of-type(2)::after{
            /*必须添加content属性，否则后期不可见*/
            content: "";
            /*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            left: -10px;
            bottom: -10px;
        }

 /*获取第一个字符：实现首字下沉*/
        p::first-letter{
            color: red;
            font-size: 30px;
            float: left;/*文本环绕*/
        }

        /*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/
        p::first-line{
            text-decoration: underline;
        }

        /*设置当前选中内容的样式*/
        p::selection{
            background-color: pink;
            color: red;
            /*它只能设置显示的样式，而不能设置内容大小*/
            /*font-size: 30px;*/
        }

3.2 颜色设置

1. 字面值
2. #xxxxxx
3. rgb(red,green,blue)/rgba(red,green,blue, alpha)
4. hsl(H,S,L)/hsla(H,S,L,A)

rgba

• R: 红色值， 0~255 | 百分数
• G: 绿色值， 0~255 | 百分数
• B: 蓝色值， 0~255 | 百分数
• alpha: 透明度0-1（1代表不透明， 0代表全透明）

rgba设置透明度比 opacity好，opacity会使得整个盒子，包括其中的内容一起透明，而设置背景色rgba只会影响背景，不会影响内容

HSLA

• H： 色调/色相， 是颜色盘中的相位角。 30表示橙色，60表示黄色，120表示绿，180表示青，240表示蓝，300表示紫， 0、360表示红
• S：饱和度， 0~100%
• L：亮度,0~100% ( 但是在CSS3中，这个值默认是50%，相当于平时的100%)
• A: alpha透明度，0~1（1代表不透明， 0代表全透明）

透明度对比

• opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度
• transparent 不可调节透明度，始终完全透明
• 使用rgba 来控制颜色，相对opacity ，不具有继承性

3.3 盒模型——box-sizing

box-sizing:  content-box | border-box;

兼容性问题：
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-

3.4 文字阴影——text-shadow

text-shadow: none | xoffset yoffset blur color[, xoffset yoffset blur color].. 

例：

 .demo1{
    text-shadow: -2px -2px 5px red;
}
.demo2{
    text-shadow: 0px 0px 30px #fff;
}
/*多层阴影效果*/
.demo3{
    text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
}
.demo4{
    color: black;
    text-shadow: 0px 1px 0px #fff;
}
/*浮雕立体效果*/
.demo5{
    color: #fff;
    text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;
}
.demo6{
    color: transparent;
    text-shadow: 0px 0px 8px hsla(30,100%,30%,1);
}

3.5 边框圆角——box-shadow

圆角含义：

设置属性	含义
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
border-radius	一个值：四个角
border-radius	两个值：↖↘ 和 ↗↙
border-radius	三个值：↖ 和 ↗↙ 和 ↘
border-radius	四个值：↖ 和 ↗ 和 ↘ 和 ↙

每个角可以分别各水平方向、垂直方向设置曲率：（椭圆）

/* 水平方向100px， 垂直方向50px画曲线 */
border-radius: 100px/50px;   

/* 分别给4个方向设置  */
border-radius: 100px 80px 60px 20px/20px 60px 80px 100px;

/* 单独给某个方向设置 */ 
border-bottom-right-radius: 60px 80px;

3.6 边框阴影——box-shadow

box-shadow: horizontal vertical blur spread color inset

属性值	解释
h	水平方向偏移值
v	垂直方向偏移值
blur	模糊（可选，默认0， 单位一般用px）
spread	阴影的尺寸，扩张和收缩阴影大小（可选，默认0，单位一般用px，可正可负）
color	颜色（可选，默认黑色）
inset	内阴影（可选，默认为外阴影。）取值为： 不设置 | inset

案例：

box-shadow: 1px 1px 3px 0px #bbb;

box-shadow: 1px 1px 2px #ff0000 inset,-1px -1px 2px #ff0000 inset;

3.7 背景—— background-size,

| 背景属性 | 含义 | 设置值 |
| background-repeat | 背景平铺| repeat | no-repeat | repeat-x | repeat-y | round | space|
| background-attachment | 屏幕滚动时的行为 | attachment | fixed | local
| background-size |

• background-repeat中：
  • round含义是: 将平铺缩放后平铺（整数个）
  • space含义是：产生间距来铺满（整数个）
• background-attachment:
  • scroll 是图片跟随容器滚动条滚动，对于容器内容滚动的话，背景不同
  • fixed 是图片固定不动，容器会动
  • local: 背景图片会跟随容器内容一起滚动

background-size

设置背景图片的大小

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

• auto：此值为默认值，保持背景图片的原始高度和宽度;
• number：此值设置具体的值，可以改变背景图片的大小;
• percentage：此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
• cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小
  • 使用background-size: cover 和 background-position: center; 来让大图片在背景中充满、居中
• contain：此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止。
• 当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而是会参照第一个参数值进行等比例缩放。

例子：

background-size: 300px;   /* 宽度是300px 高度是auto*/
background-size: 300px 500px;  
background-size: 50% 50%; /* 容器可放置区域的 50%宽 50%高*/

/*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
    1.图片大于容器：有可能造成容器的空白区域,将图片缩小
    2.图片小于容器：有可能造成容器的空白区域，将图片放大*/
background-size: contain;


/*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/
background-size: cover;

background-origin

设置背景图片的background-position的参照原点，默认是左上角

background-origin: padding-box|border-box|content-box;

background-clip

属性规定背景的绘制区：虽然是设置裁切，但是控制的是显示

属性	说明
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

background-clip: border-box|padding-box|content-box;

3.8 边框图片

属性	效果
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移—裁切。
border-image-width	图片边框的宽度。
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

任意拉伸的按钮：通过一个按钮的背景图片制作出任意大小的按钮，实现背景填充效果：

.downLoad{
    width:80px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ccc;
    /*设置图片边框背景*/
    border-image: url("../images/btn_bg.png");
    /*设置裁切区域，同时设置填充模式*/
    border-image-slice: 10 fill;
    /*设置边框的大小，这个一般与裁切区域大小一致，否则就发生缩放*/
    border-image-width: 10px;
    /*设置边框的重复模式*/
    border-image-repeat: round;
}

4. CSS3渐变和动画

4.1 线性渐变

线性渐变指沿着某条直线朝一个方向产生渐变效果

linear-gradient( [ || ,]? ,  [, ]* )

• point写法和angle二选一，并且可以省略
• stop可以写多个，代表渐变中间点

属性	说明	取值
point	渐变方向	to top | to right | to bottom(默认) | to left
angle	渐变角度	0deg | 90deg（右） | 180deg（下） | 270deg | 151deg
stop	某个点的颜色 和位置（位置可以省略）	red 5%, blue 50%

例子：

background: linear-gradient(to right, red, blue);

background: linear-gradient(to right, red, red, blue, blue);

background: linear-gradient(to right, red, red 20%, blue 70%, blue);

4.2 径向渐变

径向渐变指从一个中心点开始沿着四周产生渐变效果

 = radial-gradient([ [  ||  ] [ at  ]? , | at , ]?[ ,  ]+)

属性	说明	取值
shape	是圆形渐变还是适配 尺寸渐变	circle | ellipse（默认）
position	坐标，默认在正中心，可以使用坐标也可以用关键字	at 50px 50px, at left top,at top, at center center(默认) （只给一个，另一个默认是center）
size	到哪个位置停止	closest-side, closest-corner , farthest-side, farthest-corner（默认）

例子：

background: radial-gradient(red, blue);
background: radial-gradient(circle, red, blue);
background: radial-gradient(circle, red, red 50%, blue 50%,blue);
background: radial-gradient(at 50px 50px, red, blue);
background: radial-gradient(at left top, red, blue);
background: radial-gradient(circle, at left top, red, blue);
background: radial-gradient(closest-corner  at 50px 50px, red, blue);
background: radial-gradient(circle, closest-corner  at 50px 50px, red, blue);

4.3 重复渐变

background: repeating-linear-gradient(to botttom, white, black);
background: repeating-radial-gradient(circle at center center, white 0%, black 10%, white 10%, black 20%);

4.4 ★过渡——transition

主要是2个部分：

• 哪个属性的渐变
• 持续时间为多久

transition: property duration timing-function delay;

完整的4个属性：

属性	含义
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

tansition-timing-function的取值：

函数值	含义
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

例子

transition: left 2s linear 0s;

同时设置多个(逗号隔开）
transition: left 2s linear 0s, background-color 5s linear 0s;

一次设置所有（效率低）
step设置分几次完成
transition:all 2s steps(4);

兼容性前缀

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去，如

-moz-transition: all 5s ease 1s;
-webkit-transition: all 1s ease 1s;
-o-transition: all 1s ease 1s;
transition: all 1s ease 1s;

4.5 ★2D转换——transform

translate（平面位移）

• 使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
• 如果只有一个参数就代表x方向
• 如果有两个参数就代表x/y方向

属性
transform: translate(x,y)
transform : translateX(x)
transform: translateY(y)

transform: translate(100px);
transform: translate(400px,500px);
transform: translate(0px,500px);

scale（缩放）

• 实现缩放 1指不缩放，>1.01放大 <0.99缩小 参照元素的几何中心
• 如果只有一个参数，就代表x和y方向都进行相等比例的缩放
• 如果有两个参数，就代表x/y方向

属性
transform: scale(x,y)
transform : scaleX(x)
transform: scaleY(y)

transform: scale(2);
transform: scale(2,1);
transform:scaleY(0.5);

rotate（旋转）

• 沿着中心旋转
• 只有一个参数，就是角度
• 正值代表顺时针，负值代表逆时针

transform: rotate(-90deg) translateX(700px);

transform-origin 设置旋转中心

• 设置旋转轴心
  1.x y
  2.关键字：left top right bottom center

transform-origin: left top;

skew（角度变形）

属性
transform: skew(x,y)
transform : skewX(x)
transform: skewY(y)

 transform:skew(-30deg);
transform:skew(30deg,-30deg);
/*设置某个方向的斜切值*/
transform:skewX(30deg);
transform:skewY(30deg);

同时添加多个变化——用空格隔开

注意，一般先写 水平，再写rotate，因为rotate也会改变坐标参考系

transform: rotate(-90deg) translateX(700px);

定位+transform实现完全居中

transform:translate(50%,50%)这个百分比代表是参照自身的尺寸

div{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50%);
}

4.6 3D变换—— transform

translate3d(x,y,z)
translateX(length)
translateY(length)
translateZ(length)

transform:translate3d(100px,100px,0px);

scale3d(number,number,number)
scaleX()
scaleY()
scaleZ()
transform: scale3d(2,0.5,1);

rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)

属性值函数	参数说明
translate3d	x,y,z —— 对应轴方向的位移
scale3d	x,y,z —— 对应轴方向的缩放比例
rotate3d	x,y,z 轴向量参数 ； angle 旋转角度

4.7 景深——perspective

属性	含义	选项
transform-style	使被转换的子元素保留其 3D 转换(需要设置在父元素中)	flat子元素将不保留其 3D 位置-平面方式, preserve-3d子元素将保留其 3D 位置—立体方式
perspective	设置三维透视的距离	长度
perspective-origin	属性规定了镜头在平面上的位置。默认是放在元素的中心	x, y

5. 动画——animation、@keyframes

动画主要构成部分：

1. 关键帧@keyframes——什么时候处于什么状态，中间过程会被自动补全
2. 使用动画animation-name（告诉使用哪组关键帧）
3. 持续时间animation-duration

5.1 一个简单的动画

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style>
			.div1{
				height: 400px;
				width: 400px;
				background-color: purple;				
			}
			.div2{
				height: 400px;
				width: 400px;
				background-color: pink;
			}
			.div1:hover{
				animation-name: moveScale;
				animation-duration: 2s;
			}
			
			@keyframes moveScale{
				/* 0% 可以使用 from 代替*/
				0%{
					
				}
				50%{
					transform: translate(100px, 200px);
				}
				/* 100% 可以使用 to 代替*/
				100%{
					transform: translate(500px, 500px) scale(2,1);
				}
			}
		style>
	head>
	<body>
		<div class="div1">div>
		<div class="div2">div>
	body>
html>

5.2 animation属性

属性	含义	取值
animation-name	指定动画（keyframes）名称	字符串
animation-duration	设置动画的总耗时	2s
animation-iteration-count	设置动画的播放次数，默认为1次	1,infinite
animation-direction	设置交替动画	alternate
animation-delay	动画的延迟	2s
animation-timing-function	动画的时间函数	`linear·
animation-play-state	设置动画的播放状态	pause running
animation-fill-mode	设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态	forwards, backwards, both

• forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
• backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
• both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态

6. 字体

6.1 web字体

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至IE低版本浏览器也能支持

字体格式

1. TureTpe(.ttf)格式
   .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2. OpenType(.otf)格式
   .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3. Web Open Font Format(.woff)格式
   woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4. Embedded Open Type(.eot)格式
   .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5. SVG(.svg)格式
   .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

去网上下载对应字体格式，比如 阿里的Iconfont

操作步骤

1.得自定义想生成对应字体文件的内容
2.使用网络资源生成web字体——下载得到字体文件
3.使用:

a.定义自定义字体

	@font-face {
       font-family: 'shuangyuan';
        src: url('../fonts/webfont.eot'); /* IE9*/
        src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
        url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }

b.定义样式使用自定义字体

 /*定义一个样式，使用自定义的web字体*/
.myFont{
    font-family: shuangyuan;
}

c.指定样式，调用样式

<span class="myFont">这些文字都是之前设置过自定义字体的span>

6.2 字体图标

字体图标本身也是web字体，本身是文字，能够调节颜色和大小。 使用方式和web字体很像

参考链接： https://blog.csdn.net/huangxiaoguo1/article/details/79623573

步骤：

1. 自己找想要的字体图标，然后下载获取字体文件
2. 定义字体图标的 @font-face
3. 定义使用自定义图标的类，比如iconfont
4. 为了方便，再对每个图标单独设置一个类，比如：icon-fullscreen

使用：

/*定义字体图标*/
@font-face {
    font-family: 'wjs'; //自定义的字体名称
    src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/
    src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}

/*自定义字体图标*/
.wjs_font_icon{
    font-family: wjs; //这里对应着自定义的字体名称
}
/*手机图标对应的编码*/
.wjs_font_icon_phone::before{
    content: "\e908"; //指定显示的内容
}

之后就可以

<span class=".wjs_font_icon .wjs_font_icon_phone">span>

例子：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('../fonts/iconfont.eot'); /* IE9*/
            src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
            url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .myFont{
            font-family: iconfont;
        }
        /*笑脸*/
        .smile::before{
            content: "\e641";
            color: red;
            font-size: 50px;
        }
        /*输出*/
        .output::before{
            content: "\e640";
            color: blue;
            font-size: 50px;
        }
    style>
head>
<body>

<span class="myFont smile">span>
<span class="myFont output">span>
<span class="myFont">span>
body>
html>

7. 多列布局

让盒子内的文字，实现多列，这样方便阅读

属性	作用
column-count	属性设置列的具体个数
column-width	属性控制列的宽度
column-gap	两列之间的缝隙间隔
column-rule	规定列之间的宽度、样式和颜色
column-span	规定元素应横跨多少列(n:指定跨n列 all:跨所有列)

.wrapper {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            /*设置多列布局*/
            /*1.设置列数*/
            column-count: 3;
            /*2.添加列间隙样式,与边框样式的添加一样*/
            column-rule: dashed 3px red;
            /*3。设置列间隙大小*/
            column-gap: 50px;
            /*4.设置列宽
            原则：取大优先
            1.如果人为设置宽度更大，则取更大的值，但是会填充整个屏幕，意味最终的宽度可能也会大于设置的宽度--填充满整个屏幕
            2.如果人为设置宽度更小，使用默认计算的宽度*/
            column-width: 200px;
        }
        h4{
            /*设置跨列显示  1  / all*/
            column-span: all;
        }

8. ★弹性盒子

阮一峰Flex

父盒子属性	含义	取值
display: flex;	设置父容器为伸缩盒子：会使每一个子元素自动变成伸缩项
justify-content	设置子元素的排列方式	flex-start, flex-end, center, space-around, space-between
flex-flow	是flex-direction 和 flex-wrap2个属性的简写，默认值为row nowrap
flex-direction	定义弹性盒子元素	row row-reverse column column-reverse
flex-wrap	换行还是不换行	nowrap | wrap | wrap-reverse
flex	是flex-grow, flex-shrink , flex-basis的简写 ,默认值为 0 1 auto
flex-grow	子盒子在父中还有空间的话，如何充满	0
flex-shrink	父盒子如果空间不够了，如何收缩	1

8.1 justify-content——父盒子

设置子元素的在主轴上排列方式

• flex-start:让子元素从父容器的起始位置开始排列
• flex-end:让子元素从父容器的结束位置开始排列
• center:让子元素从父容器的中间位置开始排列
• space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
• space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍*/

8.2 flex-flow、flex-direction、flex-wrap——父盒子

• flex-flow:是flex-wrap和flex-direction的综合

• flex-wrap:控制子元素是否换行显示，默认不换行

  • nowrap:不换行–则收缩
  • wrap:换行
  • wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列*/

• flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)

  • row:水平排列方向，从左到右
  • row-reverse:水平排列方向，从右到左
  • column:垂直排列方向，从上到下
  • column-reverse：垂直排列方向，从下到上*/

8.3 flex、flex-grow、flex-shrink——子盒子

• flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
  • 比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
  • flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
• flex-shrink:定义收缩比例，通过设置的值来计算收缩空间
  • 比例值计算 ：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
  • 默认值为1

8.4 align-items —— 父盒子

设置盒子在侧轴方向上的对齐方式

属性值	含义
center	设置在侧轴方向上居中对齐
flex-start	设置在侧轴方向上顶对齐
flex:end	设置在侧轴方向上底对齐
stretch	拉伸：让子元素在侧轴方向上进行拉伸，填充满整个侧轴方向>> 默认值
baseline	设置文本基线对齐

综合练习

1. 去除input边框浮雕效果

先给input设置border:none, 再设置border

<style>
	input{
		box-sizing: border-box;
		width: 100%;
		height: 40px;
		line-height:40px;
		border-radius:5px;
		/* 下面2个是为了去除边框浮雕效果*/
		border : none;
		border : 1px solid grey;
		padding-left: 5px
	}
style>

<fieldset>
	<legend>学生档案legend>
	<label for="sname">姓名：label>
	<input type="email" id="sname" placeholder="请输入姓名" />
fieldset>

2. 安卓机器人

伪元素+定位+圆角

<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Documenttitle>
    <style>
        .container {

            width: 500px;
            height: 500px;
            background-color: #ccc;
            margin: 10px auto;
            border: 1px solid red;
        }

        .header {
            width: 250px;
            height: 125px;
            margin: 10px auto;
            background-color: darkgreen;
            border-radius: 125px 125px 0 0;
            position: relative;
        }

        .header::before,
        .header::after {
            content: "";
            position: absolute;
            height: 20px;
            width: 20px;
            bottom: 50px;
            background-color: #fff;
            border-radius: 50%;
        }

        .header::before {
            left: 70px;
        }

        .header::after {
            right: 70px;
        }

        /*身体开始了*/
        .body {
            height: 250px;
            width: 250px;
            background-color: darkgreen;
            margin: 10px auto 0;
            border-radius: 0 0 30px 30px;
            position: relative;
        }

        .body::before,
        .body::after {
            content: "";
            height: 180px;
            width: 30px;
            position: absolute;
            top: 20px;
            background-color: darkgreen;
            border-radius: 10px;
        }

        .body::before {
            left: -40px;
        }

        .body::after {
            right: -40px;
        }

        /*身体结束了*/

        /*足部开始了*/

        .footer {
            width: 250px;
            height: 100px;
            /*background-color: #fff;*/
            margin: 0 auto;
            position: relative;
        }
        .footer::before,
        .footer::after{
            content: "";
            background-color: darkgreen;
            height: 90px;
            width: 30px;
            position: absolute;
            border-radius: 0 0 10px 10px;

        }
        .footer::before{
            left:50px;
        }
        .footer::after{
            right: 50px;
        }

        /*足部结束了*/
    style>
head>
<body>
<div class="container">
    <div class="header">div>
    <div class="body">div>
    <div class="footer">div>
div>

body>
html>

3. 背景使用精灵图，并且增加相应区域

以前是使用大的a标签里面嵌套一个小的span，对span添加背景图片完成：

现在使用：

• background-position
• background-origin
• background-clip

.jd_topEeum {
    height: 44px;
    width: 40px;
    position: absolute;
    background: url("../images/sprites.png") no-repeat;
    background-clip: content-box;
    background-origin: content-box;
    background-size: 200px 200px; 
    padding: 12px;
    top: 0;
}

4. 手风琴案例——transition

重点是：

• 对高度从0到一个数值进行渐变
• 一开始对父亲盒子要设置 overflow:hidden 来隐藏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .menu{
            width: 200px;
            height:auto;
            margin:100px auto;
        }
        .item{
            width: 100%;
            height:auto;
        }
        .item > h3{
            height: 40px;
            line-height: 40px;
            background-color: #7dffe7;
            color: orange;
            border-bottom: 2px solid #ccc;
            padding-left:10px;
        }
        .item > .itemBox{
            width: 100%;
            height:0px;
            overflow: hidden;
            /*display: none;*/
            /*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡*/
            /*1.一定要设置为哪些css样式添加过渡效果*/
            /*transition-property: display;*/
            transition-property: height;
            /*2.一定要设置过渡效果的耗时*/
            transition-duration: 1s;
        }
        .item > .itemBox > ul{
            list-style: none;
            background-color: #eaffb6;
            padding:10px;
        }

        /*为item添加hover伪类*/
        .item:hover > .itemBox{
            /*display: block;*/
            height: 110px;
        }
    style>
head>
<body>
<div class="menu">
    <div class="item">
        <h3>市内新闻h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
            ul>
        div>
    div>
    <div class="item">
        <h3>省内新闻h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
            ul>
        div>
    div>
    <div class="item">
        <h3>国内新闻h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
            ul>
        div>
    div>
    <div class="item">
        <h3>国际新闻h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
                <li>深圳超市肉菜档遭抢li>
            ul>
        div>
    div>
div>

body>
html>

5. 扑克牌旋转案例——rotate

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .pkBox{
            width: 155px;
            height: 219px;
            position: relative;
            margin:300px auto;
        }
        .pkBox > img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /*添加过渡*/
            transition: transform 2s;
            /*设置旋转轴心*/
            transform-origin: right top;
        }
        /*添加鼠标上移的效果*/
        .pkBox:hover >img:nth-of-type(1){
             transform: rotate(60deg);
         }
        .pkBox:hover >img:nth-of-type(2){
            transform: rotate(120deg);
        }
        .pkBox:hover >img:nth-of-type(3){
            transform: rotate(180deg);
        }
        .pkBox:hover >img:nth-of-type(4){
            transform: rotate(240deg);
        }
        .pkBox:hover >img:nth-of-type(5){
            transform: rotate(300deg);
        }
        .pkBox:hover >img:nth-of-type(6){
            transform: rotate(360deg);
        }
    style>
head>
<body>
<div class="pkBox">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
div>
body>
html>

6. 盾牌案例——多个transform

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #31965b;
        }
        .box{
            width: 440px;
            margin:100px auto;
        }
        .box > img{
            transition: transform 1s;
        }
        .box > img:nth-of-type(1){
            transform: translate(100px,100px) rotate(30deg);
        }
        .box > img:nth-of-type(2){
            transform: translate(-100px,-100px) rotate(-30deg);
        }
        .box > img:nth-of-type(3){
            transform: translate(200px,200px) rotate(60deg);
        }
        .box > img:nth-of-type(4){
            transform: translate(-200px,-200px) rotate(-60deg);
        }
        .box > img:nth-of-type(5){
            transform: translate(150px,150px) rotate(90deg);
        }
        .box > img:nth-of-type(6){
            transform: translate(50px,150px) rotate(-90deg);
        }
        .box > img:nth-of-type(7){
            transform: translate(-150px,-150px) rotate(60deg);
        }
        .box > img:nth-of-type(8){
            transform: translate(10px,-250px) rotate(-90deg);
        }
        .box > img:nth-of-type(9){
            transform: translate(-250px,10px) rotate(45deg);
        }

        .box:hover > img{
            transform: none;
        }
    style>
head>
<body>
<div class="box">
    <img src="../images/shield_1_01.png" alt="">
    <img src="../images/shield_1_02.png" alt="">
    <img src="../images/shield_1_03.png" alt="">
    <img src="../images/shield_1_04.png" alt="">
    <img src="../images/shield_1_05.png" alt="">
    <img src="../images/shield_1_06.png" alt="">
    <img src="../images/shield_1_07.png" alt="">
    <img src="../images/shield_1_08.png" alt="">
    <img src="../images/shield_1_09.png" alt="">
div>
body>
html>

7. 正方体

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            margin:100px auto;
            position: relative;
            /*让box默认旋转，方便观察*/
            transform: rotate3d(1,1,0,0deg);
            /*让子元素保留3d变换之后的效果*/
            transform-style: preserve-3d;
            /*添加透视景深效果*/
            perspective: 0px;
            /*设置透视的观察角度*/
            perspective-origin: 0px 0px;
        }
        .box > div{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.5;
        }
        .front{
            background-color: red;
            transform: translateZ(100px);
        }
        .back{
            background-color: green;
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left{
            background-color: blue;
            /*移动+旋转*/
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background-color: pink;
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background-color: purple;
            transform: translateY(-100px) rotateX(90deg);
        }
        .bottom{
            background-color: orange;
            transform: translateY(100px) rotateX(-90deg);
        }
    style>
head>
<body>
<div class="box">
    <div class="front">frontdiv>
    <div class="back">backdiv>
    <div class="left">leftdiv>
    <div class="right">rightdiv>
    <div class="top">topdiv>
    <div class="bottom">bottomdiv>
div>
body>
html>

8. 图片无缝轮播滚动

• 多一倍的图片数量
• 循环执行动画

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 882px;
            height: 86px;
            margin:100px auto;
            background-color: #ddd;
            overflow: hidden;
        }
        div >ul{
            width: 200%;
            list-style: none;
            /*1.设置的名称*/
            animation-name: move;
            /*2.设置动画的耗时*/
            animation-duration: 7s;
            /*3.市场无限循环*/
            animation-iteration-count: infinite;
            /*4.设置时间函数*/
            animation-timing-function: linear;
        }

        div > ul > li{
            width:126px;
            float: left;
        }
        div > ul > li　> img{
            width:100%;
        }
        /*鼠标上移，停止动画*/
        div:hover > ul{
            cursor: pointer;
            animation-play-state: paused;
        }

        /*创建动画*/
        @keyframes move {
            from{
                transform:translateX(0);
            }
            to{
                transform:translateX(-882px);
            }
        }
    style>
head>
<body>
<div>
    <ul>
        <li><img src="../images/1.jpg" alt="">li>
        <li><img src="../images/2.jpg" alt="">li>
        <li><img src="../images/3.jpg" alt="">li>
        <li><img src="../images/4.jpg" alt="">li>
        <li><img src="../images/5.jpg" alt="">li>
        <li><img src="../images/6.jpg" alt="">li>
        <li><img src="../images/7.jpg" alt="">li>
        <li><img src="../images/1.jpg" alt="">li>
        <li><img src="../images/2.jpg" alt="">li>
        <li><img src="../images/3.jpg" alt="">li>
        <li><img src="../images/4.jpg" alt="">li>
        <li><img src="../images/5.jpg" alt="">li>
        <li><img src="../images/6.jpg" alt="">li>
        <li><img src="../images/7.jpg" alt="">li>
    ul>
div>

body>
html>

9. ★上传图片预览——fileReader

<form action="">
    文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
    <div>div>
    <input type="submit">
form>
<img src="" alt="">
<script>
    var div=document.querySelector("div");
    /*FileReader:读取文件内容
    * 1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
    * 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
    * 3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
    * abort():中断读取*/
    function getFileContent(){
       /*1.创建文件读取对象*/
        var reader=new FileReader();
        /*2.读取文件，获取DataURL
        * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
        * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
        * 2.3:文件存储在file表单元素的files属性中，它是一个数组*/
        var file=document.querySelector("#myFile").files;
        reader.readAsDataURL(file[0]);
        /*获取数据*/
        /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
        * onabort:读取文件中断片时触发
        * onerror:读取错误时触发
        * onload:文件读取成功完成时触发
        * onloadend:读取完成时触发，无论成功还是失败
        * onloadstart:开始读取时触发
        * onprogress:读取文件过程中持续触发*/
        reader.onload=function(){
            //console.log(reader.result);
            /*展示*/
            document.querySelector("img").src=reader.result;
        }

        reader.onprogress=function(e){
            var percent= e.loaded/ e.total*100+"%";
            div.style.width=percent;
        }
    }
script>

任务说明

第一、二天： html新增标签和属性
第三-五天： CSS3新增样式
第六天：案例回顾——H5+C3知识零散

剩余没有说的内容：

• 媒体查询
• rem