20有意思的HTML5增强功能

分享于 

25分钟阅读

Web开发

  繁體 雙語

介绍

我们知道,软件和软件的技术不断变化。 因此,我们非常重要的是,让我们熟悉这些更改和修改,从而使我们保持熟悉。

在HTML的情况下,随着HTML5标准的引入,添加了几个新的特性和功能。 本文的目的是帮助软件开发人员理解最佳 20必须知道HTML5的新特性。 这个列表完全基于我的偏好,所以不能被假定为唯一的20应该知道。

HTML5是第五版HTML标准的第。 它的主要思想是在万维网联盟( W3C ) 中执行以下操作:

  • 为多媒体提供丰富的支持
  • 使标记对人类易于理解
  • 不同设备( 电脑,手机,等等 ) 和客户端( 浏览器,等等 ) 一致地理解

20有意思的HTML5增强功能

1.网络存储

按照HTML5规定的标准,浏览器应该本地存储称为web存储的数据,类似于传统的Cookies 格式。 但是这种网络存储更加安全,数据检索的速度也更快:

  • 数据存储为名称值 Collection,因此检索速度更快。
  • 只能通过同一页访问一个网页存储的数据,同时使用同一浏览器访问该页。 例如即使从相同的HTML页面,IE 也不能访问通过 Chrome 存储的数据,从而提供安全性。

另一个好处是能够存储大型数据,甚至不影响应用程序的网络性能。 这里存储有两种风格:

  • 本地存储( localStorage ) - 数据没有过期日期,在浏览器事件结束后,甚至浏览器关闭后,数据不会被删除。
  • 会话存储( sessionStorage ) - 数据由会话驱动,换句话说,它可以供浏览器会话使用,仅关注。

当需要记住用户在不同文本框中输入的内容,即使浏览器重新打开,也可以利用这些存储。 使用传统 Cookies 可以实现这个需求,但是web存储提供了更好的可以访问性和安全性。

在支持的浏览器中,我们可以将网络存储作为:

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

其中'employeeId'是web存储中的用户定义键。

根据需要,可以在 localStorage 中使用 sessionStorage

2.可以编辑内容

可以在支持的浏览器中使用这里特性,可以使HTML元素中的文本内容可以编辑。 这可以应用于所需要使用新属性保存文本的任何元素-'contenteditable',通过将它设置为'true'。 一旦应用,元素中包括子元素在内的所有文本内容都将变得可以编辑。 这在内部利用了前面部分中解释的网络存储。

可以在应用程序中使用,它的中需要提供编辑页面任何特定部分的任何内容( 文本)的选项。 这种方法也可以通过多次使用'text'的'input'元素实现,但是实现会很复杂,进而影响可以维护性或者将来的增强。

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

所以不同 <li> 中的文本变得可以编辑。 比如 待办事项列表实现。

3。可以缩放矢量图形( SVG )

SVG是一种用于描述 2D 个图形/图像的基于XML的语言。 可以通过两种方式提供基于SVG的XML内容:

  • 使用外部文件( .svg ),然后使用 <embed><object> 或者 <iframe> 等元素在主页面HTML页面中嵌入。
  • 它还可以使用 <svg> 元素在HTML页面中嵌入。 比如:
<!DOCTYPEhtml><html><body><svgxmlns="http://www.w3.org/2000/svg"version="1.1"height="190"><ellipsecx="200"cy="100"rx="70"ry="70"fill="red"></svg></body></html>

上面 标记将在受支持的浏览器中打印红色的椭圆。

它比'canvas'的它的他 2D 种图形创建方法有很多优势,以列出一些:

  • 由于这是基于XML的,所以可以使用任何文本编辑器编辑图像
  • 图像放大时,它的质量不会受到影响
  • 不涉及任何复杂的客户端Java脚本
  • 因为它是基于文本的,它简化了图像搜索和索引
  • 独立于分辨率,因此高质量的图像可以打印出来

缺点是,因为它是基于XML的,像任何DOM对象一样,与画布等图形创建方法相比,它的渲染相对较慢。

4.电子邮件,网址输入

现在'input'元素为它的内容提供out-of-the-box验证。 例如通过指定'type=email'或者'type=url',我们可以限制内容文本与有效的电子邮件地址或者URL结构兼容。

虽然它简化了开发人员对内容的验证,但目前并不支持所有浏览器。 因此,除非有明确的理解,或者对客户端应用程序的浏览器类型有限制,否则应该避免使用它。 如果浏览器不支持该属性,则行为类似于常规文本框。换句话说,。'input'类型的'text'元素。

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

"Server发送事件基本上是在需要时从服务器向客户端发送的,换句话说,将不要求客户端向客户端发送数据。 在传统方法中,客户端持续轮询服务器以获得数据,而这导致 GREATER HTTP开销。 使用这些事件,服务器intimates在无需从客户端启动请求的情况下,就可以使用数据。

这样一来,在服务器和客户端之间打开单向消息通道,这是由浏览器直接处理的,用户只需监听消息即可。 浏览器将承担使用JavaScript对象 EventSource 保持连接到服务器的负担。 客户端只需要 register,就像'events' onopen- connection to the server established '','' onmessage- message received from server '和'onerror-when error occurs'在这里对象上。

在客户端:

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提要。 但是,对于双工通信,可以探索HTML5网络套接字 API。

6.不需要脚本和链接的类型

标记 namely'script'和'link'不需要显式提到'type'属性。 这些标记现在具有隐式含义。 例如以前的HTML5,我们将这些标记包括为:

<scripttype="text/javascript"src="path_of_some_javascript.js"></script><linktype="text/css"rel="stylesheet"href="path_of_some_stylesheet.css"/>

将不需要提供'type',只有以下条目足以理解标记是用于脚本和样式表的:

<scriptsrc="path_of_some_javascript.js"></script><linkrel="stylesheet"href="path_of_some_stylesheet.css"/>

7.网络worker

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

在传统方法中,页面被阻塞,直到脚本执行完成。 这个脚本会在 background 中运行,而不会影响按钮单击等它的他脚本和事件。

例如让我们考虑一个 JavaScript,它从一个在线信使应用程序的用户那里提取'message',比如 Gtalk。 让我们将它的保存在一个外部 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' objectpostMessage(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 将继续在 background 中运行,而不影响前端活动,这样任何在线聊天应用都可以采用 等等 实现。

8.图元素

HTML5提供了一种使用'figure'和子'figcaption'元素将标题与图像关联起来的方法。 这些元素有助于在单个单元中对插图。照片。等等 进行分组。 这样可以简化对单元的处理,而不会影响文档的主要流程。 在外观上没有多大差别,但是提供了一种语义方法来分组图像和关联的标题。

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

9.应用程序缓存

这是实现任何网络应用程序脱机浏览的重要工具。 这使用了缓存 Manifest 文件( 。appcache ),它基本上指导浏览器有关哪些文件被缓存以及以下部分:

  • CACHE Manifest - 它有一个文件列表,一旦下载这些文件,它就会被缓存在客户端。
  • NETWORK-文件将不会被缓存,并且需要连接到服务器。
  • FALLBACK-这就像包含了 上面 头的行为。 对于每个文件或者类型,指定将在原始页不可访问,换句话说,联机时使用的回退页。

Manifest 文件内容示例:

缓存清单

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

如果没有找到任何 HTML,则将显示默认的 page_not_found.html。

然后,在主HTML页面中包含 Manifest 文件,如下所示:

<!DOCTYPEHTML><htmlmanifest="manifest_filename.appcache">.. . </html>

这里操作具有以下优点:

  • 脱机浏览功能
  • 提高页面加载
  • 只有更新或者更改的文件才会被下载,从而提高网络带宽的使用

10.Datalist元素

这是HTML5标准中规定的一种新元素。 这与'input'元素一起用于描述一个预定义的值列表。 例如,如果为'input'和关联的'datalist'元素提供了新的'list'属性,那么在支持浏览器中将显示匹配选项。 比如:

<inputlist="countries"name="country"><datalistid="countries"><optionvalue="India"><optionvalue="Indonesia"><optionvalue="USA"><optionvalue="UK"></datalist>

因这里,如果一个输入'i',印度和印度将被列为下拉列表。

11.地理定位

地理定位接口可以用于获取用户位置的地理信息。 在 GPS 启用的设备中,正确获取纬度和经度可能是最好的。 一旦接收到这些数据,使用相同的方法可能会引发与 谷歌地图 类似的应用程序的确切的物理位置。 可以用于以下用途的应用程序类型为:

  • 提供转弯导航的路径查找器
  • 如 ATM,餐厅,加油站,等等 附近的等。

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

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

12.必需的属性

'input'元素/标记的'email'和'url'类型类似,这个属性是为了减轻数据验证负担。 这既可以提供独立属性'required',也可以像 required="required" 那样使用 key-value 对。 一旦应用于-text的任何输入,如果没有提供任何数据,主表单将尝试提交,支持浏览器会突出显示并停止表单提交。

<inputtype="text"name="lastName"required>

或者:

<inputtype="text"name="lastName"required="required">

13.自动对焦属性

像上面讨论的'required'属性一样,也可以通过提供独立属性'autofocus'或者像 autofocus ="autofocus" 这样的key-value 对来应用。 就像 NAME 描述的那样,这有助于自动聚焦或者在加载页面时自动选择一个元素。

<inputtype="text"name="employeeId"placeholder="Employee Id here"requiredautofocus>

或者:

<inputtype="text"name="employeeId"placeholder="Employee Id here"requiredautofocus="autofocus">

14.对 正规表达式 Pattern的支持

再次验证特定 Pattern的输入元素内容的好方法,而无需编写复杂的JavaScript。 在输入元素中使用新的HTML5建议的'Pattern'属性,可以直接在标记本身中提供正则表达式。 如果输入元素中的文本不符合表达式,则浏览器将对控件进行 Highlight。

<inputtype="text"name="lastName"placeholder="Last Name here"requiredautofocuspattern="[A-Za-z]">

15.拖放

拖放也是一个微不足道的需求,但是我们知道传统方法所需要的代码和工作量。 在HTML5标准中,任何元素都可以通过提供 attribute- draggable="true" 而成为" draggable"。 只需要提供事件的实现:

  • 将某些数据拖动到的元素上的ondragstart ( 设置要拖动的数据)
  • 删除数据的元素上的ondrop ( 处理拖动的数据)

要拖动的元素:

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

拖放数据将被删除的容器:

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

16.音频元素

目前,为了支持在网页中的音频文件,我们必须依赖第三方提供 Plug-Ins ( 像 Flash 播放器)。 HTML5现在提供了播放音频文件的标准:

<audioautoplay="autoplay"controls="controls"> 
 <sourcesrc="audio1.ogg"/> 
 <sourcesrc="audio1.mp3"/> 
 <ahref="audio1.mp3">Click here to download the mp3.</a></audio>

由于HTML5规范没有指定任何标准,要保持实现符合不同浏览器和不同版本的'source'。 浏览器将选取它所理解的第一个格式。 此外,还建议在'audio'元素中保留一些消息,这样对于非兼容浏览器,将显示这里消息不支持这里音频元素的情况,比如:

<audioautoplay="autoplay"controls="controls"> 
 <sourcesrc="audio1.ogg"/> 
 <sourcesrc="audio1.mp3"/> 
 Your browser doesn't have support for HTML5 'audio' element </audio>

17.视频元素

比如音频。视频等,直到现在我们还需要依赖外部 Plug-Ins,没有HTML标准,不同的浏览器支持不同的。 HTML5现在提供了一个播放视频文件的标准。 所有的好实践都提到 上面 对音频元素有好的视频元素:

<videowidth="300"height="200"controlspreloadid="vd1"><sourcesrc="movie1.mp4"type="video/mp4"><sourcesrc="movie1.ogg"type="video/ogg"> Your browser doesn't have support for HTML5 'video' element </video>

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

对于音频和视频元素,HTML5指定了DOM方法。属性和事件,这些方法可以通过 JavaScript。 例如:

有方法以编程方式 playpause 等。

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

在这里,vd1 是视频元素。 这些方法,即 playVIdeopauseVideo,可以从按钮'点击事件 invoked。

autoplayvolumeduration,等等 E.g. 等属性:

var vElement=document.getElementById("vd1");
vElement.autoplay=true; //thus plays the media as soon as it is loaded

有一些事件可以告诉开始操作,如 canplayplaypause,等等 E.g.:

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

18.slider 控件使用type-范围的输入元素

这也是一个简单的用户界面需求,我们需要显示一条滑动条来描述某些操作的完成。 HTML5为输入元素指定了新的范围类型。

<inputtype="range">

它支持 minmaxstepvalue 等附加属性。 我们甚至可以添加事件监听器来开发用户驱动的slider,类似于音量控制等。

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

19.标记元素

标记元素就像一个荧光笔。 例如,如果我们想要 Highlight的一部分文本,那么我们可以使用'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.通过前缀 Prefixing data自定义属性'

现在使用 HTML5,对任何元素都有正式的定制属性支持。 尽管以前有些浏览器确实支持用户定义属性,例如:

<inputtype="text"id="input1"requiredcustomAttribute= 'abc'>

但在所有浏览器中并不支持这种功能。 但是现在HTML5推荐,我们可能在所有支持浏览器中有非常相似的东西。 唯一的需求是,我们需要将自定义属性与 word-'data'一起使用,并且我们很好。

<inputtype="text"id="input1"requireddata-customAttribute= 'abc'>

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

现在,我们已经学习了一些有趣和有用的增强功能,目前并非所有的增强都支持。

在这里,我们将看到在使用的浏览器中是否支持关注增强的一些方法。

  • 例如,要了解'input 元素是否支持 pattern' 属性,我们可以动态创建'input"元素,然后尝试在它的中查找属性:
<script>if (!'pattern'in document.createElement('input') ) { 
 // then the 'pattern' attribute is not supported // hence need to provide the traditional approach} </script>
  • 要检查任何特定的元素或者对象,比如 audioEventSource 等。

对于 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中规定的一些新增增强,并学习了如何使用这些增强功能。 但是值得注意的是,并非所有浏览器都以相同的速度适应这些标准或者增强。 因这里,如果我们想让我们的网站在所有浏览器上一致,实际上,我们需要确保我们提供。 也就是说,如果不支持任何特定的elementattribute。等等,那么在传统上提供一种替代方法来处理它。 我认为,本文提供的内容很有帮助。

引用


INT  Html5  Enhancement  
相关文章