【学习笔记】HTML5

最新推荐文章于 2021-03-12 16:27:29 发布

怀中猫°

最新推荐文章于 2021-03-12 16:27:29 发布

阅读量840

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qq_44190995/article/details/104186202

版权

HTML5学习

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5<!DOCTYPE>：<!doctype>声明必须位于 HTML5 文档中的第一行,使用：<!DOCTYPE html>
注意：对于中文网页需要使用<meta charset="utf-8">声明编码，否则会出现乱码。

HTML5 浏览器支持

将 HTML5 元素定义为块元素
HTML5 定了 8 个新的 HTML 语义（semantic）元素[header, section, footer, aside, nav, main, article, figure]。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block。
为 HTML 添加新元素：向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <mine>。

<script>
document.createElement("mine")
</script>

<style>
mine {
    display: block;
}
</style> 

<mine>自定义元素</mine>

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包:

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

html5shiv.js 引用代码必须放在<head>元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

HTML5 Canvas

<canvas>标签定义图形，比如图表和其他图像，canvas标签只是图形容器，必须使用脚本来绘制图形。

实例:
<canvas id="myCanvas" width="200" height="100"></canvas>

使用 JavaScript 来绘制图像

例子：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");（找到 <canvas> 元素）
var ctx=c.getContext("2d");（创建 context 对象--getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。）
ctx.fillStyle="#000000";（fillStyle属性可以是CSS颜色，渐变，或图案。）
ctx.fillRect(10,10,150,75);（fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。）

</script>

Canvas 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (10,10,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (10,10)。

Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
最后使用 stroke() 方法来绘制线条。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形：使用arc(x,y,r,start,stop)
起始一条路径，或重置当前路径。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();(起始一条路径，或重置当前路径。)
ctx.arc(95,50,40,0*Math.PI,2*Math.PI);
ctx.stroke()/ctx.fill() ;

Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

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

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

Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:drawImage(image,x,y)。

Canvas 参考手册：https://www.runoob.com/tags/ref-canvas.html

HTML5 内联 SVG

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

SVG 直接嵌入 HTML 页面：

绘制圆：
<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 参考手册：https://www.runoob.com/svg/svg-reference.html

HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是<math xmlns="http://www.w3.org/1998/Math/MathML">...</math>。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

HTML5 拖放（Drag 和 Drop）

拖放:拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

设置元素为可拖放:把 draggable 属性设置为 true –<img draggable="true">
ondragstart 和 setData():规定当元素被拖动时，会发生什么。ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData() 方法设置被拖数据的数据类型和值：

<img id="drag" draggable="true" ondeagstart="drag(event)">

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

放到何处 - ondragover:此事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：event.preventDefault()
进行放置 - ondrop：当放置被拖数据时，会发生 drop 事件。ondrop 属性调用函数drop(event)

function drop(event)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");(获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。)
    ev.target.appendChild(document.getElementById(data));
}

HTML5 Geolocation（地理定位）

用于定位用户的位置。
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

HTML5 - 使用地理定位：使用 getCurrentPosition() 方法来获得用户的位置。

例子：
<p id="demo">点击按钮获取您当前坐标：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition,showError);
	}
	else
	{
		x.innerHTML="该浏览器不支持定位。";//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
	}
}
function showPosition(position)//获得并显示经度和纬度
{
	x.innerHTML="纬度: " + position.coords.latitude + 
	"<br>经度: " + position.coords.longitude;	
}
function showError(error)
{
	switch(error.code) 
	{
		case error.PERMISSION_DENIED:
			x.innerHTML="用户拒绝对获取地理位置的请求。"
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML="位置信息是不可用的。"
			break;
		case error.TIMEOUT:
			x.innerHTML="请求用户地理位置超时。"
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML="未知错误。"
			break;
	}
}
</script>

在地图中显示结果：如果需在地图中显示结果，需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图。(静态图像)

<div id="mapholder"></div>


function showPosition(position)
{
    var latlon=position.coords.latitude+","+position.coords.longitude;
 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

getCurrentPosition() 方法 - 返回数据

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

Geolocation 对象 - 其他方法:
- watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
- clearWatch() - 停止 watchPosition() 方法。
  navigator.geolocation.watchPosition(showPosition);

HTML5 Video(视频)

大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。

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

<video>元素提供了播放、暂停和音量控件来控制视频。
<video> </video>标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video>元素支持多个 <source>元素.<source>元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
<video>元素支持三种视频格式： MP4, WebM, 和 Ogg>。

HTML5`<video>`- 使用 DOM 进行控制

HTML5 <video>和<audio>元素同样拥有方法、属性和事件。
<video>和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制。

例子：
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script>

HTML5 Audio(音频)

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

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

HTML 音频/视频 DOM 参考手册：https://www.runoob.com/tags/ref-av-dom.html

HTML5 新的 Input 类型

Input 类型: color用于选取颜色----<input type="color" name="">
Input 类型: date从一个日期选择器选择一个日期----<input type="date" name="">
Input 类型: datetime允许选择一个日期（UTC 时间）----<input type="datetime">
Input 类型: datetime-local允许选择一个日期和时间----input type=“datetime-local”
Input 类型: email包含 e-mail 地址的输入域----input type=“email”
Input 类型: month允许你选择一个月份----input type=“month”
Input 类型: number于应该包含数值的输入域,还能够设定对所接受的数字的限定。----input type=“number” name=“quantity” min=“1” max=“5”
Input 类型: range用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。----input type=“range”
- max - 规定允许的最大值
- min - 规定允许的最小值
- step - 规定合法的数字间隔
- value - 规定默认值
Input 类型: search用于搜索域，比如站点搜索或 Google 搜索。
Input 类型: tel定义输入电话号码字段。
Input 类型: time类型允许选择一个时间。
Input 类型: url类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。
Input 类型: week类型允许选择周和年。

HTML5 表单元素

新的表单元素:

<datalist>
<keygen>
<output>

HTML5`<datalist>`元素

<datalist>元素规定输入域的选项列表。
<datalist>属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用<input>元素的列表属性与 <datalist>元素绑定.

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5`<keygen>`元素

<keygen>元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
</form>

HTML5`<output>`元素

用于不同类型的输出，比如计算或脚本输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

HTML5 表单属性(部分)

`<form> / <input>`autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能(记录)。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。
提示: autocomplete 适用于 form 标签，以及以下类型的 input 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

`<form>`novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性。
novalidate 属性规定在提交表单时无需验证 form 或 input 域。
<form action="" novalidate>

`<input>`autofocus 属性

autofocus 属性是一个 boolean 属性.
autofocus 属性规定在页面加载时，域自动地获得焦点。
<input type="text" name="" autofocus>

`<input>`form 属性

规定输入域所属的一个或多个表单。

<form action="" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

Last name依然属于form。

`<input>`list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

`<input>`height 和 width 属性

height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。

`<input>`min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

`<input>`multiple 属性

multiple 属性是一个 boolean 属性.
multiple 属性规定input元素中可选择多个值。

`<input>`placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。

`<input>`required 属性

required 属性是一个 boolean 属性。
required 属性规定必须在提交之前填写输入域（不能为空）。

`<input>`step 属性

step 属性为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等。

HTML5 语义元素（都是块元素(除了figcaption)）

语义= 意义
语义元素 = 有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>：描述了文档的头部区域，主要用于定义内容的介绍展示区域。
<nav>：标签定义导航链接的部分。
<section>：标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，包含了一组内容及其标题。
<article>：标签定义独立的内容。（使用实例：Forum post/Blog post/News story/Comment）
<aside>：标签定义页面主区域内容之外的内容（比如侧边栏）。
<figcaption>：标签定义 figure元素的标题，应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
<figure>：标签规定独立的流内容（图像、图表、照片、代码等等）内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<footer>：描述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

HTML5 Web 存储

使用HTML5可以在本地存储用户的浏览数据，数据以键/值对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。
以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明：
- 数据库名称
- 版本号
- 描述文本
- 数据库大小
- 创建回调
  第五个参数，创建回调会在创建数据库后被调用。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

执行查询操作

执行操作使用 database.transaction() 函数：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

执行后会在 ‘mydb’ 数据库中创建一个名为 LOGS 的表。

插入数据

在执行上面的创建表语句后，可以插入一些数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "HTML5")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.baidu.com")');
});

我们也可以使用动态值来插入数据：

tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);

e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 “?”。

读取数据

读取数据库中已经存在的数据：

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
    
   }, null);
});

删除记录

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

删除指定的数据id也可以是动态的：

tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

更新记录

 tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
动态：
  tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);

HTML5 应用程序缓存（Application Cache）

HTML5 引入了应用程序缓存，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

Cache Manifest 基础

如需启用应用程序缓存，在文档的html标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

创建Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整的 Manifest 文件:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
(上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。)

NETWORK:
login.php
(规定文件 "login.php" 永远不会被缓存，且离线时是不可用的;可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK:*)

FALLBACK:
/html/ /offline.html
(规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件,第一个 URI 是资源，第二个是替补。)

以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

实例：
<body>
 
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
 
<script>
var w;
 
function startWorker() {
    if(typeof(Worker) !== "undefined")//检测用户的浏览器是否支持web worker
    {
        if(typeof(w) == "undefined")//否存在 worker，如果不存在，会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码 
        {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event)//onmessage" 事件监听器 {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}
 
function stopWorker() 
{ 
    w.terminate();//终止 web worker，并释放浏览器/计算机资源
    w = undefined;
}
</script>
demo_workers.js：//在一个外部 JavaScript 中创建 web worker 文件
var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);//它用于向 HTML 页面传回一段消息
    setTimeout("timedCount()",500);
}

timedCount();
web worker 通常用于更耗费 CPU 资源的任务。

由于 web worker 位于外部文件中，它们无法访问以下 JavaScript 对象：window 对象，document 对象，parent 对象。

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新，单向消息传递。
Server-Sent 事件指的是网页自动获取来自服务器的更新。

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知：

var source=new EventSource("demo_sse.php");//创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
source.onmessage=function(event)//每接收到一次更新，就会发生 onmessage 事件
{
    document.getElementById("result").innerHTML+=event.data + "<br>";//当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中
};

检测 Server-Sent 事件支持

if(typeof(EventSource)!=="undefined")
{
    // 浏览器支持 Server-Sent
    // 一些代码.....
}
else
{
    // 浏览器不支持 Server-Sent..
}

服务器端代码

为了让上面的例子可以运行，还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。
服务器端事件流的语法是把 “Content-Type” 报头设置为 “text/event-stream”。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');//规定不对页面进行缓存

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())//输出发送日期（始终以 "data: " 开头）
Response.Flush()//向网页刷新输出数据
%>
把已接收的数据推入 id 为 "result" 的元素中
};

检测 Server-Sent 事件支持

if(typeof(EventSource)!=="undefined")
{
    // 浏览器支持 Server-Sent
    // 一些代码.....
}
else
{
    // 浏览器不支持 Server-Sent..
}

服务器端代码

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');//规定不对页面进行缓存

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())//输出发送日期（始终以 "data: " 开头）
Response.Flush()//向网页刷新输出数据
%>

写在最后

因为HTML5中有很多后面的只是，所以对一些内容只是了解，有一个大概的印象，后面学习过程中再加深应用。

怀中猫°

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记】HTML5

HTML5学习HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、searchHTML5<!DOCTYPE>：&l...
复制链接

扫一扫