一、 表单元素
1. <prgress>：标签标示任务的进度（进程），进度条（文件上传、下载、加载...），需结合js展示任务进度。
1 <p>max为进度条的进度最大值，value为进度条完成的进度（若无max，value值为0-1之间）</p>
2 <progress value='30' max='100'></progress>
3 <p>没有value值的progress就像一个加载中loading，中间的进度块来回游荡，可以用作loading来使用，表示正在页面加载中</p>
4 <progress></progress>
在chrome浏览器下如图：
2.<meter>：主要表现规定范围内的数量值，例如磁盘的使用量，比例值等。
1 <p>value:实际数量值;min:允许的最小值;max:允许的最大值;low:下限值;high:上限值;optimum:最佳值</p>
2 <meter min="0" low="50" high="150" max="200" optimum="100" value="100"></meter>
3 <p>最佳值optimum在min与low之间：</p>
4 <p>value在min与low之间：<meter min="0" low="50" high="150" max="200" optimum="30" value="20"></meter></p>
5 <p>value在low与high之间：<meter min="0" low="50" high="150" max="200" optimum="30" value="100"></meter></p>
6 <p>value在high与max之间：<meter min="0" low="50" high="150" max="200" optimum="30" value="170"></meter></p>
7 <p>最佳值optimum在low与high之间：</p>
8 <p>value在min与low之间：<meter min="0" low="50" high="150" max="200" optimum="100" value="20"></meter></p>
9 <p>value在low与high之间：<meter min="0" low="50" high="150" max="200" optimum="100" value="100"></meter></p>
10 <p>value在high与max之间：<meter min="0" low="50" high="150" max="200" optimum="100" value="170"></meter></p>
11 <p>最佳值optimum在high与max之间：</p>
12 <p>value在min与low之间：<meter min="0" low="50" high="150" max="200" optimum="170" value="20"></meter></p>
13 <p>value在low与high之间：<meter min="0" low="50" high="150" max="200" optimum="170" value="100"></meter></p>
14 <p>value在high与max之间：<meter min="0" low="50" high="150" max="200" optimum="170" value="170"></meter></p>
在chrome浏览器下如图：
3. <output>：定义不同类型的输出，比如脚本的输出。
1 <!--计算器:for:输出域相关的一个或多个元素-->
2 <form oninput="c.value = parseInt(a.value) + parseInt(b.value)">
3 <input type="number" id="a" value="50" />
4 +<input type="number" id="b" value="50" />
5 =<output name="c" for="a b"></output>
6 </form>
在chrome浏览器下如图：
4. <datalist>：定义选项列表，与 input 元素配合使用（可自定义的下拉框）。
1 <!--input的list与datalist的id对应-->
2 <input id="myFlower" list="flowers" />
3 <datalist id="flowers">
4 <option value="Rose">
5 <option value="Sunflower">
6 <option value="Dandelion">
7 </datalist>
在chrome浏览器下如图：
可自定义：
5. 表单元素的新属性：placeholder、mutiple、autofocus、form、required、min、max、minlength、maxlength、pattern等。
二、音频、视频API（<audio>，<video>）
1. 音频
1 <!--src:歌曲路径;controls:播放控制(显示audio自带的播放控件);loop:歌曲循环;autoplay:歌曲加载后自动播放(只有pc端可以实现)-->
2 <audio src="asset/music/music1.mp3" controls="controls" loop="loop" autoplay="autoplay">您的浏览器不支持html5的audio标签</audio> 在chrome浏览器下如图：
1）对象属性：
(1) currentTime: 当前播放时间；
(2) duration: 歌曲的总时间；
(3) startTime: 返回起始播放时间；
(4) play: 是否在播放，布尔值；
(5) pause: 是否暂停，布尔值；
2）对象方法：
(1) play(): 播放歌曲；
(2) pause(): 暂停歌曲；
(3) load(): 重新加载歌曲；
2. 视频
1 <!--src:视频路径;controls:播放控制(显示video自带的播放控件);loop:视频循环;autoplay:视频加载后自动播放(只有pc端可以实现);preload:如何下载音频-->
2 <video src="asset/video/video1.mp4" controls="controls" loop="loop" autoplay="autoplay" preload="auto"></video>
1）常用事件：
(1) oncanplay: 当文件就绪可以开始播放时触发；
(2) ontimeupdate: 当播放位置（快进、快退）改变时触发；
(3) onended: 当播放到结尾时触发；
2）属性：同上<radio>的1）部分
3）方法：同上<radio>的2）部分
三、.画布API（<canvas)>）
Canvas：H5原生技术，基于网页画布绘制2D位图绘图技术，适合像素处理，动态渲染和大数据量绘制（如网页游戏）；开源可视化JS库：ECharts.js等。
SVG：H5借鉴技术，使用XML技术绘制2D矢量图绘图技术，缩放不会失真，适合静态图片展示，大型渲染区域（如地图），高保真文档查看和打印等应用场景；开源可视化JS库：D3.js 、Highcharts等。
WebGL：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js。
Canvas与SVG的不同：
(1) Canvas是位图；SVG是矢量图；
(2) Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)；
(3) Canvas内容不能使用CSS；SVG内容可以使用CSS；
(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定；
(5) Canvas适合小面积、大数量应用场景；SVG适合大面积、小数量应用场景。
1）矩形
Canvas
1 <canvas id="drawing" width="200" height="200" style="margin-top: 20px;">A Canvas!</canvas>
1 <script>
2 var draw = document.getElementById("drawing");
3 if (draw.getContext) {
4 var context = draw.getContext("2d");
5 // 矩形
6 context.fillStyle = "red";
7 context.strokeStyle = "black";
8 context.lineWidth = 5;
9 context.lineJoin = "round";
10 context.fillRect(10,10,50,50);
11 context.strokeRect(10,10,50,50);
12 }
13 </script>
SVG
1 <svg width="200" height="200">
2 <rect x="10" y="10" width="50" height="50" fill="red" stroke="black" stroke-width="5"></rect>
3 </svg>
2）圆形
Canvas
1 var draw = document.getElementById("drawing");
2 if (draw.getContext) {
3 var context = draw.getContext("2d");
4 context.beginPath();
5 context.arc(100, 100, 50, 0, 360);
6 // 第二个圆
7 context.moveTo(140, 100);
8 context.arc(100, 100, 40, 0, 360);
9 // 画钟表指针
10 context.moveTo(100, 100);
11 context.lineTo(120, 100);
12 context.moveTo(100, 100);
13 context.lineTo(100, 70);
14 // 边框样式
15 context.strokeStyle = "red";
16 // 阴影
17 context.shadowColor = "black";
18 context.shadowOffsetX = 5;
19 context.shadowOffsetY = 5;
20 context.shadowBlur = 4;
21 context.stroke();
22 }
SVG
1 <svg width="200" height="200">
2 <circle r="50" cx="100" cy="100" fill="red" fill-opacity="0.4" stroke="black" stroke-width="5" stroke-opacity="0.4"></circle>
3 </svg>
用css画圆
1 .div1 {
2 width: 50px;
3 height: 50px;
4 border: 3px solid red;
5 border-radius: 50%;
6 }
3）椭圆
Canvas
1 var draw = document.getElementById("drawing");
2 if (draw.getContext) {
3 var context = draw.getContext("2d");
4 if (context.ellipse){
5 // 参数顺序:起点x坐标，起点y坐标，半径x坐标，半径y坐标，旋转角度，起始角度，结果角度，是否逆时针
6 context.ellipse(100,70,30,50,0,0,360);
7 context.fillStyle = "red";
8 context.strokeStyle = "black";
9 context.fill();
10 context.stroke();
11 }else {
12 alert("no ellipse!");
13 }
SVG
1 <svg width="200" height="200">
2 <ellipse rx="30" ry="50" cx="100" cy="100" fill="red" fill-opacity="0.4" stroke="black" stroke-width="5" stroke-opacity="0.4"></ellipse>
3 </svg>
4）直线
Canvas
1 var draw = document.getElementById("drawing");
2 if (draw.getContext) {
3 var context = draw.getContext("2d");
4 context.beginPath();
5 context.moveTo(10,100);
6 context.lineTo(150,50);
7 context.strokeStyle = "red";
8 context.lineWidth = 4;
9 // 全局透明度
10 context.globalAlpha = 0.4;
11 context.stroke();
12 }
SVG
1 <svg width="200" height="200">
2 <!--line无fill-->
3 <line x1="10" y1="100" x2="150" y2="50" stroke="red" stroke-width="4" stroke-opacity="0.4"></line>
4 </svg>
5）折线
SVG
1 <svg width="500" height="500">
2 <!--fill需为transparent，否则折线其他部分会填充颜色-->
3 <polyline points="150,200 250,100 350,300 450,50" stroke="black" stroke-width="5" stroke-opacity=".4" fill="transparent"></polyline>
4 </svg>
Canvas: 合理运用moveTo()与lineTo()即可；折线图可用CanvasJS库等。
6）多边形
SVG
1 <svg width="500" height="500">
2 <!--最后会自动连接起点和终点-->
3 <polygon points="100,150 100,300 300,300 400,150 250,220" fill="red" fill-opacity=".4" stroke="black" stroke-width="5" stroke-opacity=".4"></polygon>
4 </svg>
Canvas: 同上，合理运用moveTo()与lineTo()。
7）渐变
Canvas
1 // 参数：渐变开始位置x，y，结束位置x，y
2 var gradient = context.createLinearGradient(55, 55, 150, 150);
3 // 放射性渐变，参数：渐变开始圆心x，y，半径，结束圆心x，y，半径
4 // var gradient = context.createRadialGradient(100,100,10,100,100,50);
5 // 渐变颜色
6 gradient.addColorStop(0, "white");
7 gradient.addColorStop(1, "blue");
8 context.fillStyle = gradient;
9 context.fill();
SVG: SVG 渐变必须在 <defs> 标签中进行定义
1 <svg width="500" height="500">
2 <!--SVG 渐变必须在 <defs> 标签中进行定义-->
3 <defs>
4 <!--线性渐变：(x1,y1)起始位置，(x2,y2)终止位置-->
5 <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">
6 <stop offset="0" stop-color="white"></stop>
7 <stop offset="0.5" stop-color="green"></stop>
8 <stop offset="1" stop-color="blue"></stop>
9 </linearGradient>
10 <!--放射性渐变：(cx,cy)外圈圆心位置，r外圈半径，(fx,fy)内圈圆心位置-->
11 <radialGradient id="g1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
12 <stop offset="0%" stop-color="white" stop-opacity="0"/>
13 <stop offset="100%" stop-color="blue" stop-opacity="1"/>
14 </radialGradient>
15 </defs>
16 <rect x="0" y="0" height="200" width="200" fill="url(#g)" stroke="url(#g)"></rect>
17 <rect x="200" y="0" height="200" width="200" fill="url(#g1)" stroke="url(#g1)"></rect>
18 </svg>
四、地理定位API（Geolocation）
Geolocation API 允许用户向 Web 应用程序提供他们的位置，如果用户同意，浏览器会返回一个位置信息，通过用户的手机、电脑等底层设备提供给浏览器。
位置获取的几种方式：
1）电脑的IP地址（使用PC浏览器时），存在的误差较大；
2）GPS地理定位，定位精度准确，定位时间较长，室内效果不好；
3）WIFI地理定位，可在室内使用；
4）手机地理定位，通常基于WIFI和GPS的地理定位信息结合使用。
方法：
1. getCurrenPosition(): 确定设备位置，返回一个带有位置信息的Position对象。
1 navigator.geolocation.getCurrentPosition(
2 function (position) {
3 // 成功得到位置信息时的回调函数
4 position.timestamp; //定位时间
5 position.coords.latitude; //纬度
6 position.coords.longitude; //经度
7 position.coords.altitude; //海拔高度
8 position.coords.accuracy; //准确度
9 position.coords.speed; //地面速度
10 position.coords.heading; //行进方向
11 },
12 function (positionError) {
13 // 可选，获取位置信息失败是时的回调函数
14 console.warn('ERROR(' + positionError.code + '): ' + positionError.message);
15 },
16 options = {
17 //可选，PositionOptions对象
18 enableHighAccuracy: true, //通知浏览器启用html5服务高精确度模式
19 maximunAge: 0, //表示浏览器重新计算位置的时间间隔，以ms为单位的值
20 timeout: 2000 //告诉浏览器计算当前位置所允许的最长时间，默认为infinity无限大。
21 }
22 );
2. watchPosition(): 注册一个位置改变监听器，每当设备位置改变时，返回一个long类型的ID值。
1 var id = navigator.geolocation.watchPosition(
2 // 参数同getCurrentPosition
3 function (position) {
4 // 若经纬度发生改变时，返回字符串；target为目标位置
5 if(target.latitude === position.coords.latitude && target.longitude === position.coords.longitude){
6 console.log('恭喜你到达目标！');
7 // 取消位置监听器
8 navigator.geolocation.clearWatch(id);
9 }
10 },
11 error,
12 options
13 );
3. clearWatch(): 取消watchPosition()注册的位置监听器；参数为watchPosition()返回的id值。
五、文件拖拽（drag,drop,dataTransfer,FileReader）
1. 拖动原对象触发的事件：
(1) ondragstart: 拖动开始；
(2) ondrag: 拖动中；
(3) ondragend: 拖动结束；
2. 拖动目标对象触发的事件：
(1) ondragenter: 鼠标拖动对象进入时触发；
(2) ondragover: 拖动对象在另一容器悬停时触发；
(3) ondrop: 释放鼠标键时触发；
(4) ondragleave: 拖动对象离开容器时触发；
3. 步骤：
1）为了使元素可拖动，元素的draggable属性需设为true。
2）拖动原对象ondragstart(原对象(被拖元素)event)：获取原对象数据，被拖动时会发生什么
event.dataTransfer.setData("Text", event.target.id): 设置被拖元素数据类型和值。
3）放置的位置ondragover(目标对象(容器)event): 规定在何处放置被拖数据
event.preventDefault(): 阻止元素的默认处理方式；
4）放置ondrop(目标对象(容器)event)
(1) event.preventDefault();
(2) var data = event.dataTransfer.getData("Text"): 获得被拖数据
(3) event.target.appendChild(document.getElementById(data)); 将元素写入目标容器
4. 文件拖拽（配合FileReader）
event.dataTransfer.files: 获取拖拽文件
1） readAsText 以文本方式读取 （多用于读取文本文件）
2） readAsDataURL 以base64方式读取 （多用于读取图片）
3） readAsArrayBuffer 以二进制的方式读取（不常用，js难以操作这种数据类型）
4） readAsBinaryString 以二进制字符串的方式读取 （多用于上传数据）
