Day18 HTML5特性

前端鸭
58 阅读8分钟

每日一句

Laughter is the cure for fear.

释义：笑是恐惧的解药。

image.png

HTML5

为了更好的适应和处理当今互联网发展的应用，HTML5新增了很多的元素及功能，如图形绘制，多媒体内容，语义化标签，拖放,定位，缓存，存储等。

语义化标签

标签描述
header定义了文档的头部区域
footer定义了文档的尾部区域
nav定义文档的导航
section定义文档中的节（section、区段）
article定义页面独立的内容区域
aside定义页面的侧边栏内容
detailes用于描述文档或文档某个部分的细节
summary标签包含 details 元素的标题
dialog定义对话框，比如提示框

增强表单属性及元素

  • HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
输入类型描述
color主要用于选取颜色
date从一个日期选择器选择一个日期
datetime选择一个日期（UTC 时间）
datetime-local选择一个日期和时间 (无时区)
email包含 e-mail 地址的输入域
month选择一个月份
number数值的输入域
range一定范围内数字值的输入域
search用于搜索域
tel定义输入电话号码字段
time选择一个时间
url URL 地址的输入域
week选择周和年
  • HTML5 也新增以下表单元素
表单元素描述
datalist 元素规定输入域的选项列表使用 <input> 元素的 list 属性与 <datalist> 元素的 id 绑定
keygen提供一种验证用户的可靠方法标签规定用于表单的密钥对生成器字段。
output用于不同类型的输出比如计算或脚本输出
  • HTML5 新增的表单属性
标签属性描述
placehoder简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required是一个 boolean 属性。要求填写的输入域不能为空。
pattern描述了一个正则表达式用于验证 <input> 元素的值。
step为输入域规定合法的数字间隔。
min 和 max设置元素最小值与最大值。
width 和 height用于 image 类型的 <input> 标签的图像高度和宽度。
placehoder是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple是一个 boolean 属性。规定 <input> 元素中可选择多个值。

视频和音频

<audio>

- control 属性供添加播放、暂停和音量控件。

- 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

- <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

- 目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

<audio controls>
  <source src="video.ogg" type="audio/ogg">
  <source src="video.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

video

- control 播放、暂停和音量控件来控制视频。也可以使用dom操作play() 和 pause() 方法来控制视频的播放暂停。

- 提供了 width 和 height 属性控制视频的尺寸。如果没有设置这些属性，就会根据原始视频的大小而改变。

- 与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

- 支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg )

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>

Canvas绘图

绘制图形

  1. 直接通过canvas标签创建

<canvas id="Canvas" width="300" height="200" style="border:1px solid #000000;"></canvas>

  1. 通过js脚本创建
var canvas=document.getElementById("Canvas");
var ctx=canvas.getContext("2d"); // 内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
ctx.fillStyle="#FF0000";  // 可以是CSS颜色，渐变，或图案, 默认黑色
ctx.fillRect(0,0,150,75); // 矩形当前的填充方式。意思是：从左上角开始 (0,0)，在画布上绘制 150x75 的矩形。

绘制路径

var canvas=document.getElementById("Canvas");
var ctx=canvas.getContext("2d");
ctx.moveTo(0,0); // 定义线条开始坐标
ctx.lineTo(200,100); // 定义线条结束坐标
ctx.stroke(); // 绘制线条

绘制文本

var canvas=document.getElementById("Canvas");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial"; // 定义字体
ctx.fillText`"Hello World",10,50); // 绘制实心的文本 strokeText（空心文本）

绘制渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

两种不同的设置方式：

createLinearGradient(*x,y,x1,y1*) - 创建线条渐变

createRadialGradient(*x,y,r,x1,y1,r1*) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

var canvas=document.getElementById("Canvas");
var ctx=canvas.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

绘制图像

drawImage(*image,x,y*) 

// html
<img id="oimg" src="./images/1.jpg" style="display:none" />
<canvas id="Canvas" width="500" height="400"></canvas>

// js
var canvas=document.getElementById("Canvas");
var ctx=canvas.getContext("2d");
var img=document.getElementById("oimg");
img.onload = function() {
  ctx.drawImage(img,10,10);
}

SVG绘图

SVG是指可伸缩的矢量图形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

SVG 与 Canvas两者间的区别

  • SVG 是一种使用 XML 描述 2D 图形的语言。

  • Canvas 通过 JavaScript 来绘制 2D 图形。

  • SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

  • 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

  • Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

定位

html5为window.navigator提供了geolocation属性，用于获取基于浏览器的当前用户地理位置。

window.navigator.geolocation提供了3个方法分别是：

getCurrentPosition, watchPosition, clearWatch

window.navigator.geolocation {
  getCurrentPosition: function(onSuccess,onError[,options]) {
  // options = {
         enableHighAccuracy,//boolean 是否要求高精度的地理信息
         timeout,//获取信息的超时限制
         maximumAge//对地理信息进行缓存的时间
    } 
  // onSuccess 中有position对象
  
    /*latitude,//纬度
    longitude,//经度
    altitude,//海拔高度
    accuracy,//获取纬度或者经度的精度
    altitudeAccurancy,//海拔高度的精度
    heading,//设备前景方向。正北方向的顺时针旋转角
    speed,//设备的前进速度 m/s
    timestamp,//获取地理位置信息时候的时间*/

  
}, //
用于获取当前的位置数据 
  watchPosition: function(onSuccess,onError[,options]) {},  // 监视用户位置的改变
  clearWatch: function(watchId){}  // 清除定位监视
}　　

拖放API

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

拖放 的源对象

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

拖放 的 目标 对象

dragenter：拖动着进入

dragover：拖动着悬停

dragleave：拖动着离开

drop：释放

dataTransfer：用于数据传递的对象；

e.dataTransfer.setData(k, v); // 设置

var value = e.dataTransfer.getData(k)//获取取

Web Worker

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。

您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

具体实现：

  • 创建一个新的 web worker 对象

  • 向 web worker 添加一个 "onmessage" 事件监听器

  • 向 web worker 传递消息时，会执行事件监听器中的代码

  • 如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法。

<html>
    <head>
        <title>web workers example</title>
    </head>
    <body>
        <script src="./webworker.js"></script>
    </body>
</html>

webworker.js

// webworker.js
var worker = new Worker("webwork.js") 
// 此处仍是file协议是不允许的,需要安排到server下，通过相对路径去取
// 此处静态访问脚本文件是不被允许的
worker.onmessage = (e) => {
  console.log("worker通知的message",e.data.data)
  worker.postMessage(e.data.data.map(item => item*2))
}

webwork.js

// worker.js
postMessage({ data: [1,2,4]})
onmessage = e => {
  console.log(e.data)
}

image.png

Web Storage

早些时候,本地存储使用的是cookies。

  • localStorage: 本地永久缓存，没有时间限制

  • sessionStorage: 当用户关闭浏览器窗口后，数据会被删除

可使用的API都相同，以localStorage为例：

  • localStorage.setItem(key,value); // 设置
  • localStorage.getItem(key); // 获取
  • localStorage.removeItem(key); // 删除某一个
  • localStorage.clear(); // 删除所有
  • localStorage.key(index); // 获取某一个属性

WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。

两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send()  方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

客户端：

// 打开一个 web socket
var ws = new WebSocket("ws://localhost:8080");
ws.onopen = function() {
  // Web Socket 已连接上，使用 send() 方法发送数据
  ws.send("你多大了？");
};

ws.onmessage = function (evt){ 
  var msg = evt.data;
  alert(`数据已接收..., ${msg}`);
};

ws.onclose = function() { 
  // 关闭 websocket
  alert("连接已关闭..."); 
};

服务器端：

var WebSocket = require('ws');
var wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
  console.log('已连接服务器...');
  
  ws.on('message', function incoming(msg) {
      console.log('收到消息', msg.toString());
  });

  ws.send('从后端websocket发出: 你管我多大呢？你猜，haha!');
});

结果不出所料：

image.png

可编辑的内容

contenteditable

<div contenteditable>可编辑的文本</div>

image.png

avatar
文章
阅读
粉丝