NTML5十大新特性(快速了解)

目录

目录

一、语义化标签

二、更加丰富强大的表单

2.1表单元素

2.2表单输入类型

2.3表单属性

三、用于媒介的video和audio元素

四、地理定位

4.1getCurrentPosition() 

五、拖放

5.1 把元素设置为可拖放

5.2 拖放的内容 -ondragstart 和 setData()

5.3 拖到何处 -ondragover

5.4进行放置 -ondrop

六: Web存储

6.1 localStorage 和 sessionStorage 

6.2  localStorage 对象

6.3 sessionStorage 对象

七、应用程序缓存(Application Cache)

7.1 HTML5 Cache Manifest 实例

7.2 Manifest 文件配置

7.2.1 CACHE MANIFEST

7.2.2 NETWORK

7.2.3更新缓存

实例 - 完整的 Cache Manifest 文件

八、 Web Workers

8.1 检测浏览器是否支持 Web Worker

8.2 创建 web worker 文件

8.3  创建 Web Worker 对象

 8.4 终止 Web Worker

8.5 完整的 Web Worker 实例代码

九、服务器发送事件

十、 WebSocket


一、语义化标签

语义化标签的推出很好的解决了满屏的 div 布局,语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义,使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让和搜索引擎都容易理解。

HTML5新增标签
    header定义文档的头部区域,它是作为网页的头部介绍内容或者是导航链接栏的容器。在一个文档中,你可以定义多个header元素
nav定义导航链接的部分。
main规定文档的主要内容。一个文档中只有一个main元素。

hgroup

对标题元素进行分组。

当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列<h1>~<h6> 元素进行分组。

aside

显示侧边栏或者补充的内容,例如:目录、索引等。
article内容本身必须是有意义的且必须是独立于文档的其余部分
figure标记文档中的一个图像
figcaption表示<figure>标签的标题。
section定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域
footer定义文档的页脚部分
canvas

创建一个画布(Canvas)

 

header,section,footer,aside,nav,main,article,figure所有的这些元素都是块级元素

<canvas id="myCanvas" width="500" height="100" style="border:1px solid #000000;">

效果图:

 创建一个画布(Canvas)


二、更加丰富强大的表单

2.1表单元素

<datalist>用户会在他们输入数据时看到域定义选项的下拉列表
<progress>进度条,展示连接/下载进度
<meter>刻度值,用于某些计量,例如温度、重量等
<keygen>

提供一种验证用户的可靠方法

生成一个公钥和私钥

<output>

用于不同类型的输出

比如尖酸或脚本输出

2.2表单输入类型

color主要用于选取颜色
date选取日期
datetime选取日期(UTC时间)
datetime-local选取日期(无时区)
month选择一个月份
week选择周和年
time选择一个时间
email包含e-mail地址的输入域
number数值的输入域
urlurl地址的输入域
tel定义输入电话号码和字段
search用于搜索域
range一个范围内数字值的输入域

2.3表单属性

placehoder输入框默认提示文字
required要求输入的内容是否可为空
pattern描述一个正则表达式验证输入的值
min/max设置元素最小/最大值
step为输入域规定合法的数字间隔
height/wdith用于image类型<input>标签图像高度/宽度
autofocus规定在页面加载时,域自动获得焦点
multiple规定<input>元素中可选择多个值


三、用于媒介的video和audio元素

video元素:HTML5中专门用来v播放网络上的视频或者电影;

audio元素:在HTML5中专门用来播放网络上的音频;


四、地理定位

获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

4.1getCurrentPosition() 

下例是一个简单的地理定位实例,可返回用户位置的经度和纬度。

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
  • 检测是否支持地理定位
  • 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
  • showPosition() 函数获得并显示经度和纬度


五、拖放

拖放(Drag 和 Drop)是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分:任何元素都是可拖放的。

拖放是H5的新特性,即抓取对象以后拖到另一个位置,但是前提是这个元素设置了属性draggable=true,才能让该元素具有拖放功能。

  • 开始拖动:指触发拖动的元素的过程,比如轻按元素时;
  • 拖动中:移动拖动中的元素;
  • 放置元素:把拖动的元素,放置到另一个元素里面的过程。

在不同的阶段,都有其相对应的API,下面我们就看看这些API

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

5.1 把元素设置为可拖放

<img draggable="true">

5.2 拖放的内容 -ondragstart 和 setData()

然后,规定当元素被拖动时发生的事情。

在上面的例子中,ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值:

5.3 拖到何处 -ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地,数据/元素无法被放置到其他元素中。为了实现拖放,我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成

event.preventDefault()

5.4进行放置 -ondrop

当放开被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}


六: Web存储

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

数据以键值对存在, web网页的数据只允许该网页访问使用。

6.1 localStorage 和 sessionStorage 

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

  • localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

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

6.2  localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

// 存储
localStorage.setItem("sitename", "练习数据");
 
// 查找
document.getElementById("result").innerHTML = "名字:" +  localStorage.getItem("sitename");

实例解析:

  • 使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
  • 检索键值为 "sitename" 的值然后将数据插入 id="result" 的元素中。

6.3 sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script>
function clickCounter()
{
	if(typeof(Storage)!=="undefined")
	{
		if (sessionStorage.clickcount)
		{
			sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
		}
		else
		{
			sessionStorage.clickcount=1;
		}
		document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
	}
	else
	{
		document.getElementById("result").innerHTML="抱歉,您的浏览器不支持 web 存储";
	}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我!</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</html>

七、应用程序缓存(Application Cache)

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

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

7.1 HTML5 Cache Manifest 实例

如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性

下面的例子展示了带有 cache manifest 的 HTML 文档(供离线浏览):

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head> 
<meta charset="UTF-8">
<title>练习demo</title> 
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面,页面也可以访问。</p>
</body>
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议文件扩展名是:".appcache"。

注意:manifest 文件需要设置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。

7.2 Manifest 文件配置

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件有三个部分:

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

7.2.1 CACHE MANIFEST

第一行,CACHE MANIFEST,是必需的:

下面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

7.2.2 NETWORK

下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:

NETWORK:

login.asp

可以使用星号来指示所有其他其他资源/文件都需要因特网连接:

NETWORK:

*

FALLBACK

下面的 FALLBACK 部分规定如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件:

FALLBACK:

/html/ /offline.html

注释:第一个 URI 是资源,第二个是替补

7.2.3更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改(参阅下面的提示)
  • 由程序来更新应用缓存

实例 - 完整的 Cache Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.htm

提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

八、 Web Workers

web worker 是运行在后台的 JavaScript,不会影响页面的性能。更好的解释是,你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本,这些线程在执行任务的过程中并不会干扰用户界面!

8.1 检测浏览器是否支持 Web Worker

创建 web worker 之前,检测用户的浏览器是否支持它:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

8.2 创建 web worker 文件

现在,让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:

var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

8.3  创建 Web Worker 对象

我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。

下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

然后我们就可以从 web worker 发生和接收消息了。

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

w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
};

 8.4 终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。

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

w.terminate();

8.5 完整的 Web Worker 实例代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>练习demo</title> 
</head>
<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") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
    }
}
 
function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
</script>
 
</body>
</html>

九、服务器发送事件(server-sent event)

允许网页获得来自服务器的更新

Server-Sent 事件 - 单向消息传递


十、 WebSocket

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值