一.什么是H5
HTML5的第五个版本（h5一般是指移动版的开发）
二.h5新增属性：（1）placeholden(文本框的样式设计，默认值)
<input type="text" placeholder="请设置用户名"> <input type="password" placeholder="请输入密码"> <input type="text" value="请设置用户名">
（2）input的type类型
<input type="date" name="date">//日期(年月日)框 <br> <input type="time" name="time">//时间框（几点几时几分） <br> <input type="week" name="week">//(第几周) <br> <input type="datetime-local" name="datetime"> <br> <br> <br> <input type="number"> <br> <input type="email"> <br> <input type="color" name="color"> <br> <input type="range" min="1" max="100" name="range" value="10" step="10"> <br> <input type="search" name="username"> <br> <input type="url">
（3）contenteditable（可编辑文本的框）---可以继承（也可以覆盖）
<div contenteditable="true">hello world</div> <!-- 可以继承的，可以覆盖 --> <div contenteditable="true"> hello <span contenteditable="false">world</span> </div> <div contenteditable="true"> <span contenteditable="false">用户名：</span> <span>张三 </span> </div> <div> <span>用户名：</span> <span contenteditable="true">张三 </span> </div>
（4）draggable(拖拽属性)
在标签中默认为（draggable="true"）
生命周期：（1）.鼠标按下（拖拽开始）
（2）.拖拽中；
（3）.松开鼠标，拖拽结束
拖拽属性的方法
1----divDrag.οndragstart=function(){
按下的时候必须移动一下
}
2----divDrag.ondarg=function (){
鼠标按下以后，只要移动一下，时间一直触发
}
3----divDrag.οndragend=function（）{
鼠标完成移动后处罚的事件
}
4----divTarget.οndragenter=function(){
(当拖拽元素进入区域触发）--必须鼠标进入
// 进入目标元素也有几个对应的事件 var divTarget = document.getElementsByClassName("target")[0]; divTarget.ondragenter = function(event){ //当拖拽元素进入区域触发（必须是鼠标进入） console.log('进入') }
}
5----divTarget.οndragοver=function(){
divTarget.ondragover = function(event){ //当拖拽元素的鼠标进入区域，不断触发 console.log("移动") event.preventDefault(); }
}
6----divTarget.οndragleave=function(){
divTarget.ondragleave = function(event){ //当拖拽元素的鼠标进入区域后离开，触发 console.log('移出') }
}
7----divTarget.οndrοp=function(){
divTarget.ondrop = function(event){ //当拖拽元素的鼠标进入区域后松开鼠标，触发 console.log('松开') }
}
8----拖拽元素最终都是回到拖拽的起点
（事件一定是由行为触发的，一个行为不止可以触发一个事件）
三.h5新增标签：（1）语义化标签，就是跟div差不多的东西
所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。下面将介绍<article> <section> <nav> <aside>、<header> <footer>等HTML5新增的语义化区块标签。
1----header（通常放置在页面或者页面中某个区间标题，还可以放置搜索清单，logo图片等元素，按照最新的w3c标准，我们还可以放置<nav>导航栏）
2----nav (通常表示页面的导航，可以通过导航连接到网站某个页面，或者当前网页的其他部分)
3----aside（所包含的内容不是页面的主要内容，具有独立性，是对页面的补充。）
4----footer（一般放置在页面的或者页面中某个区块的底部，包含版权信息，联系方式等信息）
5----article（表示包含于一个文档，页面，应用程序或者网站的一段地里的内容，可以被独立发布或者重新使用文章标记标签）
6----section（是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段）
（2）canvas（画布），javascript代码画图
1--canvas标签定义：在网页中提供一块区域，可以供你画图的区域（行内块标签）
当浏览器不支持canvas时会显示其中的内容
<canvas> 您的浏览器不支持画布 </canvas>
2--canvas的属性
getContext----设置画布的样式（2d；3d）
3--canvas的颜色和阴影
属性：fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 strokeStyle 设置或返回用于笔触的颜色、渐变或模式 shadowColor 设置或返回用于阴影的颜色 shadowBlur 设置或返回用于阴影的模糊级别 shadowOffsetX 设置或返回阴影距形状的水平距离 shadowOffsetY 设置或返回阴影距形状的垂直距离方法： createLinearGradient()创建线性渐变（用在画布内容上）createPattern()在指定的方向上重复指定的元素createRadialGradient()创建放射状/环形的渐变（用在画布内容上）addColorStop()规定渐变对象中的颜色和停止位置
4---线条样式
lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创建的拐角类型 lineWidth 设置或返回当前的线条宽度 miterLimit 设置或返回最大斜接长度5--矩形
rect() 创建矩形 fillRect() 绘制“被填充”的矩形 strokeRect() 绘制矩形（无填充） clearRect() 在给定的矩形内清除指定的像素6--路径
fill() 填充当前绘图（路径） stroke() 绘制已定义的路径 beginPath() 起始一条路径，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创建线条 closePath() 创建从当前点回到起始点的路径 lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条 clip() 从原始画布剪切任意形状和尺寸的区域 quadraticCurveTo() 创建二次贝塞尔曲线 bezierCurveTo() 创建三次方贝塞尔曲线 arc() 创建弧/曲线（用于创建圆形或部分圆） arcTo() 创建两切线之间的弧/曲线 isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false7--转换
scale() 缩放当前绘图至更大或更小 rotate() 旋转当前绘图 translate() 重新映射画布上的 (0,0) 位置 transform() 替换绘图的当前转换矩阵 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
（3）SVG（可以伸缩的矢量的图形）
（4）audio(声音)
（5）video（视频）
四.新增API(ES6)
定义：（1）需要地理位置的功能（GPS）
（2）重力感应：陀螺仪
（3）动画优化 request
（4）history 控制历史
（5）localstorage(当前) sessionstorage(会话) ------存储功能、存储数据
（6）websocket 聊天室，在线聊天
（7）filereader 读取文档
（8）webworker 文件异步处理
（9）fetch
转载于:https://www.cnblogs.com/lyx1014/p/11135179.html
相关资源：Html5代码示例_微信H5微场景（10个)源码