本文讲解HTML5实用知识点
新增的表单type
Canvas使用
SVG使用
Audio使用
Video使用
网页缓存
文件缓存
后台worker
Server-Sent Events
定位
拖放功能
-
<input type="color" name="myColor"> 颜色表单 <input type="date" name="myDate"> 日期表单 <input type="email" name="myEmail" required> 邮箱，自带验证 <input type="month" name="myMonth"> 月份表单 <input type="number" min="1" max="10" step="0.5" > 数字框 <input type="range" min="1" max="10" step="0.5" > range输入控件 <input type="search" name="mySearch"> 搜索框 <input type="tel" name="mytelephone" required> 电话框 <input type="time" name="mytime"> 时间输入框 <input type="url" name="mywebsite" required> 网址输入框 <input type="week" name="myweek"> 周选择框 -
- 创建canvas标签
canvas标签默认宽 300px 高 150px，canvas标签左上角是原点坐标 <canvas id="myCanvas" widht="500" height="300"></canvas>- 画线
window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 创建2d上下文 context.moveTo(50, 100); // 设置线的起点 context.lineTo(100, 200); // 设置线的终点 context.stroke(); // 连接两点 }- 画圆弧
语法格式 context.arc(原点x, 原点y, 半径, 开始角度, 结束角度, 是否逆时针); context.arc(200, 100, 50, 0.6 * Math.PI, 1.2 * Math.PI, false); // 描画弧的点 context.stroke(); // 连接点- 画圆
context.arc(200,100, 50, 0, 2 * Math.PI, false); context.stroke();- 画矩形
语法格式 context.rect(起始点坐标x, 起始点坐标y, 矩形宽, 矩形高); context.rect(100,100,50,100); context.stroke();- 改变样式
stroke方法默认是用宽1pixel的黑色实线画图 context.strokeStyle = "red"; 设置线的颜色 context.lineWidth = 5; 设置线的宽度 context.lineCap = "round"; 设置线端点的形状 context.fillStyle = "yellow"; 设置填充颜色 context.fill(); 填充图形，这个方法最好在stroke方法之前使用- 使用渐变色
线性渐变 context.strokeStyle = "red"; context.lineWidth = 5; context.rect(50,100,100,100); var grd = context.createLinearGradient(50,100,150,200); // 创建线性渐变的区域 grd.addColorStop(0, '#8ED6FF'); // 添加渐变色 grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; // 填充 context.fill(); context.stroke(); 辐射渐变 context.strokeStyle = "red"; context.lineWidth = 5; context.arc(150, 100, 70, 0, 2 * Math.PI, false); var grd = context.createRadialGradient(150, 100, 10, 150, 100, 100); grd.addColorStop(0, '#8ED6FF'); grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); context.stroke();- 添加文本
context.font='bold 32px Arial'; context.textAlign='center'; context.textBaseline='middle'; 实心文字 context.fillStyle='red'; context.fillText("你好吗", 50, 50, 100); 空心文字 context.strokeStyle='red'; context.strokeText("你好吗", 50, 50, 100); -
- 创建svg标签
svg用来画矢量图形，任意放大缩小都不会丢失图像质量 <svg width="500" height="500"> <text x="10" y="20" style="font-size: 14px;"> 你的浏览器支持svg </text> 你的浏览器不支持svg </svg>- 画线
<svg width="500" height="500"> <line x1="50" y1="50" x2="100" y2="150" style="stroke:red;stroke-3;"></line> </svg>- 画矩形
<svg width="500" height="500"> <rect x="50" y="50" width="200" height="100" style="fill: red;stroke: black;stroke- 3;"></rect> </svg>- 画圆
<svg width="500" height="500"> <circle cx="150" cy="100" r="50" style="fill:limegreen; stroke:black; stroke- 3;"></circle> </svg>- 画文字
文字块 <svg width="500" height="500"> <text x="10" y="20" style="fill:rebeccapurple; font-size: 22px;">你们好吗？</text> <text x="10" y="20" dx="0" dy="50" style="fill:chocolate; font-size:20px;">非常好，谢谢！</text> </svg> x,y表示文本右上角坐标 dx,dy表示相对于上一个文本的坐标 文字段 <svg width="500" height="500"> <text x="30" y="20" style="fill:palegoldenrod; font-size: 20px;transform:rotate(30deg);"> <tspan x="30" y="10" style="fill:violet; font-size: 15px;">欢迎来到这里！</tspan> <tspan dx="-100" dy="20" style="fill:brown; font-size: 20px;">在这里你可以学到很多东西！</tspan> </text> </svg> -
基本使用 <audio controls="controls" src="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3"> 你的浏览器不支持audio </audio> 兼容处理 <audio controls="controls"> <source src="birds.mp3" type="audio/mpeg"> <source src="birds.ogg" type="audio/ogg"> 你的浏览器不支持audio </audio> 使用a标签也可以播放音乐 <a href="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3">播放</a> 使用object标签播放音乐 object标签用来将各种媒体类型的文件嵌套展示在html文档中 <object data="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3" width="200px" height="50px"></object> 使用embed也可以实现 <embed src="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3" width="200px" height="50px"> -
基本使用 <video controls="controls" src="http://114.80.149.155/vlive.qqvideo.tc.qq.com/AWxNgT15MDV-qHJX5cxO9KrgFw-QnllWwnyAPHB6Nunc/w0200ph7kmn.p201.1.mp4?vkey=540F0275B3B1E386A056820358C08C5462CAD4EFEA3AAAE522FB267A7752F019FE18D07FCAA4C0F87AB009EC47D87639C8ED5E39EB201E6D8356180B27B087E5DADE51850EE7EF89C62456A8BC8AC0C3BBE07D5AFFA5CFE70502CB7D9B6B2688FFC14D814469155BB96C6949A2FFA0DF69564134A09DA087&platform=10201&sdtfrom=&fmt=shd&level=0">你的浏览器不支持video</video> 兼容写法 <video controls="controls"> <source src="shuttle.mp4" type="video/mp4"> <source src="shuttle.ogv" type="video/ogg"> 你的浏览器不支持video </video> 同样也可以使用object和embed播放电影 -
网页缓存可以缓存5M的数据在本地 localStorage 永久缓存在本地 if(localStorage) { localStorage.setItem("name", "yejiawei"); // 存数据 console.log(localStorage.getItem("name")); // 取数据 localStorage.removeItem("name"); // 移除数据 localStorage.clear(); // 移除所有数据 }else{ alert("你的浏览器不支持localStorage"); } sessionStorage 当用户关闭当前页或者关闭浏览器，数据自动清除 用法和localStorage一样 if(sessionStorage) { sessionStorage.setItem("name", "yejiawei"); console.log(sessionStorage.getItem("name")); sessionStorage.removeItem("name"); sessionStorage.clear(); }else{ alert("你的浏览器不支持sessionStorage"); } -
文件缓存可以用来，指导浏览器如何缓存文件和断网的情况下展示什么页面 先创建一个配置文件，比如test.appcache，写如下内容 CACHE MANIFEST # v1.0: 2018/1/14 CACHE: # 需要缓存的文件 index.html index.css NETWORK: # 不需要缓存的文件 124463.js FALLBACK: # 掉线之后展示的页面 offline.html 修改index.html <html lang="en" manifest="example.appcache"> 此时浏览器文件缓存已经配置好了，当用户断开与服务器的连接的时候，展示offfline.html文件 -
大家应该都知道，js是单线程语言，当计算量很大的时候，会阻塞页面，html5提供了一个web worker的功能可以让你创建类似多线程的功能 worker需要在一个服务器环境中运行 将复杂的代码可以单独抽取到一个js文件中，比如index.js var i = 0; function countNumber() { if(i < 10000){ i = i + 1; postMessage(i); // 将信息发送到主线程上 } console.log(i); setTimeout(countNumber, 500) } countNumber(); 在主线程上调用worker接受信息 if(window.Worker) { var worker = new Worker("./index.js"); worker.onmessage = function(event) { document.getElementById("showBox").innerText = event.data; if(event.data == 10) { worker.terminate(); // 终止worker } } }else{ alert("你的浏览器不支持worker"); } -
ajax请求使用XMLHttpRequest对象，此对象只会连接一次，如果要和后端建立长时间的连接，就要使用sse了 前端的写法 window.onload = function () { var source = new EventSource("api/Test"); source.onmessage = function (event) { document.getElementById("box").innerHTML = event.data; } source.onopen = function (event) { } source.onerror = function (event) { } } C#后端的写法 public HttpResponseMessage Get () { HttpResponseMessage response = Request.CreateResponse(); response.Content = new PushStreamContent((Stream stream, HttpContent content, TransportContext context) => { if(stream != null) { using (var writer = new StreamWriter(stream)) { writer.WriteLine("data:" + JsonConvert.SerializeObject(DateTime.Now.ToString()) + " "); ; writer.Flush(); } } }, "text/event-stream"); return response; } 上面的例子，前端可以在页面上展示后端服务器实时的时间，3s刷新一次 -
经纬度的获取 function getPosition() { if(navigator.geolocation) { var box = document.getElementById("showBox"); box.innerHTML = "正在定位..."; navigator.geolocation.getCurrentPosition(function(position) { // 需要用户同意定位 var latitude = position.coords.latitude; var longitude = position.coords.longitude; box.innerHTML = "您当前的坐标是 " + "经度：" + longitude + ",纬度：" + latitude },function (err){ // 错误处理 if(err.code == 1) { box.innerHTML = "你拒绝了定位"; }else if(err.code == 2) { box.innerHTML = "网络问题无法定位"; }else if(err.code == 3) { box.innerHTML = "定位超时"; }else { box.innerHTML = "定位过程中发生了，未知错误"; } }) }else{ alert("你的浏览器不支持html5地理定位"); } } 追踪定位 作者提醒：这个实时定位，当页面在后台和前台之间切换时才会刷新，具体原因未知 <div id="showBox"></div> <button type="button" id="btn">开始追踪</button> <script> window.onload = function() { var btn = document.getElementById("btn"); var box = document.getElementById("showBox"); var watchID; btn.onclick = function() { if(watchID){ btn.innerHTML = "开始追踪"; navigator.geolocation.clearWatch(watchID); watchID = false; }else{ btn.innerHTML = "正在获取坐标..."; getPosition(); } } function getPosition() { if(navigator.geolocation) { watchID = navigator.geolocation.watchPosition(function(position) { btn.innerHTML = "停止追踪"; if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){ var prevLat = position.coords.latitude; var prevLong = position.coords.longitude; var positionInfo = "你的当前坐标是 (" + "纬度: " + position.coords.latitude + ", " + "经度: " + position.coords.longitude + ")"; box.innerHTML = positionInfo; } }) }else{ alert("你的浏览器不支持html5地理定位"); } } } </script> -
css body{ background: grey; } #dropBox{ 300px; height: 300px; border: 5px dashed gray; background: lightyellow; text-align: center; margin: 20px 0; color: orange; } #dropBox img{ margin: 25px; } html <h2>拖放功能例子</h2> <p>将图片拖拽到div中</p> <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);"></div> <img src="./1.jpg" id="img" draggable="true" ondragstart="dragStart(event);" width="250" height="250"> 设置 draggable="true" 表示元素可拖动，默认情况下，选中的文本，图片，带有href属性的a标签都是可以拖动的 js function dragStart(e) { e.dataTransfer.effectAllowed = "move"; // 设置拖动的元素可以执行的动作 e.dataTransfer.setData("Text", e.target.getAttribute("id")); // 设置拖动的数据 } function dragOver(e) { // 清除浏览器的默认行为 e.preventDefault(); e.stopPropagation(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var data = e.dataTransfer.getData("Text"); // 获取拖动的数据 e.target.appendChild(document.getElementById(data)); } 拖放的相关事件 ondragstart 用户开始拖元素触发一次 ondragenter 比ondragstart后调用 ondragover 用户将拖拽的元素放到容器的上方一直触发 ondreagleave 当拖拽元素的鼠标位置离开了元素的边界触发一次 ondrag 拖拽元素一直触发 ondrop 用户将拖拽的元素，在容器上方松开，触发 ondragend 只要用户松开了，就触发