HTML5 中的新功能
4.14/5 (4投票s)
了解 HTML5 的一些更有用的功能
引言
几十年前，传统的 Web 应用程序主要包含静态网页，这些网页只是 HTML 元素的集合。用户请求网页，服务器只需将静态网页从服务器返回到浏览器。这是早期 Web 应用程序的常见场景。
从那时起，Web 应用程序发生了翻天覆地的变化。现在的网页不仅可以向用户显示信息，还可以执行复杂的功能，例如显示视频、动画、执行验证。因此，如果我们想为当今的用户开发 Web 应用程序，我们需要在应用程序中按需提供这些功能。
作为开发者，我们习惯于依赖第三方库和插件来执行这些基本功能。我们使用 Flash、JavaScript、验证框架和其他第三方库来实现这一点。
HTML5 开箱即用地包含了所有这些功能，因此在使用 HTML5 时，我们无需回退到这些不同的组件。
我们可以正式将 HTML5 定义为一套 HTML、CSS 和 JavaScript 规范，使开发人员能够构建下一代 Web 应用程序。
由于 Visual Studio 支持 HTML5，我们可以在 Visual Studio 编辑器中使用 HTML5 功能，并将获得对新 HTML5 标签的智能感知支持。
我们将讨论 HTML5 提供的一些新功能。但首先，让我们看看页面级别的重要变化。
Doctype 声明。
Doctype 声明用于指定页面使用的 HTML 版本。在 HTML5 中，它更加简洁。HTML4 的 doctype 声明如下：
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
实际上，HTML4 有三种不同的 doctype 声明：strict、transitional 和 frameset，用于不同的场景。
与此形成对比的是 HTML5 中这个简单的声明：
<!DOCTYPE html>
Script 和 Link 标签中的 Type 属性
在使用 HTML4 时，我们习惯于向 link 和 script 标签添加 type 属性。但正如我们
<script type="text/javascript" src="Scripts/HTML5features.js"></script>
在 HTML5 中，我们可以删除 type 属性，因此可以使用以下方式：
<script src="Scripts/HTML5features.js"></script>
HTML5 中一些有趣的新功能是：
- WebStorage
- WebWorker
- GeoLocation
- Placeholder
- 新的输入标签。
有一点很重要需要注意，不同的浏览器支持 HTML5 的不同功能。因此，HTML5 的一个功能可能在某个版本的 IE 中可用，但在旧版本中不可用。所以，在使用任何 HTML5 功能之前，检查浏览器支持情况很重要。
此外，特定功能的实现方式，例如日期选择器的显示方式，在不同浏览器之间有所不同。
WebStorage
原生或厚客户端应用程序在存储数据方面具有优势，因为有许多设施，如文件系统或数据库。如果我们使用 HTML4，我们可以选择使用 cookie 在客户端存储数据。但使用 cookie 有一些限制，例如：
- 它会随每次 http 请求一起传输
- 它们的大小限制为 4kb
Cookie 中的数据未加密，因此除非站点使用 SSL，否则不安全传输数据。但 SSL 必须在站点级别启用。
由于这些限制，开发人员更倾向于将数据存储在服务器而不是客户端。但是 HTML5 提供了另一种更好的替代方案，可以在客户端存储数据。
HTML5 提供了 Web Storage 对象，用于在我们的应用程序中客户端存储页面特定的数据。
与 Cookie 相比，使用 WebStorage 的两个优势是：
我们知道 Cookie 会随每次 http 请求一起传输，而在 WebStorage 的情况下，我们可以根据需要随时传输数据。
Cookie 的大小限制约为 4KB，而 WebStorage 每个域最多可达 5MB。
WebStorage 可分为两类：
localStorage 数据存储时没有过期时间。
sessionStorage 数据仅存储在特定会话中。当会话过期或用户关闭 Web 浏览器时，数据将被清除。
在使用 HTML5 功能之前，我们需要检查它是否受浏览器支持。我们可以使用以下两种方法之一来检查：
使用 Modernizr
Modernizr 是一个 JavaScript 库，用于检测用户浏览器中的 HTML5 和 CSS3 功能。
var storage = window.localStorage;
if (!Modernizr.localstorage) {
alert("This browser doesn't support HTML5 Local Storage!");
}
Directly
if (typeof (Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
因此，在使用任何新的 HTML5 功能的第一步是先检查它是否受浏览器支持。如果它不受浏览器支持，那么我们应该使用任何回退机制，例如自定义 JavaScript，或者向用户显示适当的消息。
现在，在检查了对 WebStorage 的支持后，在 WebStorage 中存储值非常容易。WebStorage 使用键/值对存储值。因此，在 WebStorage 中存储值就像设置键的值一样简单。
if (typeof (Storage) !== "undefined") {
// Store the name
localStorage.name = "My name";
// Retrieve
var name = localStorage.name;
}
同样，我们可以使用 session Storage 对象，如下所示：
if (typeof (Storage) !== "undefined") {
// Store the name
sessionStorage.name = "My name";
// Retrieve
var name = "My name";
}
请注意，即使数据存储在客户端，我们也可以根据需要以编程方式将数据传输到服务器。
Webstorage 支持的浏览器。
IE 8.0+ Firefox 3.5+ Chrome 4.0+ Android 2.0+
WebWorker
我们都曾遇到过这种情况，在使用 JavaScript 时，当我们尝试在页面上执行某些操作时，网页会变得无响应。问题发生的原因是 JavaScript 是单线程的。因此，在使用 JavaScript 时，没有直接简单的方法可以实现异步行为。
HTML5 WebWorker 用于在网页中运行后台脚本，但 UI 脚本不会被阻塞。WebWorker 使用消息来通信任务的进度，就像线程一样。
以下示例演示了一个简单的 WebWorker 示例。
startWorker();
function startWorker() {
if (typeof (Worker) !== "undefined") {
w = new Worker("HTML5features.js");
w.onmessage = function (event) {
alert(event.data);
};
}
else {
alert("No Web Worker support");
}
}
我们已将要调用的脚本定义在名为 HTML5features 的 JavaScript 文件中。请注意，浏览器版本包含所提及的版本。因此，10+ 表示支持版本 10 及更高版本。
兼容浏览器
IE 10+ Chrome 10+ Firefox 10+ Android 4.4+
GeoLocation
我们可以使用 GeoLocationAPI 来识别用户的当前地理位置。此位置信息可用于各种目的，例如为用户提供附近的兴趣点，或者帮助用户进行导航。
关于 GeolocationAPI，有一点需要注意，可以使用不同的技术来识别用户的位置，例如 IP 地址、WiFi 或 GPS。这些技术中的每一种都有不同的精度级别。
此外，在 GeolocationAPI 可以发送用户信息的之前，用户必须提供同意，因为这与用户的隐私有关。
HTML5 提供了 navigator 对象，该对象有一个 geolocation 属性，我们可以使用它来识别用户的位置。
geolocation 属性有一个 getCurrentPosition() 方法，它接受一个参数“position”，该参数有两个属性 coords 和 timestamp。coords 对象包含 latitude 和 longitude 等属性，用于识别用户的位置。timestamp 属性包含获取位置的日期时间。
get_location();
function get_location() {
if (typeof(navigator)!="undefined") {
navigator.geolocation.getCurrentPosition(get_lat_lon);
} else {
// geolocation not supported
}
}
function get_lat_lon(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
通过向用户显示消息框，要求用户在获取其地理位置之前提供同意。
兼容浏览器
IE 9+ Firefox 3.5+ Chrome 5.0+ Android 2.0+
Placeholder
Placeholder 属性定义了在输入字段为空时显示在字段中的文本。一旦我们开始在字段中输入内容，文本就会消失。因此，它旨在帮助用户了解该字段应输入什么内容。
不支持 placeholder 属性的浏览器将直接忽略它。所以使用它没有任何问题。
兼容浏览器
IE 10.0+ Firefox 4.0+ Chrome 4.0+ Android 2.1+
新的输入类型
在处理 HTML 表单时，我们可能都觉得为了一个简单的任务，比如电子邮件字段验证或电话号码验证，要做太多的工作。我们实现这一目标的一种方法是使用 jQuery 插件或其他 JavaScript 库。但有了 HTML5，这些功能现在已成为 HTML 的一部分，可以直接使用，无需使用任何 JavaScript 库。
HTML5 引入了 email、date、search、range 等新输入类型。这些类型消除了我们编写自定义 JavaScript 代码进行验证任务的需要。HTML5 中引入了 13 种新的输入类型。这里我们将介绍一些更有用的类型。
不同浏览器对这些功能的支持程度不同，但好消息是，如果浏览器不支持输入类型，它将被翻译为 type="text"，而不是抛出错误或不识别输入类型。
那么，让我们来看一些输入类型。
Email 类型
我们可以使用 email 类型，如下所示：
<input type="email" name="email"/>
现在，如果我们尝试输入无效的电子邮件地址，我们将收到错误消息。
兼容浏览器
IE 10+ Firefox 4+ Chrome 6+
数字
Number 类型用于指定数值。在 Chrome 中，number 类型显示为微调器。我们可以使用一些属性来自定义用户想要输入的数字，例如 min、max、step 和 value 属性。
<input type="number" min="2" max="10" step="2" value="2" name="shoe-size"/>
兼容浏览器
IE 9+ Firefox 15+ Chrome 25+
日期时间
此类型用于让用户在给定日期选择日期和时间。
<input id="entry-day-time" name="dob" type="datetime">
兼容浏览器
Chrome 31+ Opera 20+ Android 4.4
关注点
Web Hypertext Application Technology Working Group (WHATWG) 是一个由计算机专业人员组成的社区，致力于改进 HTML。
2007 年，WHATWG 规范被采纳为 HTML5。