20个有趣的HTML5增强功能

Rahul Bandopadhyaya

4.82/5 (46投票s)

2013 年 9 月 17 日

CC (ASA 3U)

14分钟阅读

78509

20个有趣的HTML5增强功能

引言

我们知道，软件和 IT 领域的技术是变化最快的领域之一。因此，与这些技术相关，我们必须及时了解这些变化和修改，这一点非常重要。

在 HTML 方面，随着 HTML5 标准的推出，增加了一些新功能和新能力。本文旨在帮助各位软件开发者了解 HTML5 中 20 个必备的新功能。此列表完全基于我的个人偏好，因此不能假设这 20 个是所有人必须知道的。

HTML5 是 HTML 标准的第五个修订版。根据万维网联盟 (W3C) 的说法，其主要目的是：

为多媒体提供丰富的支持
使标记易于人类理解
使不同设备（计算机、手机等）和客户端（浏览器等）能够一致地理解

20个有趣的HTML5增强功能

1. Web 存储

根据 HTML5 标准的规定，浏览器应将数据本地存储，称为 Web 存储，类似于传统的 Cookie。但这种 Web 存储更安全，数据检索也更快，因为：

数据以键值对集合的形式存储，因此检索速度更快。
一个网页存储的数据只能由同一页面访问，并且只能在同一浏览器访问该页面时才能访问。例如，Chrome 存储的数据不能被 Internet Explorer 访问，即使是通过同一个 HTML 页面，从而提供了安全性。

另一个好处是无需影响 Web 应用程序性能即可存储大量数据。这种存储有两种形式：

本地存储 (localStorage) - 存储的数据没有过期日期，即关闭浏览器后数据也不会被删除，即使在浏览器关闭后也是如此。
会话存储 (sessionStorage) - 存储的数据由会话驱动，即仅对相关的浏览器会话可用。

当需要记住用户在不同文本框中输入的内容，即使在浏览器重新打开或刷新后，也可以利用这些存储。传统 Cookie 也能实现此要求，但如前所述，Web 存储提供了更好的可访问性和安全性。

在支持的浏览器中，我们可以这样访问 Web 存储：

localStorage.employeeId = 25771; -> for storing the value
var empId = localStorage.employeeId; -> for retrieving the value

其中“employeeId”是 Web 存储中用户定义的键。

类似地，根据需要，可以使用 sessionStorage 代替 localStorage。

2. 可编辑内容

使用此功能，在支持的浏览器中，可以使 HTML 元素的文本内容可编辑。这可以应用于任何期望包含文本的元素，通过设置新属性“contenteditable”为“true”。应用后，元素中的所有文本内容，甚至包括子元素，都将变得可编辑。这内部使用了前面介绍的 Web 存储。

它可用于需要提供选项来编辑页面上任何特定部分的任何内容（文本）的应用程序。这也可以通过多次使用类型为“text”的“input”元素来实现，但那样会使实现变得复杂，并会影响可维护性或未来的增强。

<ul contenteditable="true">  
        <li> Code for Home Page </li>  
        <li> Code for Browse Page </li>  
        <li> Code for Mystuff page </li>  
</ul>

因此，不同 <li> 中的文本变得可编辑。例如，待办事项列表实现。

3. 可缩放矢量图形 (SVG)

SVG 是一种基于 XML 的语言，用于描述二维图形/图像。这些基于 SVG 的 XML 内容可以通过两种方式提供：

使用外部文件 (.svg)，然后使用 <embed>、<object> 或 <iframe> 等元素嵌入到主 HTML 页面中。
也可以使用 <svg> 元素将其嵌入到 HTML 页面中。例如：

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" 
version="1.1" height="190">
   <ellipse cx="200" cy="100" 
   rx="70" ry="70" fill="red">
</svg>
 
</body>
</html>

上面的标记将在支持的浏览器中显示一个红色的椭圆。

与其他二维图形创建方法（如“canvas”）相比，它有很多优点，例如：

由于它是基于 XML 的，因此可以使用任何文本编辑器编辑图像。
当图像放大时，其质量不会受到影响。
不涉及复杂的客户端 JavaScript。
由于它是基于文本的，因此便于图像搜索和索引。
与分辨率无关，因此可以打印高质量图像。

缺点是，由于它是基于 XML 的，因此与任何 DOM 对象一样，其渲染速度比 Canvas 等其他图形创建方法慢。

4. 电子邮件、URL 输入

现在，“input”元素提供了开箱即用的内容验证。例如，通过指定“type=email”或“type=url”，我们可以限制文本内容符合有效的电子邮件地址或 URL 结构。

虽然它简化了开发人员的内容验证工作，但目前并非所有浏览器都支持。因此，除非您有明确的了解或对客户端应用程序的浏览器类型有限制，否则应避免使用它。如果浏览器不支持该属性，其行为将与普通文本框一样，即类型为“text”的“input”元素。

5. 服务器发送事件 (SSEs)

“服务器发送事件”基本上是在需要时从服务器到客户端的通知，即服务器会在客户端无需请求的情况下发送数据。在传统方法中，客户端会不断轮询服务器以获取数据，这会导致过多的 HTTP 开销。通过这些事件，服务器会在有数据可用时通知客户端，而无需从客户端发起请求。

因此，服务器和客户端之间会打开一个单向消息通道，这由浏览器直接处理，用户只需监听消息。浏览器将使用 JavaScript 对象 EventSource 来保持与服务器的连接打开。客户端只需在该对象上注册事件，例如“onopen - 连接到服务器已建立”、“onmessage - 收到服务器消息”和“onerror - 发生错误时”。

客户端：

var evtSource=new EventSource("url of the page raising the events");
evtSource.onmessage=function(e)
  {
                //handle the e.data as appropriate
  };

服务器端：

我们需要确保：

HTTP 响应的内容类型应为“text/event-stream”
响应内容应始终以“data: ”开头

Response.ContentType="text/event-stream"
Response.Write("data: " + <data to be passed to the client>)

SSE 最适合用于 RSS feed 等单向通信场景。对于双向通信，可以考虑 HTML5 Web Sockets API。

6. 无需脚本和链接的类型

“script”和“link”标签无需显式声明“type”属性。这些标签现在具有隐式含义。例如，在 HTML5 之前，我们通常这样包含这些标签：

<script type="text/javascript" 
src="path_of_some_javascript.js"></script>

<link type="text/css"  rel="stylesheet" href="path_of_some_stylesheet.css" />

今后，将不再需要提供“type”，以下条目足以表明这些标签分别是用于脚本和样式表：

<script src="path_of_some_javascript.js"></script>
<link rel="stylesheet" href="path_of_some_stylesheet.css" />

7. Web Workers

Web Workers 就像浏览器实例中在后台运行的守护进程服务，不会影响网页的性能。这可以用于高 CPU 密集型操作。

在传统方法中，页面会在脚本执行完成之前被阻塞。使用 Web Worker（外部 JS 文件中的 JavaScript）可以解决此问题，因为此脚本将在后台运行，而不会影响其他脚本和事件（如按钮点击等）的执行。

例如，考虑一个获取在线信使应用程序（如 Gtalk）用户丢弃的“message”的 JavaScript。将其保存在外部 JS 文件 message.js 中，如下所示：

function BroadcastMessage()
{
var message = new message();

//here, get the messages dropped by users and assign it to ‘message’ object
…

//then raise the postMessage passing the ‘message’ object

postMessage(message);

setTimeout("BroadcastMessage ()",500);  //keep broadcasting the messages after a fixed interval indefinitely.
}

BroadcastMessage();

此 JS 的客户端如下：

var w =new Worker("message.js");

w.onmessage = function (e) {
// read the message from e.data object

//and show as needed
};

因此，BroadcastMessage 将在后台运行，而不会影响前端活动（如按钮点击等）。任何在线聊天应用程序的实现都可以采用这种方法。

8. Figure 元素

HTML5 通过使用“figure”及其子元素“figcaption”来提供将标题与图像关联的方式。这些元素有助于将插图、照片等分组到一个自包含的单元中。这使得在不影响文档主流程的情况下处理该单元变得容易。在外观上没有太大区别，但它提供了一种语义化的方式来组合图像和关联的标题。

<figure>   
    <img src="location of the image"/> 
    <figcaption> 
        <p>a description probably depicting the image goes here</p> 
    </figcaption> 
</figure>

9. 应用程序缓存

这是启用任何 Web 应用程序离线浏览的重要工具。它使用一个缓存清单文件 (.appcache)，该文件根据以下部分指导浏览器哪些文件应缓存，哪些不应缓存：

CACHE MANIFEST – 包含客户端在首次下载后将缓存的文件列表。
NETWORK - 文件不会被缓存，需要连接到服务器。
FALLBACK - 它结合了上述两个标题的行为。对于每个文件或类型，指定一个备用页面，如果原始页面不可访问（即离线）时将使用该页面。

清单文件内容示例

CACHE MANIFEST

 /style.css
 /favicon.gif
                NETWORK:
                                Home.aspx
                FALLBACK:
/html/ /page_not_found.html

即，如果找不到任何 HTML，将显示默认的 page_not_found.html。

然后在主 HTML 页面中包含清单文件，如下所示：

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

这提供了以下好处：

离线浏览能力
提高页面加载速度
仅下载更新或更改的文件，从而提高网络带宽利用率。

10. Datalist 元素

这是 HTML5 标准中规定的一种新型元素。它与“input”元素结合使用，用于显示预定义值的列表。例如，对于“input”元素提供的新“list”属性以及相关的“datalist”元素，如果用户在文本框中键入内容，则在支持的浏览器中将显示匹配的选项作为下拉列表。例如：

<input list="countries" name="country">
<datalist id="countries">
  <option value="India">
  <option value="Indonesia">
  <option value="USA">
  <option value="UK">
</datalist>

因此，无论大小写，如果输入“i”，India 和 Indonesia 将会作为下拉列表显示。

11. 地理定位

地理定位接口可用于获取用户的地理位置。它最适合用于 GPS 启用的设备，以准确获取纬度和经度。一旦收到这些数据，就可以使用它们通过 Google Maps、Bing Maps 等应用程序精确定位到确切的物理位置。此功能可用于的应用程序类型有：

提供逐向导航的路径查找器。
查找用户附近的兴趣点，如 ATM、餐厅、加油站等。

获取用户纬度和经度的脚本

navigator.geolocation.getCurrentPosition(GetPosition);
function GetPosition (pos)
 {
$('#lbllocation').html("Your Latitude: " + pos.coords.latitude +   "

Your Longitude: " + pos.coords.longitude );
}

12. Required 属性

与“input”元素/标签的“email”和“url”类型一样，此属性旨在减轻数据验证的负担。它可以作为独立属性“required”使用，或作为键值对 required="required" 使用。一旦将其应用于任何类型为 text 的输入，并且在未提供任何数据的情况下尝试提交主表单，支持的浏览器将高亮显示并阻止表单提交。

<input type="text" name="lastName" required>

或者

<input type="text" name="lastName" required="required">

13. Autofocus 属性

与上面讨论的“required”属性类似，此属性也可以仅通过提供独立属性“autofocus”或作为键值对 autofocus ="autofocus " 来应用。顾名思义，这有助于在页面加载时自动聚焦或默认选择某个元素。

<input type="text" name="employeeId" 
placeholder="Employee Id here" required autofocus>

或者

<input type="text" name="employeeId" 
placeholder="Employee Id here" required autofocus=”autofocus”>

14. 支持正则表达式模式

这是另一种无需编写复杂 JavaScript 即可验证输入元素内容是否符合特定模式的好方法。使用 HTML5 为 input 元素提供的新“pattern”属性，我们可以直接在标记中提供正则表达式。如果输入元素中的文本不符合表达式，浏览器将高亮显示该控件。

<input type="text" name="lastName" 
placeholder="Last Name here" required autofocus pattern=”[A-Za-z]”>

15. 拖放

拖放也是一个常见的需求，但我们知道在传统方法中需要大量的代码和精力。在 HTML5 标准中，任何元素都可以通过提供属性 draggable="true” 来设置为“draggable”。只需为以下事件提供实现：

ondragstart (设置要拖动的数据) - 在拖动数据的元素上。
ondrop (处理拖动的数据) - 在放置数据的元素上。

要拖动的元素

<img id="img1" src="some_image.gif" draggable="true" 
   ondragstart="drag(evt)" width="300" height="50">

将拖动数据放置到的容器

<div id="div1" ondrop="drop(evt)"></div>

16. Audio 元素

直到现在，要在网页中支持音频文件，我们不得不依赖第三方提供的插件（如 Flash 播放器）。HTML5 现在提供了播放音频文件的标准：

<audio autoplay="autoplay" controls="controls">   
    <source src="audio1.ogg" /> 
    <source src="audio1.mp3" />  
    <a href="audio1.mp3">Click here to download the mp3.</a> 
</audio>

由于 HTML5 规范没有指定任何音频格式标准，为了使实现与不同浏览器和同一浏览器的不同版本兼容，始终建议使用带有多种格式的“source”。浏览器将选择它能识别的第一种格式。还建议在“audio”元素内保留一条消息，以便对于不兼容的浏览器，会显示此消息，表明不支持此音频元素，例如：

<audio autoplay="autoplay" controls="controls"> 
    <source src="audio1.ogg" /> 
    <source src="audio1.mp3" />  
    Your browser doesn’t have support for HTML5 ‘audio’ element 
</audio>

17. Video 元素

与音频一样，对于视频，直到现在我们也需要依赖 Flash Player 等外部插件，没有 HTML 标准，不同浏览器支持不同的插件。HTML5 现在也为播放视频文件提供了标准。上面为音频元素提到的所有最佳实践同样适用于视频元素：

<video width="300" height="200" controls preload id=”vd1”>
                <source src="movie1.mp4" type="video/mp4">
                <source src="movie1.ogg" type="video/ogg">
                Your browser doesn’t have support for HTML5 ‘video’ element 
</video>

但并非所有浏览器都支持所有编解码器。有些支持 H.264，有些支持 Theora 和 Vorbis 等。HTML5 规范没有指定任何特定的视频格式编解码器。

对于音频和视频元素，HTML5 都规定了可以使用 JavaScript 自定义的 DOM 方法、属性和事件。例如：

有编程控制 play、pause 等的方法。

var vElement=document.getElementById("vd1");
function playVidio()
  {
                vElement.play();
  }
function pauseVidio()
  {
                vElement.pause();
  }

这里，vd1 是视频元素。这些方法（playVIdeo 和 pauseVideo）然后可以从按钮的点击事件中调用。

有 autoplay、volume、duration 等属性。例如：

var vElement=document.getElementById("vd1");

vElement.autoplay=true; //thus plays the media as soon as it is loaded

有事件来告知操作的开始，如 canplay、play、pause 等。例如：

var vElement=document.getElementById("vd1");

//a message will be shown once the browser is ready to play
vElement.oncanplay=alert("Browser can play the media");

18. 使用类型为 range 的 Input 元素实现滑块控件

这也是一个常见的 UI 需求，我们需要显示一个滑动条来指示某个操作的完成/阶段。HTML5 规定了 input 元素的新 range 类型。

<input type="range">

它支持 min、max、step 和 value 等附加属性。我们甚至可以添加事件监听器来开发用户驱动的滑块，类似于音量控制等。

<input name="rngElement" type="range" min="0"
max="100" step="5" value="">

19. Mark 元素

Mark 元素就像一个荧光笔。例如，如果我们想突出显示下面文本的一部分，我们可以使用“mark”来实现，如下所示：

<p> The quick brown fox jumps right over the <mark>lazy dog</mark>.
</p>

但在支持的浏览器中，“mark”具有不同的样式，因此，为了获得一致的行为，我们需要提供相应的样式定义，例如：

mark {
   background-color: #fff;
   font-weight: normal;
   font-style: normal;
   color: red;
 }

20. 通过前缀“data”自定义属性

现在有了 HTML5，任何元素都可以获得自定义属性的官方支持。虽然之前有些浏览器支持用户定义的属性，例如：

<input type="text" id="input1" required customAttribute = ‘abc’>

但这在所有浏览器中的支持并不均匀。但现在，根据 HTML5 的建议，我们可以在所有支持的浏览器中获得非常相似的功能。唯一的要求是，我们需要在自定义属性前加上“data”这个词，就可以了。

<input type="text" id="input1" required data-customAttribute = ‘abc’>

了解 HTML5 特定属性/元素是否受支持的一些方法

现在我们已经学习了 HTML5 标准中一些有趣且有用的增强功能，了解目前并非所有增强功能都在所有浏览器中得到支持，这一点非常重要，我们在使用它们时应非常谨慎。

在这里，我们将看到一些方法，我们可以据此判断所使用的浏览器是否支持相关的增强功能。

例如，要了解“pattern”属性是否受 input 元素支持，我们可以动态创建一个“input”元素，然后尝试在其上查找该属性：

<script> 
if (!'pattern' in document.createElement('input') ) { 
    // then the ‘pattern’ attribute is not supported 
    // hence need to provide the traditional approach
} 
</script>

要检查任何 HTML5 特定元素或对象（例如 audio、EventSource 等）：

对于 element：

var  frm = document.forms[0];
If(typeof( frm[‘element_name’]) == undefined){
//then the element is not supported
}

element_name 的例子可以是“audio”、“video”等。

类似地，对于对象（例如 EventSource）：

If(typeof(EventSource) == undefined){ 
                //then the server-sent event is not supported

}

结论

因此，到目前为止，我们已经了解了 HTML5 中规定的一些新增强功能，并且还学习了如何使用它们。但值得一提的是，并非所有浏览器都在以相同的速度适应这些标准或增强功能。因此，如果我们想让我们的网站在所有浏览器中，乃至在所有浏览器版本的环境中都保持一致，我们就需要始终确保提供一种回退方法。也就是说，如果不支持任何特定的 element、attribute 等，那么就提供一种传统的方法来处理它。话虽如此，我相信本文提供的内容会很有帮助。

参考

[1] W3 Schools。来源：https://w3schools.org.cn/。访问日期：2013 年 4 月 3 日。
[2] HTML 5 演示和示例。来源：http://html5demos.com/。访问日期：2013 年 4 月 3 日。