计算机 · 2021年12月18日 0

html5

什么是HTML5

HTML5将成为HTML、XHTML以及HTML DOM的新标准。

HTML5是如何起步的?

W3C与WHATWG合作的结果。
W3C: World Wide Web Consortium，万维网联盟。
WHATWG: Web Hypertext Application Technology Working Group。

新特性

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

视频

HTML5规定了一种通过video元素来包含视频的标准方法而不是通过外部控件。当前video元素支持三种视频格式：

  • Ogg
    带有Theora视频编码和Vorbis音频编码的Ogg文件
  • MPEG4
    带有H.264视频编码和AAC音频编码的MPEG 4文件
  • WebM
    带有VP8视频编码和Vorbis音频编码的WebM文件

代码举例:

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

上面的代码中有 多个source，浏览器将使用第一个可识别的格式。

video标签的属性

属性值描述
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用”autoplay”，则忽略该属性。
srcurl要播放的视频的URL。
widthpixels设置视频播放器的宽度。

video支持的视频方法、属性和事件

方法属性事件
play()currentSrcplay
pause()currentTimepause
load()vieoWidthprogress
canPlayTypevideoHeighterror
\durationtimeupdate
\endedended
\errorabort
\pausedempty
\mutedemptied
\seekingwaiting
\volumeloadedmetadata
\height
\width

在所有属性中，只有videoWidth和videoHeight属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

音频

HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
audio支持三种音频格式：

  • Ogg Vorbis
  • MP3
  • Wav
    audio标签使用方法与video标签类似。

audio标签的属性

属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。
preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用”autoplay”，则忽略该属性。
srcurl要播放的音频的URL。

画布

SVG

地理定位

Web存储

HTML5提供了两种在客户端存储数据的新方法：

  • localStorage – 没有时间限制的数据存储
  • sessionStorage – 针对一个session的数据存储
    之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
    在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
    对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
    HTML5使用JavaScript来存储和访问数据。

localStorage方法

localStorage方法存储的数据没有时间限制。

sessionStorage方法##

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

应用缓存

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：

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

HTML5 Cache Manifest实例

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

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

<body>
The content of the document......
</body>

</html>

Cache Manifest基础

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

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

每个指定了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

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

更新缓存

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

  • 用户情况浏览器缓存
  • manifest文件被修改
  • 由程序来更新应用缓存
    由于一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。所以为了确保浏览器更新缓存，您需要更新manifest文件(譬如更新上面的以”#”开头的注释行中的日期和版本号)。

Web Workers

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

检测Web Worker支持

在创建web worker之前，检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

创建web worker文件

web worker线程的代码写在一个外部js文件中，比如”demo_worker.js”。

var i=0;

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

timedCount();

postMessage()方法用于向HTML页面传回一段消息。

创建web worker对象

有了web worker文件，现在从HTML页面调用它。
下面代码检测是否存在worker，如果不存在，创建一个新的web worker对象，然后运行”demo_worker.js”中的代码：

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

然后向web worker添加一个”onmessage”事件监听器：

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

当web worker传递消息时，会执行事件监听器中的代码。event.data中存有来自event.data的数据。

终止web worker

当我们创建web worker对象后，它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止web worker，并释放浏览器/计算机资源，请使用terminate()方法：

w.terminate();

Web Workers和DOM

由于web worker位于外部文件中，它们无法访问下列Javascript对象：

  • window对象
  • document对象
  • parent对象

服务器发送事件

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

Server-Sent事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

接收Server-Sent事件通知

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

var source = new EventSource("demo_sse.php");
source.onmessage = function(event){
    document.getElementById("result").innerHTML += event.data + "<br />";
}

检测Server-Sent事件支持

可通过下面代码检测服务器发送事件的浏览器支持情况：

if(typeof(EventSource) !== "undefined"){
    // 支持  
}else{
    // 不支持  
}

服务器端代码实例

服务器端事件流的语法非常简单，把”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();
?>

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>

EventSource对象

除了onmessage事件来获取消息，还可以使用其他事件。

事件描述
onopen当通往服务器的连接被打开
onmessage当接收到消息
onerror当错误发生

HTML5表单

HTML5支持一系列新的输入类型。

  • Input类型-email
    email类型应用于应该包含e-mail地址的输入域。在提交表单时，会自动验证email域的值。
E-mail: <input type="email" name="user_email" />
  • Input类型-url
    url类型应用于应该包含URL地址的输入域。在提交表单时，会自动验证url域的值。
Homepage: <input type="url" name="user_url" />
  • Input类型-number
    number类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：
Points: <input type="number" name="points" min="1" max="10" />

请使用下面的属性来规定对数字类型的限定：

属性值描述
maxnumber规定允许的最大值
minnumber规定运行的最小值
stepnumber规定合法的数字间隔(如果step=”3″,则合法的数是-3, 0, 3, 6等)
valuenumber规定默认值
  • Input类型-range
    range类型用于应该包含一定范围内数字值得输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定。
<input type="range" name="points" min="1" max="10" />

和number一样，可使用相应的属性来规定对数字类型的限定。

  • Input类型-Date Pickers(日期选择器)
    HTML5拥有多个可供选取日期和时间的新输入类型：
    • date – 选取日、月、年
    • month – 选取月、年
    • week – 选取周和年
    • time – 选取时间(小时和分钟)
    • datetime – 选取时间、日、月、年(UTC时间)
    实例：
Date: <input type="date" name="user_date" />
  • Input类型-search
    search类型用于搜索域，比如站点搜索或Google搜索。search域显示为常规的文本域。

标签：

发表回复