1、HTML5的基本介绍
HTML4包含下面4部分：
1）html标签：页面的基本结构
2）css：用来控制页面上的元素的显示
3）javascript：主要是用来控制页面上的逻辑
HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了WEB应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等；还提供了一些javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现原生应用，甚至结合Canvas开发网页版游戏。
H5范称
HTML5标签+css3+JS（js的API）
2、语义标签
nav----导航
header----页眉
footer----页脚
section----区块
acticle----文章
process----进度条
使用这些语义标签，更有利于搜索引擎或者辅助设备来理解HTML页面内容。
3、新增标签（还有很多）
几个具有颠覆性的标签：这两个标签可以在网页中播放视频
video：用来控制视频的播放
audio：用来控制音频的播放
4、新增js API
1）换肤：在用户的客户端去存一些东西，早之前我们存储数据都是用cookie；
html5新增了两个对象：
sessionStorage：保存在浏览器内存中
localStorage：永久保存
小案例1：换肤，使用localStorage保存数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>换肤</title>
</head>
<body>
<div style="float: right;">
<select>
<option value="none">换肤</option>
<option value="yellow">黄色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
<option value="pink">粉色</option>
</select>
</div>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
//每次打开页面时，先去读取localStorage中的color，并且设置背景
var color = window.localStorage.getItem("color");
if(color){
document.body.style.background = color;
}
document.querySelector("select").onchange = function(){
var color = this.value;
document.body.style.background = color;
//把这个数据保存到localStorage中
//以键值对的方式保存
window.localStorage.setItem("color",color);
};
</script>
</body>
</html>
总结：百度搜索记住用户的搜索关键字也是这样实现的。
2）定位：JS提供API可以获取用户的经纬度，早期只能通过ip进行定位。
现在使用js获取用户经纬度，然后调用第三方的接口，比如百度地图、高德地图；
基于lbs的服务:Location base service。
使用pc去获取经纬度存在一些问题。
小案例2：百度地图
首先要进入百度地图的api官网
1：获取用户的经纬度
2：调用百度地图，把我们的经纬度传过去
3：渲染
3）CSS3动画：CSS库，别人写好的一系列CSS库，比如animate.css
animate.css：一款强大的CSS动画库；预设了引起弹跳（bounce）、摇摆(swing）、颤抖（wobble）、抖动（shake）、闪烁（flash）、翻转（flip）、旋转（rotate）、淡入淡出（fale）、滑动（sliding）、光速（lightspeed）、缩放变焦（zoom）、翻滚（roll）等多达70中动画特效。
小案例3：支付宝咻一咻特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>支付宝特效</title>
<style type="text/css">
html,body{
height: 100%;
}
/*使用c3的伸缩布局*/
body{
display: flex;
/*调整主轴和侧轴的对齐方式*/
justify-content: center;
align-items: center;
background: #1e577e;
overflow: hidden;
}
.center{
cursor: pointer;
}
.center img{
width: 128px;
height: 128px;
}
.main{
width: 128px;
height: 128px;
position: relative;
}
.main>div{
width: 128px;
height: 128px;
position: absolute;
left: 0;
top: 0px;
}
.circle{
border: 1px solid #ccc;
border-radius: 50%;
opacity: 0;
}
.circle.go{
/*animation: change 1s linear infinite;*/
animation-name: change;
animation-duration: 3s;
/*执行动画的速度*/
animation-timing-function: linear;
/*动画执行次数*/
animation-iteration-count: infinite;
}
@keyframes change{
0%{
transform: scale(1);
opacity: 0.4;
}
100%{
transform: scale(4);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="main">
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="circle">
</div>
<div class="center">
<img src="img/zhipay.png"/>
</div>
</div>
<audio src="music/6944.wav"></audio>
<script type="text/javascript">
document.querySelector(".center").οnclick=function(){
var circles = document.querySelectorAll(".circle");
//js操作必须一个一个便利，然后单独操作
//如果使用jquery则可以批量操作
for(var i=0;i<circles.length;i++){
//把动画效果加上去，实现方式：定义一个类名
circles[i].style.animationDelay = i*0.6+"s";
circles[i].classList.add("go");
}
//播放一段音频
var audio = document.querySelector("audio");
//只播放一次
audio.loop = "loop";
audio.play();
};
</script>
</body>
</html>
小案例4：宇宙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
background: #800080;
overflow: hidden;
}
ul{
width: 600px;
height: 600px;
list-style: none;
margin: 40px auto;
position: relative;
}
ul li{
border: 1px solid green;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
/*animation: change 3s linear infinite;*/
animation: change;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
li:nth-of-type(1){
width: 60px;
height: 60px;
border: none;
background: yellow;
/*设置核子阴影*/
box-shadow: 0px 0px 50px #c90;
}
li span{
position: absolute;
width: 12px;
height: 12px;
left: 50%;
top: -6px;
background: red;
border-radius: 50%;
}
li:nth-of-type(2){
width: 120px;
height: 120px;
animation-duration: 3.2s;
}
li:nth-of-type(3){
width: 180px;
height: 180px;
animation-duration: 4.2s;
}
li:nth-of-type(4){
width: 240px;
height: 240px;
animation-duration: 5.2s;
}
li:nth-of-type(5){
width: 300px;
height: 300px;
animation-duration: 7.2s;
}
li:nth-of-type(6){
width: 360px;
height: 360px;
animation-duration: 9.2s;
}
li:nth-of-type(7){
width: 420px;
height: 420px;
animation-duration: 11.2s;
}
li:nth-of-type(8){
width: 480px;
height: 480px;
animation-duration: 12.2s;
}
li:nth-of-type(9){
width: 540px;
height: 540px;
animation-duration: 16.2s;
}
li:nth-of-type(10){
width: 600px;
height: 600px;
animation-duration: 18.2s;
}
@keyframes change{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100%{
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
