本文讲解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-width:3;"></line>
</svg>- 画矩形
<svg width="500" height="500">
<rect x="50" y="50" width="200" height="100" style="fill: red;stroke: black;stroke-width: 3;"></rect>
</svg>- 画圆
<svg width="500" height="500">
<circle cx="150" cy="100" r="50" style="fill:limegreen; stroke:black; stroke-width: 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()) + "\n\n"); ;
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{
width: 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 只要用户松开了，就触发