在HTML5中,新特性

分享于 

12分钟阅读

Web开发

  繁體

介绍

在以前的网页应用程序中,web页面和服务器仅仅是 html elements.User的一个 Collection,其中包含了web页面和服务器,这是早期web应用程序中常见的方案。

由于网页不仅可以显示为用户,而且可以在应用程序中提供这些功能,如我们希望为今天的用户提供这些功能。动画。执行 validations.So 等,因此Web应用程序已经彻底改变了。

We开发者are依赖第三方库和插件来执行这些基本 functions.We,如。javascript。验证框架和其他第三方库来实现这一目标。

HTML5 inludes将所有这些特性都从框中删除,所以当使用 HTML 5时,我们不需要恢复这些组件。

我们可以正式地将HTML5定义为一组 HTML。CSS和JavaScript规范,使开发者能够构建下一代Web应用程序。

由于 Visual Studio 支持 HTML5,所以我们可以在 Visual Studio 编辑器中使用HTML5特性,我们将为新的HTML5标签提供智能感知支持

我们将讨论一些新特性,这些特性由 HTML5 但是,首先让我们看看页面级别的重要变化。

Doctype声明。

Doctype声明用于指定html版本,它在HTML4中使用的html版本更简单,在HTML4中是 decalred


<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">




实际上HTML4有 3种不同类型的doctype声明:针对不同场景的严格。过渡和框架集。

HTML5中的简单声明对比


<!DOCTYPE html>



脚本和链接标记中的类型属性

使用HTML4时,我们用来将类型属性添加到链接和脚本 tags.But,如我们所


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



在HTML5中,我们可以移除类型属性,这样我们可以使用


<script src="Scripts/HTML5features.js"></script>



HTML5中一些有趣的新特性包括:

  • WebWorker
  • 地理定位。
  • 位占位符
  • 新输入标记。

要注意,的浏览器支持不同的特性,在使用HTML5功能之前,浏览器的一个特性可能是HTML5的一个特性,而不是在旧的version.So 中提供。

同样,如何实现特定功能,如如何显示,在浏览器之间不同。

WebStorage

本地或者胖客户机应用程序在存储数据时具有优势,如文件系统或者数据库等许多工具。 如果使用 HTML4,那么我们可以选择使用 Cookies 将数据存储在客户端 side.But 上,使用 Cookies 就没有什么限制了

  • 它通过每个httprequest传送
  • 它们的大小限制为 4 kb

cookie中的数据未加密,因这里不安全地将数据传输到每个请求,除非网站使用 SSL.But SSL。

由于这些限制,开发者喜欢将数据存储在服务器上而不是 client.But HTML5提供另一种更好的替代方法来存储客户机上的数据。

HTML为存储页面特定数据提供了Web存储对象,在客户端上存储。

在 Cookies 上使用 web sockets的两个优点是:

我们知道 Cookies 在每个httprequest传输,而在 web socket的情况下,只要需要,就可以传输数据。

Cookies的大小限制约为 4KB,而WebStorage则可以达到 5MB 每个域的大小。

web socket可以为 2种类型:

因此,数据存储在没有过期的情况下。

:当会话过期或者用户关闭网络浏览器时清除特定会话数据的数据。

在使用HTML5特性之前,我们需要检查它是否支持浏览器。 我们可以使用以下 2种方法中的任意一种来检查这里方法:

使用 hardwarebutton

hardwarebutton是 用户可以在浏览器浏览器中检测HTML5和CSS3特性的JavaScript库。


var storage = window.localStorage;



 if (!Modernizr.localstorage) {



 alert("This browser doesn't support HTML5 Local Storage!");



 }



直接


if (typeof (Storage)!== "undefined") {



 // Code for localStorage/sessionStorage.



 }



 else {



 // Sorry! No Web Storage support..



 }




所以使用新的HTML5特性是首先检查浏览器是否支持它,然后我们应该使用自定义的. If。

现在在检查web服务的支持之后,可以很容易地在 web WebStorage中存储值。 WebStorage使用键/值 pairs.So 存储值,在 web WebStorage中存储值就像设置键的值一样简单。


if (typeof (Storage)!== "undefined") {



 // Store the name



 localStorage.name = "My name";



 // Retrieve



 var name = localStorage.name;



}




类似地,我们可以使用会话存储对象作为


if (typeof (Storage)!== "undefined") {



 // Store the name



 sessionStorage.name = "My name";



 // Retrieve



 var name = "My name";



}




请注意,甚至认为数据存储在客户机上,我们可以通过以编程方式将数据传输到服务器。

web服务支持的浏览器。

IE 8.0 +Firefox 3.5 +Chrome 4.0 +Android 2.0 +

WebWorker

当我们尝试执行 page.The 问题的时候,我们都在使用 javascript unresponsive因为javascript是单一的,因为在使用javascript时没有直接的简单方式实现异步行为。

web页面是用来在网页中运行 background 脚本的,但是UI脚本没有被阻止。WebWorkers使用消息来传递任务进程的消息,比如线程和线程。

下面的示例演示一个简单的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");



 }



}




We HTML5features.Please 文件中所包含的脚本定义了脚本,浏览器版本包含版本 10 + 上支持的一个 mentioned.So 10 + 表示。

兼容浏览器

IE 10 +Chrome 10 +Firefox 10 +Android 4.4 +

地理定位

我们可以使用 GeoLocationAPI.This 位置信息来识别用户的当前地理位置。

关于GeolocationAPI的一个重要问题是,不同的技术可以用来识别用户的位置,比如IP地址,这些技术的GPS.Each 和的准确度不同。

用户必须在GeolocationAPI发送用户信息之前提供他的同意,因为这与用户的隐私有关。

HTML5提供了导航对象,它具有地理定位属性,我们可以使用它来标识用户的位置。

geolocation属性包含 getCurrentPosition() 参数"位置"参数为cords包含two和 timestamp.The cords对象,它包含 latitude 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 +

占位符

占位符属性定义显示的文本只要在字段中键入文本,只要字段是 empty.As,就可以帮助用户知道输入字段中的内容。

不支持占位符属性的浏览器将只忽略它。 所以使用它没有什么害处。

兼容的浏览器

IE 10.0 + Firefox 4.0 + Chrome 4.0 + 安 Android +

新输入类型

使用HTML表单时,所有的工作都可能只是因为我们在使用jquery插件或者电话号码的时候做过太多的事情,而不是使用HTML插件,也可以直接使用 HTML5,而不使用任何javascript库。

我们会介绍一些新的输入类型,这些类型在 HTML5.Here 中引入了自定义的javascript代码,如:email,date,search,range,range。

不同的浏览器对这些特性有不同的支持,但是如果浏览器doesent支持输入类型而不是将输入类型转换为 type="文本",而不是对输入类型进行识别,那么这就不。

让我们来看看一些输入类型。

电子邮件类型

我们可以使用电子邮件类型作为


<input type="email" name="email"/>



现在如果我们尝试输入无效的电子邮件地址,我们将得到错误消息

兼容浏览器

IE 10 +Firefox 4 +Chrome 6 +

用于指定数字 value.In Chrome的数字类型ise数字类型显示为 spinner.We 可以使用一些属性自定义用户输入的数字,最大值,步进和值属性。


<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 + 安卓 4.4

Points of Interest

Web超文本应用技术工作组( WHATWG ) 是一个致力于改善HTML的计算机专业人士社区。

在 2007年,WHATWG规范被作为 HTML5.

你可以使用在线网站,例如 http://html5test.com/ 查看浏览器支持哪些HTML5功能。


Html5  feature  
相关文章